Flutter动画封装插件easy_animation_wrapper的使用

Flutter动画封装插件easy_animation_wrapper的使用

开始使用

首先，在你的 pubspec.yaml 文件中添加 easy_animation_wrapper 插件：

dependencies:
  easy_animation_wrapper: ^版本号

然后运行以下命令来安装该插件：

flutter pub add easy_animation_wrapper

使用示例

以下是一个简单的示例，展示了如何在应用中使用 SlideVerticalAnimation 动画。

import 'package:easy_animation_wrapper/easy_animation_wrapper.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 const MaterialApp(
      home: ExampleApp(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Material(
      child: Center(
        // 使用 SlideVerticalAnimation 包装文本
        child: SlideVerticalAnimation(child: Text('Slide Vertical Animation')),
      ),
    );
  }
}

额外信息

任何人都可以为这个插件做出贡献，以使其更好。只需访问此仓库：https://github.com/rrickyzz/easy_animation_wrapper

示例代码

以下是完整的示例代码，展示了如何在应用中使用 easy_animation_wrapper 插件：

import 'package:easy_animation_wrapper/easy_animation_wrapper.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 const MaterialApp(
      home: ExampleApp(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Material(
      child: Center(
        // 使用 SlideVerticalAnimation 包装文本
        child: SlideVerticalAnimation(child: Text('Slide Vertical Animation')),
      ),
    );
  }
}

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

1 回复

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


easy_animation_wrapper 是一个用于简化 Flutter 动画开发的插件。它提供了一个简单易用的 API，帮助开发者快速实现各种动画效果，而无需编写复杂的动画控制器和状态管理代码。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 easy_animation_wrapper 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_animation_wrapper: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

easy_animation_wrapper 的核心是 EasyAnimationWrapper 组件，它允许你通过简单的配置来实现复杂的动画效果。以下是一个基本的使用示例：

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

class MyAnimatedWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyAnimationWrapper(
      duration: Duration(seconds: 2),
      curve: Curves.easeInOut,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      animationType: AnimationType.scale, // 缩放动画
      begin: 0.5, // 初始缩放比例
      end: 1.0, // 最终缩放比例
    );
  }
}

在这个示例中，EasyAnimationWrapper 包裹了一个 Container，并应用了一个缩放动画，从 0.5 倍缩放到 1 倍。

支持的动画类型

easy_animation_wrapper 支持多种动画类型，包括：

  • AnimationType.scale：缩放动画
  • AnimationType.fade：淡入淡出动画
  • AnimationType.rotate：旋转动画
  • AnimationType.translate：位移动画
  • AnimationType.slide：滑动动画

你可以通过 animationType 属性来指定所需的动画类型。

自定义动画

EasyAnimationWrapper 还允许你自定义动画的起始值和结束值。例如，你可以通过 begin 和 end 属性来指定动画的起始和结束状态：

EasyAnimationWrapper(
  duration: Duration(seconds: 2),
  curve: Curves.easeInOut,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  animationType: AnimationType.translate, // 位移动画
  begin: Offset(-100, 0), // 初始位置
  end: Offset(100, 0), // 最终位置
)

在这个示例中，Container 会从左侧平移 100 像素到右侧。

组合动画

easy_animation_wrapper 还支持组合多个动画。你可以通过 animationList 属性来指定多个动画类型：

EasyAnimationWrapper(
  duration: Duration(seconds: 2),
  curve: Curves.easeInOut,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  animationList: [
    AnimationConfig(
      type: AnimationType.scale,
      begin: 0.5,
      end: 1.0,
    ),
    AnimationConfig(
      type: AnimationType.rotate,
      begin: 0.0,
      end: 360.0,
    ),
  ],
)

在这个示例中，Container 会同时进行缩放和旋转动画。

控制动画

EasyAnimationWrapper 还提供了 controller 属性，允许你手动控制动画的播放、暂停、停止等操作：

class MyAnimatedWidget extends StatefulWidget {
  [@override](/user/override)
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  late AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        EasyAnimationWrapper(
          controller: _controller,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
          animationType: AnimationType.scale,
          begin: 0.5,
          end: 1.0,
        ),
        ElevatedButton(
          onPressed: () => _controller.forward(),
          child: Text('Start Animation'),
        ),
        ElevatedButton(
          onPressed: () => _controller.reverse(),
          child: Text('Reverse Animation'),
        ),
      ],
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
回到顶部