美文网首页
flutter动画

flutter动画

作者: wrootlflvl | 来源:发表于2019-07-31 10:43 被阅读0次
    class AnimationDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('AnimationDemo'), elevation: 0.0,),
          body: AnimationDemoHome(),
        );
      }
    }
    
    class AnimationDemoHome extends StatefulWidget {
      @override
      _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
    }
    // Ticker 会在每一帧作出一个反应,比如去通知动画对象去计算当前帧的值
    class _AnimationDemoHomeState extends State<AnimationDemoHome>
      with TickerProviderStateMixin {
      // 控制 flutter 的动画使用 AnimationController
      AnimationController animationCtr;
      Animation animation;
      Animation animationColor;
      CurvedAnimation curve; // 曲线动画
    
      @override
      void initState() {
        super.initState();
        // duration:设置动画时长,vsync:主要作用就是放置屏幕外的动画消耗不必要的资源,值应该是 TickerProvider 类型
        animationCtr = AnimationController(
    //      value: 30.0, // 设置初始值
    //      lowerBound: 20.0, // 开始的值
    //      upperBound: 100.0, // 结束的值
          duration: Duration(milliseconds: 3000),
          vsync: this
        );
        // 设置动画效果
        curve = CurvedAnimation(parent: animationCtr, curve: Curves.bounceOut);
    
        // 动画里面需要的范围的值可以用Tween来设置,可以设置大小也可以设置颜色
    //    animation = Tween(begin: 30.0, end: 100.0).animate(animationCtr);
    //    animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(animationCtr);
        // 曲线动画animate中传入curve
        animation = Tween(begin: 30.0, end: 100.0).animate(curve);
        animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(curve);
    
        // 监听控制器控制的动画
    //    animationCtr.addListener(() {
    ////      print('${animationCtr.value}');
    //      setState(() {
    //
    //      });
    //    });
        // 监听动画的运行状态
        animationCtr.addStatusListener((AnimationStatus status) {
          print(status);
        });
        // 开始播放动画
    //    animationCtr.forward();
      }
    
      @override
      void dispose() {
        super.dispose();
        animationCtr.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: AnimationHeart(animations: [animation, animationColor], controller: animationCtr,),
        );
      }
    }
    // 动画值有变化就自动重建自己的小部件
    class AnimationHeart extends AnimatedWidget {
      final List animations;
      final AnimationController controller;
    
      AnimationHeart({this.animations, this.controller}) : super(listenable: controller);
    
      @override
      Widget build(BuildContext context) {
        return IconButton(
            icon: Icon(Icons.favorite),
            iconSize: animations[0].value,
            color: animations[1].value,
            onPressed: () {
              switch (controller.status) {
                case AnimationStatus.completed:
                  controller.reverse();
                  break;
                default:
                  controller.forward();
              }
            }
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter动画

          本文链接:https://www.haomeiwen.com/subject/dckzrctx.html