Flutter动画效果插件annimation的使用

特性

通过使用此插件，您可以轻松创建自定义动画。首先，您可以在Annimation Web App中设计您的动画，然后将其导出为JSON文件，并在Flutter项目中导入并使用该插件。

开始使用

安装插件

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

dependencies:
  annimation: ^版本号

运行以下命令以获取依赖项：

flutter pub get

使用方法

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

import 'package:annimation/annimation.dart'; // 导入插件
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnnimationExample(), // 主页面
    );
  }
}

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

  [@override](/user/override)
  State<AnnimationExample> createState() => _AnnimationExampleState();
}

class _AnnimationExampleState extends State<AnnimationExample>
    with TickerProviderStateMixin {
  AnimationController? newanimationController;
  Map<String, dynamic> proj = {};
  AnimationData? animationData;

  [@override](/user/override)
  void dispose() {
    newanimationController?.dispose(); // 释放动画控制器
    super.dispose();
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    loadData(); // 加载动画数据

    newanimationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1500)); // 创建动画控制器
    newanimationController!.addListener(() {
      setState(() {}); // 动画状态更新时刷新UI
    });
  }

  StateSetter state = (fn) {};
  [@override](/user/override)
  Widget build(BuildContext context) {
    double boxW = MediaQuery.of(context).size.width * 0.5; // 计算屏幕宽度的一半
    return SafeArea(
      child: Scaffold(
        body: StatefulBuilder( // 使用StatefulBuilder管理局部状态
            builder: (BuildContext context, StateSetter _state) {
          state = _state;
          return SingleChildScrollView(
            child: Wrap(
              children: [
                // 第一个动画组件
                InkWell(
                  onTap: () {
                    if (newanimationController!.status == AnimationStatus.completed) {
                      newanimationController!.reverse(); // 如果动画已完成，则反向播放
                    } else {
                      newanimationController!.reset(); // 否则重置动画
                      newanimationController?.forward(); // 播放动画
                    }
                  },
                  child: (animationData != null && newanimationController != null)
                      ? Container(
                          child: AnimationFromAssetAnimationDataFileWithAnimationController(
                            animationController: newanimationController!, // 使用动画控制器
                            animationData: animationData!, // 使用动画数据
                            parentSize: Size(boxW, boxW), // 设置父容器大小
                          ),
                        )
                      : FlutterLogo(), // 默认显示FlutterLogo
                ),

                // 其他动画组件
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/circlebounce3.json", // JSON文件路径
                  animationDuration: Duration(milliseconds: 2000), // 动画持续时间
                  size: Size(boxW, boxW), // 动画尺寸
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse, // 点击方向
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/anim.json",
                  repeat: true, // 循环播放
                  animationDuration: Duration(milliseconds: 2000),
                  size: Size(boxW, boxW),
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse,
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/PlayPause.json",
                  animationDuration: Duration(milliseconds: 400),
                  size: Size(boxW, boxW),
                  singleColor: Colors.green, // 单一颜色
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse,
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/MultiPolygon.json",
                  animationDuration: Duration(milliseconds: 2000),
                  size: Size(boxW, boxW),
                  repeat: true,
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse,
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/HomeMenu.json",
                  animationDuration: Duration(milliseconds: 800),
                  size: Size(boxW, boxW),
                  repeat: true,
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse,
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/PlayPause1.json",
                  animationDuration: Duration(milliseconds: 1500),
                  size: Size(boxW, boxW),
                  repeat: true,
                  clickAnimationDirection: ClickAnimationDirection.forwardReverse,
                ),
                AnimationFromAssetFileWithTimeDuration(
                  filePath: "assets/circlebounce2.json",
                  size: Size(boxW, boxW),
                  repeat: true,
                ),
              ],
            ),
          );
        }),
      ),
    );
  }

  void loadData() async {
    try {
      animationData = await AnimationData.loadAnimationDataFromAsset("assets/Segments.json");
    } catch (e) {}

    if (animationData != null) {
      if (mounted) {
        setState(() {}); // 更新UI
      }
    }
  }
}