Flutter tween动画

需求：做一个图标放大动画

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) =>
            //创建一个容器 包裹 " 用于动画的 widget"，根据动画渐变值 改变其大小
            Container(
          child: child,
          height: animation.value,
          width: animation.value,
        ),
      );
}

3: 回到 StateFulWidget，设置body,引入 AnimatedLogo,设置 第一个步骤时候创建的animation，这里的child我们直接使用FLutterLogo(ps:想设置什么都可以，例如Icon(Icons.xx))，如下:
 

//设置动画组件  animation： 执行的动画 child：需要做动画的 widget
        body: AnimatedLogo(
          animation: animation,
          child: FlutterLogo(),
        ));

全文如下:

import 'dart:ffi';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  _AnimActionDartState createState() => _AnimActionDartState();
}

class _AnimActionDartState extends State<AnimBuildDart>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  AnimationStatus status;
  Animation animation;

  @override
  void initState() {
    //初始化
    super.initState();
    //动画控制器  duration 播放时长 vsync 同步，State 需要实现 SingleTickerProviderStateMixin
    animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    //动画需要一个开始 结束渐变值范围 动画控制器
    animation = Tween<double>(begin: 0, end: 300).animate(animationController);
    animationController.forward();
  }

  @override
  void didChangeDependencies() {
    //   改变
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    //改变 构造
    return Scaffold(
        appBar: AppBar(
          title: Text("tween"),
          leading: GestureDetector(
            child: Icon(Icons.arrow_back),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ),
        //设置动画组件  animation： 执行的动画 child：需要做动画的 widget
        body: AnimatedLogo(
          animation: animation,
          child: FlutterLogo(),
        ));
  }

  @override
  void didUpdateWidget(AnimBuildDart oldWidget) {
    //重绘
    super.didUpdateWidget(oldWidget);
  }

  @override
  void deactivate() {
    // 销毁
    super.deactivate();
  }

  @override
  void dispose() {
    //移除
    super.dispose();
    animationController.dispose();
  }
}

// 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) =>
            //创建一个容器 包裹 " 用于动画的 widget"，根据动画渐变值 改变其大小
            Container(
          child: child,
          height: animation.value,
          width: animation.value,
        ),
      );
}