Flutter动画效果插件anim_dev的使用

在Flutter开发中，动画效果的实现是一个重要且复杂的过程。为了简化这一过程，我们可以借助插件如anim_dev来轻松创建自定义动画。本文将详细介绍如何使用anim_dev插件来创建各种类型的动画。

快速开始

直接跳入代码，让代码本身说话。

Animation Builder - 快速入门

Animation Builder 是一个强大的小部件，可以轻松创建自定义动画。

示例代码

import 'dart:math';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // PlayAnimationBuilder 播放一次动画
    return PlayAnimationBuilder<double>(
      tween: Tween(begin: 100.0, end: 200.0), // 从100到200
      duration: const Duration(seconds: 1), // 持续1秒
      builder: (context, value, _) {
        return Container(
          width: value, // 使用动画值
          height: value,
          color: Colors.blue,
        );
      },
      onCompleted: () {
        // 动画完成后执行的操作
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // LoopAnimationBuilder 永久循环播放动画
    return LoopAnimationBuilder<double>(
      tween: Tween(begin: 0.0, end: 2 * pi), // 从0°到360°
      duration: const Duration(seconds: 2), // 每次迭代持续2秒
      builder: (context, value, _) {
        return Transform.rotate(
          angle: value, // 使用角度值
          child: Container(color: Colors.blue, width: 100, height: 100),
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // MirrorAnimationBuilder 永久循环播放动画，正向和反向交替
    return MirrorAnimationBuilder<Color?>(
      tween: ColorTween(begin: Colors.red, end: Colors.blue), // 红色到蓝色
      duration: const Duration(seconds: 5), // 每次迭代持续5秒
      builder: (context, value, _) {
        return Container(
          color: value, // 使用动画颜色值
          width: 100,
          height: 100,
        );
      },
    );
  }
}

解释

1. PlayAnimationBuilder：用于播放一次动画。
2. LoopAnimationBuilder：用于永久循环播放动画。
3. MirrorAnimationBuilder：用于正向和反向交替播放动画。

Movie Tween - 快速入门

Movie Tween 可以将多个 Tween 组合在一起，并支持时间轴控制和值外推。

示例代码

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

// 简单的交错动画
final tween1 = MovieTween()
  ..tween('width', Tween(begin: 0.0, end: 100),
          duration: const Duration(milliseconds: 1500), curve: Curves.easeIn)
      .thenTween('width', Tween(begin: 100, end: 200),
          duration: const Duration(milliseconds: 750), curve: Curves.easeOut);

// 使用场景设计动画
final tween2 = MovieTween()
  ..scene(
          begin: const Duration(milliseconds: 0),
          duration: const Duration(milliseconds: 500))
      .tween('width', Tween<double>(begin: 0.0, end: 400.0))
      .tween('height', Tween<double>(begin: 500.0, end: 200.0))
      .tween('color', ColorTween(begin: Colors.red, end: Colors.blue))
  ..scene(
          begin: const Duration(milliseconds: 700),
          end: const Duration(milliseconds: 1200))
      .tween('width', Tween<double>(begin: 400.0, end: 500.0));

// 类型安全的替代方法
final width = MovieTweenProperty<double>();
final color = MovieTweenProperty<Color?>();

final tween3 = MovieTween()
  ..tween<double>(width, Tween(begin: 0.0, end: 100))
  ..tween<Color?>(color, ColorTween(begin: Colors.red, end: Colors.blue));

解释

1. MovieTween：组合多个 Tween。
2. 场景（Scene）：通过显式或隐式的方式定义场景。
3. 交错动画（Staggered Animation）：通过 .thenTween() 实现。

Animation Mixin - 快速入门

Animation Mixin 可以帮助你管理 AnimationController 实例，减少样板代码。

示例代码

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

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with AnimationMixin {
  late Animation<double> size;

  [@override](/user/override)
  void initState() {
    // 自动生成的 AnimationController 已经配置好
    size = Tween<double>(begin: 0.0, end: 200.0).animate(controller);
    controller.play(); // 开始动画播放
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // 使用动画值
      height: size.value,
      color: Colors.red,
    );
  }
}

解释

1. AnimationMixin：自动生成并管理 AnimationController。
2. 状态管理：通过 controller 轻松控制动画。

Animation Developer Tools

Animation Developer Tools 提供了强大的调试工具，帮助开发者逐步创建或审查动画。

示例代码

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

void main() => runApp(const MaterialApp(home: Scaffold(body: MyPage())));

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: AnimationDeveloperTools(
        child: Center(
          child: PlayAnimationBuilder<double>(
            tween: Tween<double>(begin: 0.0, end: 100.0),
            duration: const Duration(seconds: 1),
            developerMode: true, // 启用开发者模式
            builder: (context, value, child) {
              return Container(
                width: value,
                height: value,
                color: Colors.blue,
              );
            },
          ),
        ),
      ),
    );
  }
}