Flutter动画重复播放插件animated_repeatable的使用

Flutter动画重复播放插件animated_repeatable的使用

animated_repeatable 包提供了一个名为 AnimatedRepeatable 的多功能小部件，允许你为子小部件应用可重复的动画过渡。这些过渡可以在指定次数内循环，从而在你的用户界面中创建动态效果。

特性

• 应用可重复的动画过渡到子小部件。
• 提供多种内置的过渡函数（fade、spin、slide、zoom、shimmer）。
• 允许使用 AnimatedRepeatableTransitionBuilder 自定义过渡。
• 支持使用 pause 属性暂停和恢复播放。
• 可以通过以下属性控制动画行为：
  • repeat: 动画循环的次数（-1 表示无限循环）
  • pause: 是否暂停动画。
  • continuity: 控制暂停时动画是否保持连续。
  • mirror: 动画是否前后镜像播放。
  • reverse: 控制初始动画方向（向前或向后）。
  • transition: 定义动画行为的 AnimatedRepeatableBuilder 函数。
  • curve: 控制动画平滑度的动画曲线。
  • delay: 动画开始前的延迟时间。
  • duration: 每个方向（向前和向后，如果适用）的动画持续时间。
  • reverseTransition: 在镜像效果中向后的过渡。
  • reverseCurve: 向后方向使用的曲线（在镜像效果中）。
  • reverseDelay: 向后动画开始前的延迟（在镜像效果中）。
  • reverseDuration: 可选的向后动画持续时间（镜像效果中）。
• 触发各种动画生命周期阶段的回调：
  • onStart: 在第一次动画播放开始时调用一次。
  • onPause: 每当动画暂停时调用。
  • onContinue: 每当动画从暂停状态恢复时调用。
  • onCycle: 每次动画完成一个循环迭代时调用（向前和向后，如果 reverse 为 true）。
  • onComplete: 当所有指定的循环都播放完毕时调用一次（如果 repeat 不设置为 -1 表示无限循环）。

使用方法

要了解有关 animated_repeatable 中使用的类和其他引用的更多信息，请参阅 API Reference。

导入包

import 'package:animated_repeatable/animated_repeatable.dart';

创建可重复过渡的小部件

AnimatedRepeatable(
  // 重复动画循环 3 次（除初始循环外）
  repeat: 3,

  // 开始动画
  pause: false,

  // 当 `pause` 设置为 `true` 然后变为 `false` 时，重置动画以继续
  continuity: false,

  // 启用镜像效果
  mirror: true,

  // 初始时反向播放动画（可选）
  reverse: true,

  // 使用内置淡入淡出过渡动画，你可以使用
  // 更复杂的动画自定义 AnimatedRepeatableBuilder
  transition: AnimatedRepeatable.fade,

  // 使用曲线使动画更平滑（可选）
  curve: Curves.easeInOut,

  // 延迟动画开始 1 秒
  delay: const Duration(seconds: 1),

  // 设置每个方向（向前和向后）的动画持续时间为 500 毫秒
  duration: const Duration(milliseconds: 500),

  // 为向后动画使用不同的过渡（可选）
  reverseTransition: AnimatedRepeatable.shakeX,

  // 使用曲线使向后动画更平滑（可选）
  reverseCurve: Curves.bounceOut,

  // 设置向后动画开始前的延迟（可选）
  reverseDelay: const Duration(milliseconds: 200),

  // 设置向后动画的持续时间（可选）
  reverseDuration: const Duration(milliseconds: 500),

  // 动画生命周期事件的回调（可选）
  onStart: () => debugPrint('Animation Started'),
  onPause: () => debugPrint('Animation Paused'),
  onContinue: () => debugPrint('Animation Continued'),
  onCycle: (cycle) => debugPrint('Animation Cycle: $cycle'),
  onComplete: () => debugPrint('Animation Completed'),

  // 允许链式效果
  wrapper: (child, state) {
    if (state.isCompleted) {
      return AnimatedRepeatable(
        delay: const Duration(milliseconds: 300),
        duration: const Duration(milliseconds: 700),
        transition: AnimatedRepeatable.shimmer(colors: [
          Colors.black87,
          Colors.blue,
          Colors.black87,
          Colors.black87,
        ]),
        child: child,
      );
    }
    return child;
  },

  // 动画子小部件
  child: const MyWidget(
    text: 'This is the widget that will be animated',
  ),
)

内置过渡

该包提供了各种内置过渡，可以直接使用：

• AnimatedRepeatable.fade: 在动画周期中淡入淡出子小部件。
• AnimatedRepeatable.spin: 绕中心点旋转子小部件。
• AnimatedRepeatable.slide: 将子小部件滑动到指定位置。
• AnimatedRepeatable.zoom: 放大缩小子小部件。
• AnimatedRepeatable.shimmer: 在子小部件上创建闪烁效果。
• AnimatedRepeatable.shakeX: 水平摇晃子小部件。
• AnimatedRepeatable.shakeY: 垂直摇晃子小部件。

自定义过渡

为了获得更多的控制，可以使用 AnimatedRepeatableBuilder 定义自己的过渡函数：

final myCustomTransition = (child, animation) {
  // 实现自定义动画逻辑
  return Container(child: child); // 包裹子小部件
};

AnimatedRepeatable(
  transition: myCustomTransition,
  child: MyWidget(),
),

程序化播放/暂停

通过这种方法，你可以使用全局可访问的键从代码中的任何位置控制 AnimatedRepeatable 小部件的动画播放（播放/暂停）。

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

final repeatableKey = GlobalKey<AnimatedRepeatableState>();

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('程序化 AnimatedRepeatable'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedRepeatable(
                key: repeatableKey,
                repeat: -1, // 无限循环
                mirror: true,
                transition: AnimatedRepeatable.fade,
                duration: const Duration(seconds: 2),
                child: const FlutterLogo(size: 100),
              ),
              const SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      repeatableKey.currentState?.play();
                    },
                    child: const Text('播放'),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      repeatableKey.currentState?.pause();
                    },
                    child: const Text('暂停'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}