颤动动画加速或速度变化答案

【问题标题】：flutter animation acceleration or speed change颤动动画加速或速度变化
【发布时间】：2021-07-19 12:33:17
【问题描述】：

我们怎样才能改变动画在持续时间中的加速度或在它的持续时间中做一些停止？例如，在 3 秒内将小部件缩放到 2 倍，而不是在 3 秒内停止一秒，然后再将其缩放到 2 倍。

AnimationController_anim1 = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 3000),
);
ScaleTransition(
                scale: Tween(begin: 1.0, end: 2).animate(_anim1),
                child: ClipRect(
                  clipBehavior: Clip.hardEdge,
                  child: OverflowBox(
                    maxHeight: 70,
                    maxWidth: 70,
                    child: Center(
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.white38,
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                  ),
                ),
              )

【问题讨论】：

检查TweenSequence类

标签： flutter animation flutter-animation

【解决方案1】：

您可以使用 Curve 类，它提供了一种将动画的单位间隔映射到您想要的所需单位间隔的方法例如，曲线应该实现一个变换函数，它是一个映射器，它接收一个 0,1 范围内的时间值，表示动画当前时间进度，您可以返回一个值来指示动画的新进度应该是什么，例如您可以说如果时间大于 0，则返回 time2，它会将您的动画加速为 2x 还请注意，您应该被允许返回 0 到 1 范围内的值，因此在本例中，您应该限制时间2 最多为 1

这是 Curve 类文档的链接： https://api.flutter.dev/flutter/animation/Curve-class.html

此外，Curves 类中有一些现成可用的曲线，您已经可以使用它们，或者查看这些曲线的实现来激发灵感： https://api.flutter.dev/flutter/animation/Curves-class.html

【讨论】：

感谢您的精彩解释，这很有帮助。但我不能接受它作为完整的答案，因为我找到了一种更简单的方法，使用“TweenSequence”来实现这一点，我将发布代码作为答案。

【解决方案2】：

当我四处寻找时，我找到了两种不同的解决方案，一种是 Amir Hossein Mirzaei 提到的，它使用 Curve 类，它非常强大和灵活，但它有点复杂和困难的解决方案（除了如此强大)，但第二种方式更方便，由 TweenSequence 处理如下： 1 - 制作动画控制器 2- 制作 TweenSequence 并为动画的每个步骤添加 TweenSequenceItem 3- 将其设置为小部件

AnimationController _anim1 = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 8500),
  //reverseDuration: Duration(milliseconds: 1000),
)..repeat(reverse: true);


Animation<double> _animation1 = TweenSequence(
  <TweenSequenceItem<double>>[
    TweenSequenceItem<double>(
      tween: Tween<double>(begin: 1.0, end: 1.5),
      weight: 23.5,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(1.5),
      weight: 6.0,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(begin: 1.5, end: 2.0),
      weight: 23.5,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(2.0),
      weight: 47.0,
    ),
  ],
).animate(_anim1);


ScaleTransition(
scale: _animation1,
child: ClipRect(
  clipBehavior: Clip.hardEdge,
  child: OverflowBox(
    maxHeight: 70,
    maxWidth: 70,
    child: Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white38,
          shape: BoxShape.circle,
        ),
      ),
    ),
  ),
),
)

【讨论】：