Flutter动画效果插件coditation_animator的使用

Flutter包coditation_animator用于简化动画的构建。

特性

此包通过暴露animator小部件API来简化在Flutter中设置动画的工作，使其简单地配置一个应用于小部件的动画序列。使用此包，任何Flutter小部件都可以配置为按自定义顺序依次进行一系列动画效果。

该包支持以下动画：

旋转
缩放（放大）
缩放（缩小）
翻转
淡入
淡出
平移

开始使用

安装

在pubspec.yaml文件中添加依赖项：

dependencies:
  coditation_animator: <最新版本>

该包提供了一组与每个支持的动画相对应的配置对象。例如，RotationAnimatorConfig用于设置旋转动画。类似地：

ScaleInAnimatorConfig 用于缩放（放大）动画
ScaleOutAnimatorConfig 用于缩放（缩小）动画
FlipAnimatorConfig 用于翻转动画
FadeInAnimatorConfig 用于淡入动画
FadeOutAnimatorConfig 用于淡出动画
TranslateAnimatorConfig 用于平移动画

这些配置对象也可以通过AnimatorConfig类的静态方法实例化。例如：

AnimatorConfig.rotate(angle: pi/4)
AnimatorConfig.scaleIn(scaleIn: 1)
AnimatorConfig.scaleOut(scaleOut: 1)
AnimatorConfig.flipX()
AnimatorConfig.flipY()
AnimatorConfig.fadeIn()
AnimatorConfig.fadeOut()
AnimatorConfig.translate()

该包提供了一个MultiAnimator，它接受：

child：任何将经历一系列动画的小部件
animatorConfigs：期望一个包含这些动画配置对象的列表。列表中的配置对象顺序很重要，以获得应用到child上的期望动画顺序。
rootAnimatorWidgetStateKey：类型为GlobalKey<AnimatorWidgetState<AnimatorWidget>>

final GlobalKey<AnimatorWidgetState> rootAnimatorWidgetStateKey = GlobalKey();

MultiAnimator(
  rootAnimatorWidgetStateKey: rootAnimatorStateKey,
  animatorConfigs: [
    AnimatorConfig.translate(offset: const Offset(100, 0)),
    RotationAnimatorConfig(
      curve: Curves.bounceIn,
      angle: pi / 4,
    ),
    FlipAnimatorConfig(curve: Curves.bounceIn),
    FadeOutAnimatorConfig(curve: Curves.linear),
    FadeInAnimatorConfig(curve: Curves.fastOutSlowIn),
    FlipAnimatorConfig(curve: Curves.bounceIn, flipAxis: FlipAxis.x),
    ScaleInAnimatorConfig(
      curve: Curves.bounceOut,
      scaleIn: 1,
    ),
    RotationAnimatorConfig(
      curve: Curves.bounceIn,
      angle: -pi / 4,
    ),
    ScaleOutAnimatorConfig(
      curve: Curves.bounceInOut,
      scaleOut: 1,
    ),
  ],
  child: Container(
    height: 50,
    width: 100,
    color: Colors.red,
  ),
),

触发动画

rootAnimatorWidgetStateKey 可以通过不同的方法触发动画序列，如：

animate() 方法：根据列表中的顺序按顺序启动动画
- 在调用animate()之前确保调用reset()方法，以重置并开始新的动画序列
reset() 方法：在开始新动画序列之前重置动画器
reverseAnimate() 方法：在通过animate()方法完成正向动画后，按相反顺序执行动画序列的反转
repeat() 方法：无限重复动画序列

Row(
  children: [
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FloatingActionButton.extended(
            heroTag: "Forward",
            onPressed: rootAnimatorWidgetStateKey.forward,
            label: const Text("Forward"),
            icon: const Icon(Icons.forward),
          ),
          FloatingActionButton.extended(
            heroTag: "Reverse",
            onPressed: rootAnimatorWidgetStateKey.reverse,
            label: const Text("Reverse"),
            icon: const Icon(Icons.undo),
          ),
          FloatingActionButton.extended(
            heroTag: "Repeat",
            onPressed: rootAnimatorWidgetStateKey.repeat,
            label: const Text("Repeat"),
            icon: const Icon(Icons.repeat),
          ),
        ],
      ),
    ),
  ],
)

示例代码

以下是一个完整的示例代码，展示了如何使用coditation_animator插件实现动画效果。

import 'dart:math';

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: AnimatorPlayground());
  }
}

class AnimatorPlayground extends StatelessWidget {
  AnimatorPlayground({Key? key}) : super(key: key);

  final GlobalKey<AnimatorWidgetState> rootAnimatorStateKey = GlobalKey();
  final origin = const Offset(
    50,
    25,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Animator Playground")),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MultiAnimator(
              origin: origin,
              rootAnimatorWidgetStateKey: rootAnimatorStateKey,
              animatorConfigs: [
                AnimatorConfig.translate(
                  offset: const Offset(100, 0),
                  animationDuration: const Duration(milliseconds: 50),
                ),
                AnimatorConfig.translate(
                  offset: const Offset(0, -100),
                  animationDuration: const Duration(milliseconds: 50),
                ),
                AnimatorConfig.translate(
                  offset: const Offset(-100, 0),
                  animationDuration: const Duration(milliseconds: 50),
                ),
                AnimatorConfig.translate(
                  offset: const Offset(0, 100),
                  animationDuration: const Duration(milliseconds: 50),
                ),
                AnimatorConfig.rotate(angle: 2 * pi),
                AnimatorConfig.flipY(),
                AnimatorConfig.fadeOut(
                  curve: Curves.linear,
                  animationDuration: const Duration(seconds: 2),
                ),
                AnimatorConfig.fadeIn(curve: Curves.fastOutSlowIn),
                AnimatorConfig.flipX(),
                AnimatorConfig.flipY(),
                AnimatorConfig.scaleIn(curve: Curves.bounceOut, scaleIn: 1),
                AnimatorConfig.rotate(
                  curve: Curves.bounceIn,
                  animationDuration: const Duration(seconds: 2),
                  angle: -pi / 4,
                ),
                AnimatorConfig.scaleOut(
                  curve: Curves.bounceInOut,
                  scaleOut: 1,
                ),
              ],
              child: Container(
                height: 50,
                width: 100,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: AnimatorActions(
          handleForward: rootAnimatorStateKey.forward,
          handleReverse: rootAnimatorStateKey.reverse,
          handleRepeat: rootAnimatorStateKey.repeat,
        ),
      ),
    );
  }
}

class AnimatorActions extends StatelessWidget {
  const AnimatorActions({
    Key? key,
    this.handleForward,
    this.handleReverse,
    this.handleRepeat,
  }) : super(key: key);
  final void Function()? handleForward;
  final void Function()? handleReverse;
  final void Function()? handleRepeat;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              FloatingActionButton.extended(
                heroTag: "Forward",
                onPressed: handleForward,
                tooltip: "Forward",
                label: const Text("Forward"),
                icon: const Icon(Icons.forward),
              ),
              FloatingActionButton.extended(
                heroTag: "Reverse",
                onPressed: handleReverse,
                tooltip: "Reverse",
                label: const Text("Reverse"),
                icon: const Icon(Icons.undo),
              ),
              FloatingActionButton.extended(
                heroTag: "Repeat",
                onPressed: handleRepeat,
                tooltip: "Repeat",
                label: const Text("Repeat"),
                icon: const Icon(Icons.repeat),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

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

wuwangju 1楼

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

当然，下面是一个关于如何使用coditation_animator插件来实现Flutter动画效果的代码示例。coditation_animator是一个强大的动画库，可以帮助你轻松地在Flutter应用中实现复杂的动画效果。

首先，确保你已经在pubspec.yaml文件中添加了coditation_animator依赖：

dependencies:
  flutter:
    sdk: flutter
  coditation_animator: ^latest_version  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们来看一个具体的代码示例，演示如何使用coditation_animator来创建一个简单的动画效果。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Coditation Animator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Coditation Animator Demo'),
      ),
      body: Center(
        child: CoditationAnimator(
          animation: _animation,
          builder: (context, animation, child) {
            return Transform.scale(
              scale: animation.value,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(
                  child: Text(
                    'Animate',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

引入依赖：确保在pubspec.yaml中添加了coditation_animator依赖，并在代码中导入它。
创建动画控制器：在_MyHomePageState类中，我们使用AnimationController来创建一个动画控制器，并设置动画的持续时间为2秒。我们还通过repeat(reverse: true)方法让动画反复播放。
定义动画：使用Tween<double>来定义动画的值范围，从0到1。
使用CoditationAnimator：在build方法中，我们使用CoditationAnimator来包装我们的动画效果。builder回调提供了动画的当前值animation，我们可以根据这个值来构建我们的UI组件。在这个例子中，我们使用Transform.scale来根据动画值缩放一个红色的容器。

请注意，coditation_animator插件可能有自己特定的API和用法，上述代码是一个通用的Flutter动画示例，结合了假设的CoditationAnimator的使用方式。实际使用时，请参考coditation_animator的官方文档和示例代码，以确保正确和高效地实现你的动画效果。