Flutter 动画（一）

Flutter 动画

准备

void main() {
  runApp(MyWidget());
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: AnimalTween());
  }
}

AnimationController

动画控制器

允许执行以下任务：

• 播放一个动画[向前]或[向后]或[停止]一个动画。

• 设置动画为特定的[值]。

• 定义动画的[上界]和[下界]值。

• 使用物理模拟,创建一个[投掷]动画效果

默认情况下，在给定的持续时间内，[AnimationController]线性生成范围内的值从0.0到1.0。动画控制器生成一个新的值,当运行应用程序的设备准备好显示一个新帧（通常，这个速率约为每秒60个值）

Ticker providers

一个[AnimationController]需要一个[TickerProvider]，它作为构造函数中的’ vsync '参数

[AnimationController]类使用[Ticker]来渐进它所控制的动画

TickerProvider 提供了2个实现类TickerProviderStateMixin和SingleTickerProviderStateMixin

SingleTickerProviderStateMixin 常用于在State整个生命周期中只创建单个AnimationController的情况下

生命周期

当不再需要时，[AnimationController]应该被dispose。这减少了泄漏的可能性。

当与[StatefulWidget]一起使用时，AnimationController]一般被创建在State.initState

方法，然后在[State.dispose)方法中处理

Tween

开始值和结束值之间的线性插值

要在动画中使用[Tween]对象，请调用[Tween]的[animate]方法，并将你想要修改的[Animation]对象传递给它

Sample

FlutterLogo从30-50的放大动画

class AnimalTween extends StatefulWidget {
  @override
  _AnimalTweenState createState() => _AnimalTweenState();
}

class _AnimalTweenState extends State<AnimalTween>
    with SingleTickerProviderStateMixin {
  late Animation animation;
  late AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation = Tween(begin: 30.0, end: 50).animate(controller);
     //控制器的监听
    controller.addListener(() {
       //0.0-1.0之间
      print("value=${controller.value}");
      //调用setState()来触发UI重建
      setState(() {});
    });
      //监听动画状态改变
     controller.addStatusListener((status) {
      print("status=$status");
    });
     //监听修改过后的值
    animation.addListener(() {
      print("animation value=${animation.value}");
    });
      //开始向前运行动画
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
        ),
        body: Center(
          child: FlutterLogo(
            size: animation.value,
          ),
        ));
  }
}

Tween 还可以这样：

late Animation<Offset> animation;
//设置偏移量
animation =
    Tween(begin: Offset(30, 50), end: Offset(10, 0)).animate(controller);

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
        ),
        body: Center(
          child: Stack(
            children: [
              Positioned(
                top: animation.value.dx,
                left: animation.value.dy,
                child: FlutterLogo(),
              )
            ],
          ),
        ));
  }

    

//在两个EdgeInsets之间的插值
EdgeInsetsTween translate = EdgeInsetsTween(
            begin: EdgeInsets.only(left: 20), end: EdgeInsets.only(left: 0))
        .animate(tweenController);

经常见到这样的代码

controller =
    AnimationController(vsync: this, duration: Duration(seconds: 2));
CurvedAnimation curvedAnimation =
    CurvedAnimation(parent: controller, curve: Interval(0.5, 1));
animation = Tween(begin: 30.0, end: 50).animate(curvedAnimation);

CurvedAnimation

将将动画过程定义为一个非线性曲线的动画

CurvedAnimation curvedAnimation =
    CurvedAnimation(parent: controller, curve: Interval(0.5, 1));

构造参数如下：

parent：此动画应用曲线的动画

curve：在forward方向上使用的曲线

reverseCurve：向reverse(相反)方向使用的曲线

Interval

可以使用[Interval]来延迟动画。比如，六秒的动画,使用[Interval]，其[begin]设置为0.5，其[end]设置为1.0将会变成一个3秒后开始的时间为3秒的动画

参考:Flutter中的动画