Flutter 基础动画

160 阅读1分钟

动画基本结构

需要继承StatefulWidget来使用

需要继承TickerProvider,如果有多个AnimationController,则应该使用TickerProviderStateMixin。

动画控制器

AnimationController _controller;
   _controller = AnimationController(  
      vsync: this, //
      duration: Duration(seconds: 3),//动画时间 microseconds:500

动画曲线类型CurvedAnimation

//使用弹性曲线 animation=CurvedAnimation(parent: controller, curve: Curves.bounceIn);//还有curve:easeOutQuart

启动动画controller.forward()

class _ScaleAnimationRouteState extends State<ScaleAnimationRoute>  with SingleTickerProviderStateMixin{ 

  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(seconds: 3), vsync: this);
    //图片宽高从0变到300
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller)
      ..addListener(() {
        setState(()=>{});
      });
    //使用弹性曲线
    animation=CurvedAnimation(parent: controller, curve: Curves.bounceIn);
    //启动动画(正向执行) repeat()重复执行
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
       child: Image.asset("imgs/avatar.png",
          width: animation.value,
          height: animation.value
      ),
    );
  }

  dispose() {
    //路由销毁时需要释放动画资源
    controller.dispose();
    super.dispose();
  }
}