Flutter初学 —— 动画的使用

I 介绍

一款用户体验好的应用，或多或少都会有一些动画交互体验，而Flutter也包含了众多的动画类，先让我们看看最近仿写的一个小Demo

1645536419348734 (3).gif

Flutter动画看起来非常的流畅，也很舒服；像要在Flutter中实现这样的动画并不难，但是相对于在android中来说就有点捉襟见肘了,虽然实现起来没任何问题，但是代码的量会非常多；

在学习Flutter的动画前，需要了解几个主要的类：

Animation

Animation 为一个抽象类，它的实现类有很多; 它的主要功能设置动画的监听事件；

WechatIMG42.png

AnimationController

AnimationController类似于Android中的一个Animation基类，用于控制动画的时长来显示运动的状态，可以设置动画是正向运动，还是反向运动；相对而言，Flutter分得更细，控制类只做动画的基础控制，而不去管动画的曲率（Android中，animation设置所有的动画参数）；

Curve

曲线，曲率；表示一个动画运动的速度快慢，和Android中的类似，不过Flutter中定义了比Android更多的运动曲率：

WX20220222-221446.png

Tween

在Android中使用动画，我们经常用ValueAnimation来拿到动画中提供的数值，在Flutter中，如果你想使用自己定义的数值，在AnimationController中定义的通常范围在[0,1]，所以就有了Tween来通过映射的方式来提供数值；

Tween是一个基础类，它也有多个子类，来创建不同的数值，通过名字我们就能了解到其作用：

WX20220222-222150.png

II使用

下面，我们通过一个简单的例子来创建一个位移动画：

1645540657884014.gif

效果非常简单，这里我贴下代码：

class AnimationState extends State with TickerProviderStateMixin {
  late AnimationController animationController;

  @override
  void initState() {
    animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 5000));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final curvedAnimation = CurvedAnimation(parent: animationController, curve: Curves.fastOutSlowIn);
    final slideTransition = Tween(begin: const Offset(0, 0), end: const Offset(1, 0)).animate(curvedAnimation);

    return Scaffold(
      appBar: AppBar(
        title: const Text("测试使用动画"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            SlideTransition(
              position: slideTransition,
              child: const Text(
                "我是移动的view",
                style: TextStyle(fontSize: 22, color: Colors.red),
              ),
            ),
            const SizedBox(
              height: 100,
            ),
            TextButton(onPressed: () {
              animationController.forward();
            }, child: const Text("点击开始移动"))
          ],
        ),
      ),
    );
  }
}

首先，我们需要一个管理动画的类，所以先创建AnimationController, 设置时间和vsync，这里我们可以先不了解这个vsync : TickerProvider 是做什么用的，使State类with它即可；

然后我们使用了位移动画，所以在创建动画的时候我们使用了SlideTransition，它需要给一个position，乍一看是位置，实际上该参数是一个Animation， 所以这里需要传一个Animation子类，而我们上面介绍了Tween是管理数值的，需要Animation就是需要一个数值的管理者，通过创建Tween得知需要两个参数：start / end；这两个参数也是一个泛型，可以传整形，也可以传Offset坐标，这里我们对位置进行动画修改，所以传了坐标；
再然后使用animate方法返回一个animation

animate方法需要一个Animation，这里其实是一个曲率，我们看源码可以得知实现类也很多：

WX20220222-225009.png

我们使用了CurvedAnimation， 设置controller以及curves曲率运动即可

最后点击按钮调用controller的 forward()方法开始我们的动画。