Flutter学习笔记 动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42215775/article/details/101058631

Animation(动画)：

AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
      //最小值
      lowerBound: 0.0,
      //最大值
      upperBound: 100.0,
      //当前值
      value: 1.0,
    );

    _animationController.addListener((){
      print('${_animationController.value}');
      
    });

    _animationController.forward();
    //反向运行
    //_animationController.reverse();
    //重置
    //_animationController.reset();

    //动画的状态
//    AnimationStatus.forward;
//    AnimationStatus.completed;
//    AnimationStatus.reverse;
//    AnimationStatus.dismissed;
    
  //设置动画范围值  
  Animation animation;  
  animation = Tween(begin: 1.0, end: 100.0).animate(_animationController);
  Animation animationColor;
  animationColor = ColorTween(begin: Colors.white, end: Colors.black).animate(_animationController);
  
  //动画曲线
  CurvedAnimation curvedAnimation;
  curvedAnimation = CurvedAnimation(parent: _animationController, curve: Curves.bounceOut);
  
  }

AnimatedCrossFade:
可以在两个子组件之间交叉淡入

bool _state = true;

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    body: Column(
      children: <Widget>[
        SizedBox(
          height: 200.0,
        ),
        RaisedButton(
            child: Text('Button'),
            onPressed: () {
              setState(() {
                _state = !_state;
              });
            }),
        AnimatedCrossFade(
          alignment: AlignmentDirectional(0.0, 1.0),
          duration: Duration(milliseconds: 1000),
          firstCurve: Curves.fastOutSlowIn,
          secondCurve: Curves.fastOutSlowIn,
          sizeCurve: Curves.fastOutSlowIn,
          firstChild: FlutterLogo(
            size: 100.0,
          ),
          secondChild: FlutterLogo(
            size: 300.0,
          ),
          crossFadeState:
              _state ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        ),
      ],
    ),
  );
}

Hero(飞行动画)：
Hero是可以在页面之间飞行的widget，在页面跳转时产生一个过渡动画

Hero用tag属性标志

页面1:

Hero(
  tag: 'HeroTest',
  child: IconButton(
      icon: Icon(
        Icons.airplanemode_active,
        size: 50,
        color: Colors.teal,
      ),
      onPressed: () {
        Navigator.of(context).pushNamed('/test2');
      }),
),

页面2:

Hero(
  tag: 'HeroTest',
  child: Icon(
    Icons.adb,
    size: 200.0,
    color: Colors.teal,
  ),
),

参考：https://juejin.im/post/5c4dae0de51d456e41391586

FadeTransition：
对透明度使用动画

class TestState extends State<TestPage> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController = AnimationController(
      duration: Duration(milliseconds: 3000),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('Button'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          FadeTransition(
            opacity: _animationController,
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

RotationTransition：
旋转动画

class TestState extends State<TestPage> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController = AnimationController(
      duration: Duration(milliseconds: 3000),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('Button'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          RotationTransition(turns: _animationController,
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.blue,
            ),)
        ],
      ),
    );
  }
}