Flutter(十七)——组合动画

最新推荐文章于 2023-10-24 13:31:38 发布

李元静

最新推荐文章于 2023-10-24 13:31:38 发布

阅读量2.8w

点赞数

分类专栏： Flutter开发手机应用 android 文章标签： flutter animation 组合动画 android dart

本文链接：https://blog.csdn.net/liyuanjinglyj/article/details/104147151

版权

本文介绍了Flutter中的Staggered Animations（交错动画），也称为组合动画。在实际开发中，动画常常需要结合多种基础效果，如渐变、位移和缩放。在Flutter中，通过AnimationController实现这样的组合动画。文章展示了如何使用AnimationController组合动画，并提供了具体的代码实现，利用AnimatedBuilder简化代码，实现了一个组合动画效果。

摘要由CSDN通过智能技术生成

本文目录

- Staggered Animations
- 组合动画的代码实现

Staggered Animations

Staggered Animations就是交错动画，也可以称之为组合动画。在实际的动画使用过程中，动画可能并不是由一个单一方式呈现的。渐变，位移，缩放等都是基础的动画，而我们有时候需要把这些基础的动画组合起来，使其成为一个组合动画，即交错动画。(下图为本文最终实现效果)

组合动画

在Android开发中，是通过AnimationController来实现这种交错动画的。在Flutter开发中，也沿用了名为AnimationController的类来实现。

组合动画的代码实现

对于如何在Flutter开发中，写交错动画，我们可以通过AnimationController把动画组合在一起，然后分别设置其动画的参数即可。

对于AnimationController来说，控制器的值Tween必须属于（0.0，1.0）。也就是说，组合动画的所有间隔必须在0到1的数字之间进行，有了这个思路，我们来实践实现其交错动画（组合动画），代码如下：

import 'package:flutter/scheduler.dart' show timeDilation;
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{
   
  AnimationController controller;

  @override
  void initState() {
   
    // TODO: implement initState
    super.initState();
    controller=AnimationController(duration: const Duration(milliseconds: 2000),vsync: this);//初始化，动画控制器,每个动画都是执行2秒
  }

  @override
  void dispose() {
   
    // TODO: implement dispose
    super.dispose();
    controller.dispose();//销毁释放
  }

  Future<void> _playAnimation(