Flutter中的Animations（二）中的艺术：释放你的想象力

Android

2023-10-17 17:55:47

引言

还记得我们在上一节中是如何更新小部件的状态的吗？我们首先创建动画，然后给它添加监听，最后在监听方法中，我们调用setState方法。这至关重要，因为只有调用它，才会让小部件的状态发生变化，并触发UI的重新渲染。

过渡动画：无缝地改变小部件

现在，让我们进一步了解过渡动画。过渡动画用于在两个小部件之间平滑地改变属性。想象一下一个按钮，当我们按下时，它会逐渐变大并改变颜色。

要实现此效果，我们可以使用AnimatedTransition小部件。它接受两个小部件，一个是进入的小部件，另一个是退出的。它还接受一个动画对象，该对象定义动画的行为，例如持续时间和曲线。

示例：制作一个变大的按钮

以下是制作一个变大的按钮的代码：

AnimatedTransition(
  animation: animation,
  child: button,
  builder: (context, child) {
    return Transform.scale(
      scale: scale,
      child: child,
    );
  },
);

在这个示例中，animation是用于定义动画行为的Animation对象，button是要变换的小部件，scale是从0.0（最小）到1.0（最大）的Tween，它用于控制按钮的大小。

英雄动画：在屏幕上平滑过渡

英雄动画是一种高级动画技术，用于在不同屏幕或页面之间平滑过渡共享元素。想象一下，你在一个列表中单击一张图片，然后它放大并无缝地过渡到一个详细视图。

要在Flutter中实现英雄动画，我们需要定义两个英雄标签，一个是源小部件的，另一个是目标小部件的。Flutter会自动处理动画，以平滑地过渡两个元素。

示例：实现英雄动画

以下是如何在Flutter中实现英雄动画的示例代码：

GestureDetector(
  onTap: () {
    Navigator.push(context,
      MaterialPageRoute(builder: (context) {
        return DetailPage(heroTag: heroTag);
      })
    );
  },
  child: Hero(
    tag: heroTag,
    child: Image.network(imageUrl),
  ),
);