Flutter组合动画

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

class _TestNavigatorState extends State 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组合动画)