美文网首页
Flutter组合动画

Flutter组合动画

作者: 刘铁崧 | 来源:发表于2020-12-24 21:36 被阅读0次

    注:一些动画不支持部分Curve值,具体参阅wen
    效果:

    class _TestNavigatorState extends State<TestNavigator> with SingleTickerProviderStateMixin{
      AnimationController _animationController;
      Animation _animation;
      Animation _changeSize;
      Animation _changeColor;
      Animation _changeOpacity;
      Animation _changeRadians;
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        // 创建动画
        _animationController = AnimationController(
          duration: Duration(seconds: 1),
          vsync: this
        );
        // 设置Curve
        _animation = CurvedAnimation(parent: _animationController, curve: Curves.easeInOut);
        // 设置Tween
        _changeSize = Tween(begin: 50.0,end: 100.0).animate(_animation);// 修改尺寸动画
        _changeColor = ColorTween(begin: Colors.red,end: Colors.pink).animate(_animationController);//修改颜色动画
        _changeOpacity = Tween(begin: 0.0,end: 1.0).animate(_animationController);//修改透明度
        _changeRadians = Tween(begin: 0.0,end: 2*pi).animate(_animationController);//旋转角度
        
        // 监听动画状态的改变
        _animationController.addStatusListener((status) {
          if(status == AnimationStatus.completed){// 动画执行完成
            // 反转动画
            _animationController.reverse();
          }
          else if(status == AnimationStatus.dismissed){// 动画状态恢复到初始状态
            _animationController.forward();
          }
        });
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("动画"),
          ),
          body: Center(
              child:Column(
                children: [
                  Center(
                    child: AnimatedBuilder(
                      animation: _animationController,
                      builder: (context,child){
                        return Opacity(
                          opacity: _changeOpacity.value,
                          child: Transform(
                            transform:Matrix4.rotationX(_changeRadians.value),//旋转
                            alignment: Alignment.center,//沿中心点旋转
                            child: Container(
                              height: _changeSize.value,
                              width: _changeSize.value,
                              color: _changeColor.value,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  FloatingActionButton(
                    child: Icon(Icons.play_arrow),
                    onPressed: (){
                      if (_animationController.isAnimating){// 动画正在执行
                        _animationController.stop();
                      }
                      else{// 动画执行结束
                        if (_animationController.status == AnimationStatus.forward){
                          // 动画正向执行
                          _animationController.forward();
                        }
                        else if (_animationController.status == AnimationStatus.reverse){
                          // 动画反转执行
                          _animationController.reverse();
                        }
                        else{
                          _animationController.forward();
                        }
                      }
    
                      // _animationController.isAnimating ? _animationController.stop() : _animationController.forward();
                    },
                  )
                ],
              )
          ),
        );
      }
      @override
      void dispose() {
        _animationController.dispose();
        // TODO: implement dispose
        super.dispose();
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter组合动画

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