Flutter 学习笔记 13 - 动画 Tween

AnimationController 对象的默认范围从 0.0 到 1.0。如果需要不同的范围或不同的数据类型，则可以使用 Tween 来配置动画以生成不同的范围或数据类型的值。

// 生成 -200.0 到 0.0 的数值
final Tween doubleTween = Tween<double>(begin: -200.0, end: 0.0);

Tween 是 stateless 的，需要 begin 和 end 值
唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为 0.0 到 1.0，但并不一定

继承 Animatable<T>，而不是继承 Animation<T>，泛型不一定要是 double。如

final Tween colorTween =
    ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween 对象不存储任何状态。相反，它提供了 evaluate(Animation<double> animation) 方法将映射函数应用于动画当前值。Animation 对象的当前值可以通过value 取到。evaluate 函数还执行一些其它处理，例如分别确保在动画值为 0.0 和 1.0 时返回开始和结束状态。

要使用 Tween 对象，调用 animate() 方法，传入一个控制器对象，返回一个 Animation<T>。

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
// 在 500 毫秒内生成从 0 到 255 的整数值，返回一个 Animation 对象
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);

修改上面的代码

// ...
  
@override
initState() {
  super.initState();
  // controller 不加监听
  controller = AnimationController(
      duration: const Duration(milliseconds: 2000), vsync: this);
  // 创建一个 Tween，值从 0 到 300
  animation = Tween(begin: 0.0, end: 300.0).animate(controller)
    ..addListener(() { // 给这个 Animation 添加监听
      setState(() {
        print('${controller.value}-${animation.value}');
      });
    });
  controller.forward(); 
}
  
Widget build(BuildContext context) {
  return Center(
    child: Container(
      margin: EdgeInsets.symmetric(vertical: 10.0),
      // 不使用 AnimationController，使用 Tween 创建出来的 Animation 的 value
      // 本身就是从 0 到 300
      height: animation.value, 
      width: animation.value,
      child: FlutterLogo(),
    ),
  );
}

在监听回调里看打出的日志：

I/flutter (19919): 0.0416255-12.48765
I/flutter (19919): 0.0582755-17.48265
I/flutter (19919): 0.0749255-22.47765
I/flutter (19919): 0.0914725-27.44175
I/flutter (19919): 0.108126-32.4378
I/flutter (19919): 0.1247845-37.43535
I/flutter (19919): 0.1414285-42.42855
I/flutter (19919): 0.1497545-44.926350000000006
I/flutter (19919): 0.1580805-47.424150000000004
I/flutter (19919): 0.257997-77.39909999999999
I/flutter (19919): 0.2663235-79.89705
I/flutter (19919): 0.27465-82.395
I/flutter (19919): 0.282976-84.89280000000001
I/flutter (19919): 0.2913025-87.39075000000001
I/flutter (19919): 0.299629-89.8887
I/flutter (19919): 0.307955-92.3865
I/flutter (19919): 0.3162815-94.88445
I/flutter (19919): 0.324608-97.3824
I/flutter (19919): 0.3329345-99.88035
I/flutter (19919): 0.3412605-102.37815
I/flutter (19919): 0.349587-104.8761
I/flutter (19919): 0.3579135-107.37405
I/flutter (19919): 0.3662395-109.87185
I/flutter (19919): 0.374566-112.3698
I/flutter (19919): 0.3828925-114.86775
I/flutter (19919): 0.3912185-117.36555000000001
I/flutter (19919): 0.399545-119.8635
I/flutter (19919): 0.4078715-122.36145
I/flutter (19919): 0.4161975-124.85925
I/flutter (19919): 0.424524-127.3572
I/flutter (19919): 0.4328505-129.85515
I/flutter (19919): 0.4495675-134.87025
I/flutter (19919): 0.457896-137.36880000000002
I/flutter (19919): 0.466229-139.8687
I/flutter (19919): 0.4745575-142.36725
I/flutter (19919): 0.4828865-144.86595
I/flutter (19919): 0.491216-147.3648
I/flutter (19919): 0.4995475-149.86425
I/flutter (19919): 0.5078805-152.36415
I/flutter (19919): 0.516206-154.86180000000002
I/flutter (19919): 0.5245365-157.36095
I/flutter (19919): 0.5328625-159.85875000000001
I/flutter (19919): 0.5411925-162.35774999999998
I/flutter (19919): 0.5495285-164.85854999999998
I/flutter (19919): 0.55785-167.355
I/flutter (19919): 0.566183-169.8549
I/flutter (19919): 0.574511-172.3533
I/flutter (19919): 0.5828415-174.85245
I/flutter (19919): 0.591168-177.3504
I/flutter (19919): 0.599497-179.8491
I/flutter (19919): 0.607826-182.3478
I/flutter (19919): 0.616154-184.84619999999998
I/flutter (19919): 0.6244815-187.34445
I/flutter (19919): 0.6328105-189.84315
I/flutter (19919): 0.641138-192.3414
I/flutter (19919): 0.649468-194.84040000000002
I/flutter (19919): 0.657797-197.3391
I/flutter (19919): 0.6661305-199.83915
I/flutter (19919): 0.6744545-202.33634999999998
I/flutter (19919): 0.6827875-204.83625
I/flutter (19919): 0.691114-207.3342
I/flutter (19919): 0.699442-209.8326
I/flutter (19919): 0.707771-212.3313
I/flutter (19919): 0.7161025-214.83075
I/flutter (19919): 0.7244285-217.32855
I/flutter (19919): 0.732759-219.82770000000002
I/flutter (19919): 0.7410895-222.32684999999998
I/flutter (19919): 0.7494175-224.82524999999998
I/flutter (19919): 0.7577465-227.32395
I/flutter (19919): 0.766073-229.8219
I/flutter (19919): 0.7743995-232.31985
I/flutter (19919): 0.78273-234.81900000000002
I/flutter (19919): 0.791062-237.3186
I/flutter (19919): 0.79939-239.817
I/flutter (19919): 0.807712-242.3136
I/flutter (19919): 0.8160405-244.81214999999997
I/flutter (19919): 0.824377-247.31310000000002
I/flutter (19919): 0.8327055-249.81165
I/flutter (19919): 0.8410305-252.30915000000002
I/flutter (19919): 0.8493625-254.80875
I/flutter (19919): 0.8576935-257.30805
I/flutter (19919): 0.8660245-259.80735
I/flutter (19919): 0.8743535-262.30605
I/flutter (19919): 0.882682-264.8046
I/flutter (19919): 0.8910165-267.30495
I/flutter (19919): 0.899345-269.8035
I/flutter (19919): 0.907676-272.3028
I/flutter (19919): 0.9160005-274.80015
I/flutter (19919): 0.9243345-277.30035
I/flutter (19919): 0.932661-279.7983
I/flutter (19919): 0.9493195-284.79585
I/flutter (19919): 0.9576515-287.29545
I/flutter (19919): 0.965978-289.7934
I/flutter (19919): 0.9743075-292.29225
I/flutter (19919): 0.9826355-294.79064999999997
I/flutter (19919): 0.9909585-297.28755
I/flutter (19919): 0.99929-299.787
I/flutter (19919): 1.0-300.0

在 2000ms 内，AnimationController 的 value 从 0.0 到 1.0，同时 Tween 的 value 从 0.0 到 300.0。

也可以用 CurvedAnimation 对象作为 animate 方法的参数，以更改 begin 和 end 的值。

CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
animation = Tween(begin: 0.0, end: 300.0).animate(curve);

Flutter 学习笔记 13 - 动画 Tween

猜你喜欢