Flutter序列动画插件sequenced_animations的使用

Flutter序列动画插件sequenced_animations的使用

通过平滑且复杂的动画提升您的应用程序外观！轻松为您的小部件创建平滑且精确的序列动画，制作出精美且富有创意的动画和过渡效果。
本插件灵感来源于flutter_staggered_animations。

展示

以下是使用sequenced_animations插件创建的一些动画示例：

序列动画示例1
序列动画示例2
加载动画示例

基本用法

以下是一个简单的序列动画示例：

import 'package:flutter/material.dart';
import 'package:sequenced_animations/sequenced_animations.dart';

class MyAnimatedPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SequencedAnimationsBuilder(
        animations: 4, // 定义动画数量
        repeat: true, // 是否重复播放
        reverse: true, // 是否反向播放
        curve: Curves.easeOutQuad, // 动画曲线
        duration: const Duration(milliseconds: 600), // 每个动画的持续时间
        builder: (values, [children]) => Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(
            4,
            (index) => Expanded(
              child: AspectRatio(
                aspectRatio: 1,
                child: FractionalTranslation(
                  translation: Offset(0.0, -values[index]), // 动画偏移值
                  child: Container(
                    margin: const EdgeInsets.symmetric(horizontal: 20.0),
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.lightBlue, Colors.blueAccent], // 渐变颜色
                      ),
                      shape: BoxShape.circle,
                    ),
                    alignment: Alignment.center,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter序列动画插件sequenced_animations的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter序列动画插件sequenced_animations的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


sequenced_animations 是一个用于在 Flutter 中创建序列化动画的插件。它允许你按照特定的顺序和时间安排多个动画，从而创建复杂的动画效果。以下是如何使用 sequenced_animations 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 sequenced_animations 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  sequenced_animations: ^1.0.0

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 sequenced_animations 包：

import 'package:sequenced_animations/sequenced_animations.dart';

3. 创建动画序列

你可以使用 SequencedAnimation 类来创建一个动画序列。以下是一个简单的示例，展示了如何创建一个包含多个动画的序列：

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  SequencedAnimation _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    _animation = SequencedAnimation(
      [
        Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: _controller,
            curve: Interval(0.0, 0.5, curve: Curves.easeIn),
          ),
        ),
        Tween<double>(begin: 0, end: 200).animate(
          CurvedAnimation(
            parent: _controller,
            curve: Interval(0.5, 1.0, curve: Curves.easeOut),
          ),
        ),
      ],
    );

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, _animation[1].value),
          child: Opacity(
            opacity: _animation[0].value,
            child: child,
          ),
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

4. 解释代码

  • AnimationController: 控制动画的播放和停止。
  • SequencedAnimation: 包含多个动画的序列，每个动画都有一个时间间隔（Interval）。
  • Tween: 定义动画的起始值和结束值。
  • CurvedAnimation: 定义动画的曲线（如 easeIn, easeOut 等）。
  • AnimatedBuilder: 用于在动画过程中重建 UI。

5. 运行动画

在 initState 中调用 _controller.forward() 来启动动画。你可以通过 _controller.reverse() 来反向播放动画，或者通过 _controller.repeat() 来循环播放动画。

6. 自定义动画

你可以根据需要添加更多的动画到 SequencedAnimation 中，并调整每个动画的时间间隔和曲线。

7. 处理动画状态

你可以监听 AnimationController 的状态来处理动画的开始、结束、重复等事件。

_controller.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    // 动画完成时的处理
  } else if (status == AnimationStatus.dismissed) {
    // 动画重置时的处理
  }
});

8. 停止和重置动画

你可以使用 _controller.stop() 来停止动画，或者使用 _controller.reset() 来重置动画。

9. 组合多个动画

你可以将多个 SequencedAnimation 组合在一起，创建更复杂的动画效果。

10. 使用示例

你可以在 build 方法中使用 _animation[index].value 来获取每个动画的当前值，并将其应用到你的 UI 组件中。

Transform.translate(
  offset: Offset(0, _animation[1].value),
  child: Opacity(
    opacity: _animation[0].value,
    child: child,
  ),
)
回到顶部