Rive: nedir, Flutter ve iOS için animasyon aracı

Rive nedir?

Rive (eski adıyla Rive.app, 2016'da kuruldu), etkileşimli vektör animasyonu için bir grafik düzenleyici ve platformlar arası çalışma zamanıdır. After Effects + Bodymovin'in (Lottie) aksine Rive, birleşik bir ortam sağlar: tasarımcı doğrudan düzenleyicide çizer, canlandırır ve geçiş mantığını yapılandırır. Sonuç, karmaşıklığa bağlı olarak 2 ila 50 KB arasında değişen bir ikili .riv dosyasına aktarılır.

Rive'ın diğer çözümlerden temel farkı State Machine'dir. Düğümlerin animasyonlar (Idle, Hover, Press, Active) olduğu ve aralarındaki geçişlerin tetikleyiciler (Touch, Drag, Boolean) tarafından etkinleştirildiği görsel bir grafiktir. Geliştirici kodda basitçe tetikleyiciler gönderir ve RiveRuntime hangi animasyonun oynatılacağına ve aralarında nasıl sorunsuz geçiş yapılacağına karar verir. Rive Engineering'e (2026) göre, State Machine ile ortalama bir .riv animasyonu 15 KB yer kaplar — eşdeğer bir video dosyasından 5–10 kat daha küçüktür.

Rive Runtime, Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) ve React için kullanılabilir. İşleme, Skia (Flutter/Web), Core Graphics (iOS) veya Canvas (Android) aracılığıyla yapılır. Rive, şekil animasyonunu (özel geometriye sahip Knob, Slider, Button) destekler, bu da yalnızca dekoratif animasyonlar değil, tamamen animasyonlu UI bileşenleri oluşturmayı sağlar.

Rive vs Lottie: yaklaşımların karşılaştırması

Rive ve Lottie farklı görevleri çözer. Lottie, After Effects'ten hazır animasyonlar için bir oynatıcıdır, pasif dekoratif efektler için idealdir. Rive, animasyonun kullanıcı eylemlerine yanıt verdiği, kendi mantığıyla etkileşimli animasyonlar oluşturma aracıdır. Seçim, gereken etkileşim düzeyine bağlıdır.

Rive ne zaman seçilmeli: basma geri bildirimli etkileşimli düğmeler, oyun öğeleri (durumlu karakterler), animasyonlu anahtarlar, duruma tepki veren dinamik simgeler. Lottie ne zaman seçilmeli: ön yükleyiciler, beğeniler, karşılama ekranları, mantıksız vurgu animasyonları. Flutter projeleri için Rive, Skia ve Flutter'ın işleme hattıyla yerel entegrasyon sayesinde tercih edilen seçenektir.

Flutter'da (Dart) Rive entegrasyonu

Flutter'da RiveAnimation, .riv dosyalarını gömmek için ana widget'tır. rive paketi (resmi) aracılığıyla kullanılabilir. RiveAnimation argümanları destekler: artboard (tahta seçimi), animation (animasyon adı), fit, alignment, controllers (State Machine için). Etkileşimli sahneler için StateMachineController kullanılır.

import 'package:rive/rive.dart';

// Basit animasyon oynatma
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// Tetikleyicilerle StateMachineController
class InteractiveButton extends StatefulWidget {
  @override
  State<InteractiveButton> createState() => _InteractiveButtonState();
}

class _InteractiveButtonState extends State<InteractiveButton> {
  StateMachineController? _controller;
  SMIInput<bool>? _isPressed;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _isPressed?.value = true,
      onTapUp: (_) => _isPressed?.value = false,
      child: RiveAnimation.asset(
        'assets/animations/button.riv',
        fit: BoxFit.contain,
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          if (_controller != null) {
            artboard.addController(_controller!);
            _isPressed = _controller!.findInput<bool>('isPressed');
          }
        },
      ),
    );
  }
}

Flutter en iyi uygulamaları: .riv dosyalarını RiveAnimation.asset (yerleşik AssetBundle) aracılığıyla eşzamansız olarak yükleyin. Listeler (ListView) için öğeler arasında yeniden kullanılabilen tek bir StateMachineController kullanın. Rive artık ayrı içe aktarmalar gerektirmez — rive v0.12+ tüm özellikleri içerir. Özel animasyon için RiveAnimationController'ı doğrudan kontrol edin — animasyonlara, karıştırmaya (blend) ve hıza erişim sağlar.

iOS'ta (Swift) Rive entegrasyonu

iOS'ta RiveRuntime, RiveView sınıfı (UIKit) ve RiveViewModel (SwiftUI) tarafından temsil edilir. Kitaplık, Swift Package Manager aracılığıyla bağlanır. RiveView, .riv dosyalarını Core Graphics ve Metal aracılığıyla işler ve ProMotion ekranlarda 120 FPS'yi destekler. State Machine için, tetikleyici bağlama ile RiveStateMachineLayer kullanılır.

import RiveRuntime

// SwiftUI: Animasyonlu RiveViewModel
struct RiveAnimationView: View {
    @State private var isPressed = false

    var body: some View {
        RiveViewModel(fileName: "button").view()
            .frame(width: 200, height: 60)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in
                        if !isPressed {
                            isPressed = true
                            // State Machine aracılığıyla tetikleyici
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: Manuel kontrollü RiveView
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// State Machine yönetimi
riveView.triggerInput(named: "startAnimation")

iOS en iyi uygulamaları: SwiftUI için RiveViewModel kullanın — yaşam döngüsünü otomatik olarak yönetir. UIKit için, olay izleme için RiveViewDelegate'e abone olun. Rive, Core Graphics işleme sayesinde iOS'ta Lottie'den daha az CPU tüketir. NavigationView/UICollectionView'deki animasyonlar için RiveFile.preload() aracılığıyla önceden getirme kullanın.

Android'de (Kotlin) Rive entegrasyonu

Android'de RiveAnimationView, .riv animasyonlarını gömmek için ana View'dir. app.rive:rive-android kitaplığı Gradle aracılığıyla bağlanır. RiveAnimationView, View'den devralır ve donanım hızlandırma desteğiyle Canvas aracılığıyla işleme yapar. State Machine, setTriggers ve setInputs aracılığıyla yönetilir.

// build.gradle.kts
implementation("app.rive:rive-android:0.9.0")

// XML layout
<app.rive.RiveAnimationView
    android:id="@+id/riveView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rive_file="@raw/mascot"
    app:rive_artboard="Mascot"
    app:rive_animation="idle" />

// Kotlin: State Machine yönetimi
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> State Machine'e tetikleyici gönderme
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Animasyon tamamlama işleme
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Android en iyi uygulamaları: .riv dosyalarını res/raw (yerleşik kaynaklar) veya assets (ağ yükleme) aracılığıyla yükleyin. RiveAnimationView yaşam döngüsünü otomatik olarak yönetir — onResume/onPause'da manuel olarak play/pause çağırmayın. RecyclerView'deki animasyonlar için, kaydırma sırasında oynatmayı duraklatmak için setOnScrollListener kullanın. Rive belgelerine (2026) göre, 100 KB'a kadar .riv dosyaları orta sınıf cihazlarda 5–10 ms'de ayrıştırılır.

State Machine: Rive'da geçiş mantığı

State Machine, Rive'ı pasif animasyon biçimlerinden ayıran temel bir özelliktir. Köşelerin durumlar (animasyonlar) ve kenarların tetikleyiciler tarafından etkinleştirilen geçişler olduğu görsel bir grafiktir. State Machine, Rive Editor'da oluşturulur: tasarımcı animasyon düğümleri ekler, bunları çizgilerle birleştirir ve tetikleyiciler (Touch, Boolean, Number) atar. Geliştiricinin yalnızca bu tetikleyicileri koddan göndermesi gerekir.

// Flutter: State Machine üzerinde tam kontrol
import 'package:rive/rive.dart';

class RiveStateMachineWidget extends StatefulWidget {
  @override
  State<RiveStateMachineWidget> createState() => _RiveStateMachineWidgetState();
}

class _RiveStateMachineWidgetState extends State<RiveStateMachineWidget> {
  Artboard? _artboard;
  StateMachineController? _controller;
  SMIInput<bool>? _isHovered;
  SMIInput<double>? _progress;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _isHovered?.value = true,
      onExit: (_) => _isHovered?.value = false,
      child: RiveAnimation.asset(
        'assets/interactive_icon.riv',
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          artboard.addController(_controller!);
          _isHovered = _controller!.findInput<bool>('isHovered');
          _progress = _controller!.findInput<double>('progress');
        },
      ),
    );
  }
}

// Sayısal değer gönderme
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Tetikleyici türleri: Boolean — anahtar (true/false), Number — sayısal değer (0.0–1.0 veya isteğe bağlı aralık), Trigger — tek seferlik darbe (düğmeye basma). Rive Editor'da geçiş yumuşatma (Transition Duration) yapılandırılabilir — pürüzsüzlük için önerilen değer 100–300 ms'dir. Karmaşık UI durumları için iç içe State Machine'ler (Nested State Machines) kullanın — animasyonun her parçası bağımsız olarak yönetilir. Rive State Machine, .riv dosyasında değişiklik yapmadan tüm platformlarda çalışır — geçiş mantığı dosyaya gömülüdür, uygulama kodunda değil.