[Day21] Flutter GetX with animation

Flutter animation 原生的StatefullWidget
添加 SingleTickerProviderStateMixin,
使用GetX的话我个人是把animateionController写在GetXController,
GetX有提供SingleGetTickerProviderMixin.

下面直接看code
GetxController部分
animationController 设定整个动画在0.5秒.
接下来设定了两个animation

flipAnimation:
Tween 0.0 -> 2.0 用在图片旋转.
scaleAnimation:
这边用的是TweenSequence 可以设定时间的占比(weight)和变化量.
想做一个sacel的小->大->小变化的过程(1 -> 2 > 3 -> 2 -> 1)

class ExtensionPageController extends GetxController
    with SingleGetTickerProviderMixin {
      
  late AnimationController animationController;
  late Animation<double> scaleAnimation;
  late Animation<double> flipAnimation;

  @override
  void onInit() {
    animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));

    //小->大->小 变化的过程 (1 -> 2 > 3 -> 2 -> 1)
    scaleAnimation = TweenSequence(<TweenSequenceItem<double>>[
      TweenSequenceItem(tween: Tween(begin: 1.0, end: 2.0), weight: 25),
      TweenSequenceItem(tween: Tween(begin: 2.0, end: 3.0), weight: 25),
      TweenSequenceItem(tween: Tween(begin: 3.0, end: 2.0), weight: 25),
      TweenSequenceItem(tween: Tween(begin: 2.0, end: 1.0), weight: 25),
    ]).animate(animationController);

    flipAnimation = Tween(begin: 0.0, end: 2.0).animate(animationController);
    super.onInit();
  }

  animationStart() {
    animationController.forward(from: 0.0);
  }

}

Widget部分
这边借用前篇多国语系切换下面还有的空间.

使用GetBuilder和AnimatedBuilder,
IconButton按下触发动画呼叫controller的 animationStart()
AnimatedBuilder 回传 Transform,
scale 大小(带入上面写好的scaleAnimation),
rotateY水平翻转(flipAnimation),

Expanded(
flex: 4,
child: GetBuilder<ExtensionPageController>(
  init: controller,
  initState: (_) {},
  tag: "imageFlip",
  builder: (_) {
    return AnimatedBuilder(
      animation: controller.animationController,
      builder: (context, child) {
          return Transform(
            child: child,
            alignment: Alignment.center,
            transform: Matrix4.identity()
              ..scale(controller.scaleAnimation.value,
                  controller.scaleAnimation.value, 1)
              ..rotateY(pi * controller.flipAnimation.value),
          );
      },
      child: IconButton(
        icon: Icon(Icons.ac_unit, size: 50),
        onPressed: () => controller.animationStart(),
      ),
    );
  },
),
),

实际效果