需求:做一个图标放大动画
1:创建 StateFulWidget、 State, Tween动画的创建需要 begin end渐变值,以及一个控制器,
如下:
//动画控制器 duration 播放时长 vsync 同步,State 需要实现 SingleTickerProviderStateMixin
animationController =
AnimationController(duration: Duration(seconds: 2), vsync: this);
//动画需要一个开始 结束渐变值范围 动画控制器
animation = Tween<double>(begin: 0, end: 300).animate(animationController);
2:本次动画使用 AnimatedBuilder,接下来创建 变大动画的图标之前,我们先来实现 动画组件先,创建一个 AnimatedLogo,用于构造动画,如下:
// AnimatedBuilder 模式的tween 动画组件
class AnimatedLogo extends StatelessWidget {
Animation<double> animation;
Widget child;
//接受一个 动画 用于动画的 widget
AnimatedLogo({this.animation, this.child});
//创建 AnimatedBuilder 设置传入的 动画 组件
@override
Widget build(BuildContext context) => AnimatedBuilder(
animation: animation,
child: child,
builder: (context, child) =>