《Flutter 动画系列一》25种动画组件超全总结

移动开发作者： 2024-08-25 11:40:02

动画运行的原理任何程序的动画原理都是一样的，即：视觉暂留，视觉暂留又叫视觉暂停，人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后

Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。
Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。
AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。
Tween：映射生成不同范围的值，AnimationController的动画值是double类型的，如果需要颜色的变化，Tween可以完成此工作。

class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),lowerBound: 100.0,upperBound: 300.0,vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('开始动画'),onPressed: () {
              _animationController.forward();
            },),Expanded(
            child: Center(
              child: Container(
                width: _animationController.value,height: _animationController.value,color: Colors.red,],);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

_animationController.addListener(() {
  setState(() {});
});

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    _animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
    _animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),Expanded(
            child: Center(
              child: Container(
                width: _animation.value,height: _animation.value,);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

AnimationController中lowerBound和upperBound不能在直接设置为100和300，因为AnimationController需要被CurvedAnimation使用，值的范围必须是0-1。
由于AnimationController值的范围是0-1，而动画需要在100-300变化，所以引入Tween。

_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
  _animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
  _animationController.forward();
}
});