Flutter’da Tween Animasyonları

Başarılı bir mobil uygulama için animasyon kullanmanın kaçınılmaz olduğunu düşünüyorum. Çok basit bir renk değişimi ya da button hareketi tüm UX ve UI algısını yukarı çekebiliyor.

Flutter’ın en büyük sözlerinden biri 60 FPS animasyonlar oluşturabileceğimizdi. 60 fps sözünü başka bir yazıda test edeceğim şimdi basit birkaç animasyon örneği yapalım.

Flutter temel olarak animasyonları ikiye ayırıyor. Fizik temelli ve Tween animasyonlar. (Tween için çeviri bulamadım, verdiğim linkte çergi diyor ama onu bilen tween kelimesini bilenden daha azdır eminim. Aralıklı arasında gibi anlamlara geliyor.)

Tween Animasyonlar

Başlangıç ve bitiş için iki nokta vererek bir değeri bu iki nokta arasında gidişini arayüzümüze yansıtmamız sağlar. Bu değer integer, renk, konum gibi pek çok şey olabilir.

Aşağıdaki main.dart dosyasını flutter projemize ekleyip deneyebilirsiniz.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyApp createState() => _MyApp();
}

class _MyApp extends State<MyApp> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
    animation = Tween<double>(begin: 0, end: 300).animate(controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Container(
          color: Colors.white,
          height: animation.value,
          width: animation.value,
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Yukarıdaki kod büyüyüp küçülen beyaz bir kare oluşturur.

Kod için bazı açıklamalar yapalım.

SingleTickerProviderStateMixin: Bu mixin’i main sınıfımızda kullanarak main sınıfı içinde bir adet animation controller oluşturabiliyoruz. Birden fazla controller için TickerProviderStateMixin kullanabiliriz.

AnimationController: Bu sınıf sayesinde animasyonumuzu reverse, forward, animateTo gibi metotlarla ve isAnimating, isCompleted, isDismissed gibi özellikler kontrol edebiliriz.

Tween: Animatable tipinde bir nesne döner fakat animate metodu ile animation tipinde bir nesne elde ederiz. İki noktalı notasyon ile animation nesnesi üzerindeki metotları çağırabiliriz.

vsync: AnimationController’ın bir parametresi olan bu değişken tickerProvider tipinde olmalıdır. Bu yüzden SingleTickerProviderStateMixin mixin’ini kullanıp vsync parametresine this anahtar kelimesini verebiliriz.

Tween sınıfını implement(yine çeviri faciası, uygulayan diyebiliriz belki) eden pek çok türevi var. flutter dokümantasyonunda bulabilirsiniz. Bunlardan biri olan ColorTween örneği de yapalım.

yukarıdaki main.dart üzerinde aşağıdaki değişiklikleri yapabilirsiniz.

// AnimationController controller; satırında sonra aşağıdaki 2 satırı ekleyin
Animation<Color> colorAnimation;
AnimationController colorController;

// mixin'i SingleTickerProviderStateMixin'den TickerProviderStateMixin'e çevirin

// super.initState(); sonrasına aşağıdakileri ekleyin
colorController =
    AnimationController(vsync: this, duration: Duration(seconds: 2));
colorAnimation = ColorTween(begin: Colors.blueAccent, end: Colors.red).animate(colorController)
  ..addListener(() {
    setState(() {});
  })
  ..addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      colorController.reverse();
    } else if (status == AnimationStatus.dismissed) {
      colorController.forward();
    }
  });
colorController.forward();

// Container'ın color özelliğine colorAnimation.value verin

Medium hesabımdaki şu yazımın çevirisidir.