颤动动画加速或速度变化

Question

我们怎样才能在持续时间内改变动画的加速度或在它的持续时间内停止？例如，在 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,
                        ),
                      ),
                    ),
                  ),
                ),
              )

Answer 1

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

这是 link 曲线 class 文档： https://api.flutter.dev/flutter/animation/Curve-class.html

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

Answer 2

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

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,
        ),
      ),
    ),
  ),
),
)

颤动动画加速或速度变化

flutter animation acceleration or speed change

animation

flutter

flutter-animation