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刪除。