Flutter：使用 TweenAnimationBuilder 延迟动画

Question

你好颤振开发者，

我想使用Widgets列表（每个都产生一个 singleListTile === 自定义 ListTile）和TweenAnimationBuilder创建一个延迟动画。

我正在使用Opacity ，因此每个项目都会在一段时间后淡入。 在我目前的解决方案中， duration只是延长，这很糟糕。 我想要的解决方案是延迟每个动画。

我的目标是在 TweenAnimationBuilder 中使用一种非常简单有效的方式来使用延迟。

我的猜测是需要自定义function或curve来模拟这种延迟。

请考虑我想留在TweenAnimationBuilder内或周围。 我不想在它之外创建StaggeredAnimations或其他对象。

这是当前代码：

Column buildContent(BuildContext context) => Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    for (var i = 0; i < itemList.length; i++)
      TweenAnimationBuilder(
          duration: Duration(milliseconds: 560 + 140 * i),
          tween: Tween<double>(begin: 0.0, end: 1.0),
          builder: (context, value, child) =>
              Opacity(opacity: value, child: child),
          child: singleListTile(itemList[i], context)),
  ],
);

在下图中，您可以看到代码中发生的情况（左侧）以及所需的解决方案（有延迟）应该是什么样子。

我期待您的创造性回应。

Answer 1

我使用另一个 TweenAnimationBuilder 来做延迟动画。

TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0, end: 1),
        duration: Duration(milliseconds: 100 * i),
        builder: (context, animatedValue, child) {
          if (animatedValue == 1) {
            return AnimatedChild;
          }
          return Container();
        },
      )

Answer 2

我找到了一个可以回答这个问题的解决方案。 但是，它不是很可定制，可能需要更多的调整：

Column buildContent(BuildContext context) => Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    for (var i = 0; i < itemList.length; i++)
      TweenAnimationBuilder(
          duration: Duration(milliseconds: 560 + 140 * i),
          curve: Curves.easeInCubic,
          tween: Tween<double>(begin: 0.0, end: 1.0),
          builder: (context, value, child) => Opacity(
              opacity: delayedProgress(animationValue, i),
              child: child),
          child: singleListTile(itemList[i], context)),
  ],
);

功能

...

  double delayedProgress(double animationValue, int i) =>
      ((animationValue * completedExercises.length.toDouble()) -
              (i / completedExercises.length))
          .clamp(0, 1)
          .toDouble();
...

该函数基本上只强制使用 0 和 1 范围内的值，然后乘以animation.value和clamp ，最后通过当前索引除以最大长度（为了平滑度）将itemList.length删除。