Flutter动画效果插件mationani的使用

mationani 是一个用于简化 Flutter 动画开发的插件。通过它，我们可以避免在多个小部件中分散创建 AnimationController、Animation 和 Tween 的复杂性。Mationani 提供了一种更简单的方式来构建动画效果。

在传统方式下，创建动画通常需要一个带有 TickerMixin 的状态fulWidget，并手动管理 AnimationController 和 Tween。而使用 Mationani 后，我们可以通过简单的无状态小部件来实现相同的效果。

使用前后的对比

传统方式

class SampleSlide extends StatefulWidget {
  const SampleSlide({super.key});

  [@override](/user/override)
  State<SampleSlide> createState() => _SampleSlideState();
}

class _SampleSlideState extends State<SampleSlide> with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<Offset> animation;

  [@override](/user/override)
  void initState() {
    controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
    animation = controller.drive(Tween(begin: Offset.zero, end: Offset(1, 1)));
    controller.forward();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SlideTransition(
      position: animation,
      child: Center(
        child: SizedBox.square(
          dimension: 100,
          child: ColoredBox(color: Colors.blue),
        ),
      ),
    );
  }
}

使用 Mationani 后

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Mationani(
      mation: MationTransition.slide(Between(Offset.zero, Offset(1, 1))), // 定义滑动动画
      ani: Ani( // 定义动画控制器
        duration: DurationFR(Duration(seconds: 1), Duration.zero), // 设置动画时长
        initializer: Ani.initializeForward, // 初始化动画为向前播放
      ),
      child: Center(
        child: SizedBox.square(
          dimension: 100,
          child: ColoredBox(color: Colors.blue), // 动画目标小部件
        ),
      ),
    );
  }
}

Mationani 的优势

• 简化代码：不再需要手动创建 AnimationController 和 Tween。
• 易于维护：所有动画相关的逻辑都集中在 Mationani 小部件中。
• 灵活性高：可以轻松组合不同的动画效果。

关键概念

1. MationTransition：定义动画类型，例如滑动（slide）、缩放（scale）等。

   MationTransition.slide(Between(Offset.zero, Offset(1, 1)))
   

   上述代码表示从 (0,0) 滑动到 (1,1)。

2. Ani：定义动画控制器的行为，包括时长和初始状态。

   Ani(
     duration: DurationFR(Duration(seconds: 1), Duration.zero), // 动画时长
     initializer: Ani.initializeForward, // 初始状态为向前播放
   )
   

3. DurationFR：用于指定动画的起始时间和结束时间。

   DurationFR(Duration(seconds: 1), Duration.zero)
   

完整示例代码

以下是一个完整的示例代码，展示如何使用 Mationani 创建一个简单的滑动动画：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Mationani 示例')),
        body: Center(
          child: SampleSlide(),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Mationani(
      mation: MationTransition.slide(Between(Offset.zero, Offset(1, 1))), // 滑动动画
      ani: Ani(
        duration: DurationFR(Duration(seconds: 1), Duration.zero), // 动画时长
        initializer: Ani.initializeForward, // 初始状态为向前播放
      ),
      child: Center(
        child: SizedBox.square(
          dimension: 100,
          child: ColoredBox(color: Colors.blue), // 动画目标小部件
        ),
      ),
    );
  }
}