Flutter迁移工具插件 sa4_migration_kit 的使用

simple_animation v4 migration kit 是一个帮助开发者从 simple_animations v4 版本迁移到 v5 版本的插件。通过这个插件，你可以更方便地进行代码迁移，并在完成后将其从项目中移除。

目录

• Flutter 类
• 迁移指南
  • PlayAnimation, CustomAnimation, LoopAnimation, MirrorAnimation
  • MultiTween
  • TimelineTween

Flutter 类

该插件包含了以下类：

• PlayAnimation
• CustomAnimation
• LoopAnimation
• MirrorAnimation
• MultiTween
• TimelineTween

迁移指南

PlayAnimation, CustomAnimation, LoopAnimation, MirrorAnimation

这些类被重命名以更好地符合 Flutter 命名约定：

• PlayAnimation -> PlayAnimationBuilder
• CustomAnimation -> CustomAnimationBuilder
• LoopAnimation -> LoopAnimationBuilder
• MirrorAnimation -> MirrorAnimationBuilder

此外，builder() 方法的参数顺序也进行了调整：

• build(context, child, animatedValue) -> build(context, animation, child)

duration 属性以前是可选的（默认为1秒），现在变为必填项。生命周期监听器也被重命名：

• onStart -> onStarted
• onComplete -> onCompleted

示例代码

// 旧版本代码
final from = PlayAnimation<double>(
  tween: Tween(begin: 0.0, end: 100.0),
  // duration is optional
  onStart: () => debugPrint('onStart'),
  onComplete: () => debugPrint('onComplete'),
  builder: (context, child, value) {
    return Container(width: value, height: value, color: Colors.red);
  },
);

// 新版本代码
final to = PlayAnimationBuilder<double>(
  tween: Tween(begin: 0.0, end: 100.0),
  duration: const Duration(seconds: 1), // duration is mandatory
  onStarted: () => debugPrint('onStart'), // got renamed
  onCompleted: () => debugPrint('onComplete'), // got renamed
  // order changed -> child is last argument
  builder: (context, value, child) {
    return Container(width: value, height: value, color: Colors.red);
  },
);

MultiTween

将你的 MultiTween 迁移到 MovieTween，因为它们提供了相似的 API。

示例代码

// 旧版本代码
final multiTween = MultiTween<String>()
  ..add('width', Tween(begin: 0.0, end: 100.0), const Duration(seconds: 1), Curves.easeIn)
  ..add('width', Tween(begin: 100.0, end: 200.0), const Duration(seconds: 2), Curves.easeOut)
  ..add('color', ColorTween(begin: Colors.red, end: Colors.blue), const Duration(seconds: 3));

// 新版本代码
final movieTween = MovieTween()
  ..tween('width', Tween(begin: 0.0, end: 100.0), duration: const Duration(seconds: 1), curve: Curves.easeIn)
      .thenTween('width', Tween(begin: 100.0, end: 200.0), duration: const Duration(seconds: 2), curve: Curves.easeOut)
  ..tween('color', ColorTween(begin: Colors.red, end: Colors.blue), duration: const Duration(seconds: 3));

// 获取动画值
MultiTweenValues<String> multiTweenValue = multiTween.transform(0.5);
Movie movieTweenValue = movieTween.transform(0.5);

// 访问值的方式保持不变
final value1 = multiTweenValue.get<double>('width');
final value2 = movieTweenValue.get<double>('width');

TimelineTween

将你的 TimelineTween 迁移到 MovieTween，因为它们提供了相似的 API。

示例代码

// 使用枚举定义属性名称
enum Props { width, color }

// 或者可以使用字符串或 `MultiTweenProperty`
const width = 'width';
final color = MovieTweenProperty<Color?>();

void main() {
  final timelineTween = TimelineTween<Props>()
    ..addScene(begin: const Duration(seconds: 0), end: const Duration(seconds: 1))
        .animate(Props.width, tween: Tween(begin: 0.0, end: 100.0), curve: Curves.easeIn)
    ..addScene(begin: const Duration(seconds: 1), end: const Duration(seconds: 3))
        .animate(Props.width, tween: Tween(begin: 100.0, end: 200.0), curve: Curves.easeOut)
    ..addScene(begin: const Duration(seconds: 0), end: const Duration(seconds: 3))
        .animate(Props.color, tween: ColorTween(begin: Colors.red, end: Colors.blue));

  final movieTween = MovieTween()
    ..scene(begin: const Duration(seconds: 0), end: const Duration(seconds: 1))
        .tween(Props.width, Tween(begin: 0.0, end: 100.0), curve: Curves.easeIn)
    ..scene(begin: const Duration(seconds: 1), end: const Duration(seconds: 3))
        .tween(Props.width, Tween(begin: 100.0, end: 200.0), curve: Curves.easeOut)
    ..scene(begin: const Duration(seconds: 0), end: const Duration(seconds: 3))
        .tween(Props.color, ColorTween(begin: Colors.red, end: Colors.blue));

  // 获取动画值
  TimelineValue<Props> timelineTweenValue = timelineTween.transform(0.5);
  Movie movieTweenValue = movieTween.transform(0.5);

  // 访问值的方式保持不变
  final value1 = timelineTweenValue.get<double>(Props.width);
  final value2 = movieTweenValue.get<double>(Props.width);

  // 如果使用 `MovieTweenProperty`，可以通过其 API 安全访问类型，例如：
  final value3 = color.from(movieTweenValue);
}

通过以上示例，您可以轻松地将您的 simple_animations v4 代码迁移到 v5 版本。完成迁移后，记得从项目中移除 sa4_migration_kit 插件。