Flutter AnimatedAlign 示例

Flutter 动画 Flutter 中有两种动画，它们如下

  1. 基于绘图的
  2. 基于代码的

基于绘图的动画就是 GIF，您可以通过 Rive 和 Lottie 包实现基于绘图的动画。

现在基于代码的动画有两种，如下所示：

  1. 隐式动画
  2. 显式动画

隐式动画可以通过使用预定义的动画小部件来完成，这是实现动画的最佳且推荐的方式。要使用隐式动画，请使用 AnimatedFoo，其中 Foo 是您想要动画化的内容。

一些隐式动画是：1.AnimatedContainer 2.AnimatedAlign 3.AnimatedOpacity 4.AnimatedDefualtTextStye 5.AnimatedPadding 6.AnimatedPhysicalModel 7.AnimatedPosition 8.AnimatedSize 9.AnimatedPositionedDierectional 10.AnimatedTheme 等。

在长长的列表之后，假设您找不到想要动画化的内容，您可以使用 TweenAnimationBuilder 来创建自定义动画。

显式动画它也像隐式动画一样工作，但区别在于它是一个永不停止或连续的过程，使用 .repeat。

显式动画需要 animationController 来执行动画，它还需要 ticker 来更新动画。

您可以执行的一些过渡动画示例：

  1. SizeTransiton
  2. fadeTransiton
  3. alignTransiton
  4. scaleTransiton
  5. rotateTransiton
  6. positionTransiton
  7. defaulttextstyleTransiton
  8. relativepositionTransiton
  9. decoratedboxTransiton
  10. 等等

GitHub

查看 Github