(摘) Flutter动画

2022年5月25日 in FLUTTER flutter 动画约2400字，阅读约5 分钟。

声明：内容源自网络，版权归原作者所有。若有侵权请在网页聊天中联系我

Flutter将动画系统进行封装，抽象出4个概念：Animation、Curve、AnimationController、Tween。

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

Flutter中提供了大量的动画组件及详细用法：

AnimatedBuilder：http://laomengit.com/flutter/widgets/AnimatedBuilder/
AlignTransition:http://laomengit.com/flutter/widgets/AlignTransition/
AnimatedOpacity：http://laomengit.com/flutter/widgets/AnimatedOpacity/
AnimatedAlign：http://laomengit.com/flutter/widgets/AnimatedAlign/
AnimatedPadding：http://laomengit.com/flutter/widgets/AnimatedPadding/
AnimatedCrossFade：http://laomengit.com/flutter/widgets/AnimatedCrossFade/
AnimatedContainer：http://laomengit.com/flutter/widgets/AnimatedContainer/
AnimatedPositioned：http://laomengit.com/flutter/widgets/AnimatedPositioned/
AnimatedPositionedDirectional：http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/
AnimatedSwitcher：http://laomengit.com/flutter/widgets/AnimatedSwitcher/
AnimatedIcon：http://laomengit.com/flutter/widgets/AnimatedIcon/
TweenAnimationBuilder：http://laomengit.com/flutter/widgets/TweenAnimationBuilder/
DecoratedBoxTransition：http://laomengit.com/flutter/widgets/DecoratedBoxTransition/
DefaultTextStyleTransition：http://laomengit.com/flutter/widgets/DefaultTextStyleTransition/
AnimatedDefaultTextStyle：http://laomengit.com/flutter/widgets/AnimatedDefaultTextStyle/
PositionedTransition：http://laomengit.com/flutter/widgets/PositionedTransition/
RelativePositionedTransition：http://laomengit.com/flutter/widgets/RelativePositionedTransition/
RotationTransition：http://laomengit.com/flutter/widgets/RotationTransition/
ScaleTransition：http://laomengit.com/flutter/widgets/ScaleTransition/
SizeTransition：http://laomengit.com/flutter/widgets/SizeTransition/
SlideTransition：http://laomengit.com/flutter/widgets/SlideTransition/
FadeTransition：http://laomengit.com/flutter/widgets/FadeTransition/
AnimatedModalBarrier：http://laomengit.com/flutter/widgets/AnimatedModalBarrier/
AnimatedList：http://laomengit.com/flutter/widgets/AnimatedList/
Hero：http://laomengit.com/flutter/widgets/Hero/

将Container控件的大小由100变为300

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  @override
  void initState() {
    _animationController = AnimationController(
        duration: const 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: const 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();
  }
}

相关文章