Flutter之动画

Flutter之动画

基础动画

• 继承 StatefulWidget
• State继承类 with SingleTickerProviderStateMixin
• 创建控制器 AnimationController _controller;
• 实现动画
• 销毁控制器

class AnimationPage extends StatefulWidget{
  @override
  State createState() => AnimationPageState();
}

class AnimationPageState extends State with SingleTickerProviderStateMixin{
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 创建控制器
    _controller = AnimationController(vsync: this,duration: Duration(seconds: 5));
        _controller.addStatusListener((status) {
        // 监听动画状态
      /// 动画停在开始
      // AnimationStatus.dismissed
      /// 动画从开始到结束
      // AnimationStatus.forward
      /// 动画从结束到开始
      // AnimationStatus.reverse
      /// 动画停在结束
      // AnimationStatus.completed
    });
    _controller.addListener(() {
        // 监听动画进度
      _controller.value; // 获取动画进度值
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁控制器
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Widget contentChild = Container(width: 100,height: 100,color: Colors.red,);
    return Scaffold(
      appBar: AppBar(title: Text("动画"),),
      body: Container(
        child: Column(
          children: [
			// 实现动画
            // 透明度的变化 从透明到不透明
            FadeTransition(opacity: _controller,child: contentChild,),
            Padding(padding: EdgeInsets.all(5.0)),
            // 缩放的动画 2倍大小
            ScaleTransition(scale: Tween(begin: 0.5,end: 2.0).animate(_controller),child: contentChild,),
            Padding(padding: EdgeInsets.all(5.0)),
            // 旋转动画 180度
            RotationTransition(turns: Tween(begin: 0.0,end: 0.5).animate(_controller),child: contentChild,),
            Padding(padding: EdgeInsets.all(5.0)),
            // 平移 Offset 父控件的宽高
            SlideTransition(position: Tween(begin: Offset(0.0,0.0),end: Offset(0.5,1.5)).animate(_controller),child: contentChild,),
            Padding(padding: EdgeInsets.all(5.0)),

            FlatButton(onPressed: (){
             // 动画重置
              _controller.reset();
              // 动画开始
              _controller.forward();
              // 动画反转
              // _controller.reverse();
            }, child: Text("开启动画")),
          ],
        ),
      ),
    );
  }
}

CurvedAnimation

CurvedAnimation animation=CurvedAnimation(parent: controller, curve: Curves.linear);

• parent参数传入一个Animation对象，比如AnimationController
• curve传入传入的就是动画曲线的具体实现，Curves类中已经帮我们默认实现了很多常用的动画曲线，比如减速运动Curves.decelerate

Curves曲线	动画过程
linear	匀速的
decelerate	匀减速
ease	开始加速，后面减速
easeIn	开始慢，后面快
easeOut	开始快，后面慢
easeInOut	开始慢，然后加速，最后再减速

示例代码

controller = AnimationController(
        duration: Duration(seconds: 5),
        vsync: this //
);
// 设置动画曲线，开始快慢，先加速后减速
animation=CurvedAnimation(parent: controller, curve: Curves.easeInOut);
// Tween设置动画的区间值，animate()方法传入一个Animation，AnimationController继承Animation
animation = new Tween(begin: 100.0, end: 500.0).animate(animation)
  // addListener监听动画每一帧的回调，这个调用setState()刷新UI
  ..addListener(() {
    setState(()=>{});
  });
//启动动画(正向执行)
controller.forward();