Flutter动画效果插件easy

Flutter动画效果插件easy_animation的使用

特性

Flutter 动画简化。

入门指南

展示透明度/缩放/平移/旋转动画的简单方法。

使用方式

EasyAnimationBuilder 是一个用于创建复杂动画的便捷工具。下面是一个示例代码，展示了如何使用 EasyAnimationBuilder 来实现一个包含透明度、缩放、平移和旋转动画的 Container。

import 'package:flutter/material.dart';
import 'package:easy_animation/easy_animation_builder.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy Animation Example'),
        ),
        body: Center(
          child: EasyAnimationBuilder.animate(
            Container(
              width: 100,
              height: 100,
              color: Color(0xFFD042FF),
            )
            .alpha([0, 1, 0.5, 1], duration: const Duration(seconds: 3)) // 透明度动画
            .scale([1, 3, 2, 1], duration: const Duration(seconds: 3)) // 缩放动画
            .translate(const [
              Offset(0, 0),
              Offset(1, 0),
              Offset(1, 1),
              Offset(0, 0),
            ], duration: const Duration(seconds: 3)) // 平移动画
            .rotation([0.0, 1.0], duration: const Duration(seconds: 3)), // 旋转动画
            repeatTime: 1,
          ),
        ),
      ),
    );
  }
}

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

caililin 1楼

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

easy_animation 是一个用于简化 Flutter 动画开发的插件。它提供了更简洁的 API，使得开发者能够更容易地创建和管理动画效果。以下是如何使用 easy_animation 的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 easy_animation 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_animation: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 easy_animation：

import 'package:easy_animation/easy_animation.dart';

3. 使用 `EasyAnimation` 组件

EasyAnimation 组件是 easy_animation 的核心，它允许你轻松地创建各种动画效果。

基本用法

class MyAnimatedWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyAnimation(
      duration: Duration(seconds: 2),
      curve: Curves.easeInOut,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      animation: EasyAnimationType.fadeIn, // 淡入动画
    );
  }
}

支持多种动画类型

EasyAnimation 支持多种动画类型，例如：

EasyAnimationType.fadeIn：淡入
EasyAnimationType.fadeOut：淡出
EasyAnimationType.scaleIn：缩放进入
EasyAnimationType.scaleOut：缩放退出
EasyAnimationType.slideIn：滑动进入
EasyAnimationType.slideOut：滑动退出

你可以通过 animation 参数指定动画类型。

自定义动画

你还可以通过 builder 参数自定义动画效果：

class MyCustomAnimatedWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyAnimation(
      duration: Duration(seconds: 2),
      curve: Curves.easeInOut,
      builder: (context, animation) {
        return Transform.scale(
          scale: animation.value,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

在这个例子中，builder 函数接收一个 animation 对象，你可以使用 animation.value 来获取动画的当前值，并应用于你的 UI。

4. 控制动画

EasyAnimation 还提供了一些方法来控制动画的播放，例如：

play()：开始播放动画
stop()：停止动画
reset()：重置动画

你可以在 EasyAnimationController 中使用这些方法。

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

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  EasyAnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = EasyAnimationController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        EasyAnimation(
          controller: _controller,
          duration: Duration(seconds: 2),
          curve: Curves.easeInOut,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
          animation: EasyAnimationType.fadeIn,
        ),
        ElevatedButton(
          onPressed: () {
            _controller.play(); // 开始播放动画
          },
          child: Text('Play Animation'),
        ),
      ],
    );
  }
}

Flutter动画效果插件easy_animation的使用