Flutter动画效果插件flutter_animator的使用

概述

flutter_animator 插件使您能够快速、高效且以较少代码创建令人惊叹的Flutter动画。它部分受到 Dan Eden 的 Animate.css 的启发，这意味着虽然它受到了 Animate.css 的影响，但它仍然是一个适用于所有Flutter支持平台的Flutter包。

特性

组合和链接带有多种缓动曲线的Tween。
通过直接处理控制器、动画等的组件减少样板代码。
在热重载后自动（重新）启动动画。
使用基于 Animate.css 的小部件轻松为项目添加动画效果。

开始使用

添加依赖项

在 pubspec.yaml 文件中添加依赖项，并运行 flutter pub get：

dependencies:
  flutter_animator: ^3.2.2 # 确保版本与您的Flutter版本兼容

使用 Animate.css 风格的小部件

示例：简单的 RubberBand 动画

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

class TestAnimatedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RubberBand(
      child: Text(
        'Rubber',
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

使用 GlobalKey 控制动画播放/停止/反转

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

class TestAnimatedWidget extends StatefulWidget {
  @override
  _TestAnimatedWidgetState createState() => _TestAnimatedWidgetState();
}

class _TestAnimatedWidgetState extends State<TestAnimatedWidget> {
  // 注册一个 GlobalKey
  GlobalKey<AnimatorWidgetState> _key = GlobalKey<AnimatorWidgetState>();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: RubberBand(
            key: _key,
            child: Text(
              'Rubber',
              style: TextStyle(fontSize: 60),
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 10, 30),
          child: IconButton(
            icon: Icon(Icons.play_arrow, color: Colors.green),
            onPressed: () => _key.currentState?.forward(),
          ),
        ),
      ],
    );
  }
}

创建自定义动画

以下是 FadeInDown 动画的实现示例：

import 'package:flutter/widgets.dart';
import 'package:flutter_animator/flutter_animator.dart';

class FadeInDownAnimation extends AnimationDefinition {
  FadeInDownAnimation({
    AnimationPreferences preferences = const AnimationPreferences(),
  }) : super(
          preferences: preferences,
          needsWidgetSize: true,
          preRenderOpacity: 0.0,
        );

  @override
  Widget build(BuildContext context, Animator animator, Widget child) {
    return FadeTransition(
      opacity: animator.get("opacity"),
      child: AnimatedBuilder(
        animation: animator.controller,
        child: child,
        builder: (BuildContext context, Widget child) =>
            Transform.translate(
          child: child,
          offset: Offset(0.0, animator.get("translateY").value),
        ),
      ),
    );
  }

  @override
  Map<String, TweenList> getDefinition({Size screenSize, Size widgetSize}) {
    return {
      "opacity": TweenList<double>(
        [
          TweenPercentage(percent: 0, value: 0.0),
          TweenPercentage(percent: 100, value: 1.0),
        ],
      ),
      "translateY": TweenList<double>(
        [
          TweenPercentage(percent: 0, value: -widgetSize.height),
          TweenPercentage(percent: 100, value: 0.0),
        ],
      ),
    };
  }
}

// 使用自定义动画
AnimatorWidget(
  child: Text('Fade In Down'),
  definition: FadeInDownAnimation(),
);

默认可用动画

flutter_animator 提供了大量预定义的动画效果，分为以下几类：

注意力吸引者

Bounce
Flash
HeadShake
HeartBeat
Jello
Pulse
RubberBand
Shake
Swing
Tada
Wobble

弹跳进入

BounceIn
BounceInDown
BounceInLeft
BounceInRight
BounceInUp

弹跳退出

BounceOut
BounceOutDown
BounceOutLeft
BounceOutRight
BounceOutUp

淡入

FadeIn
FadeInDown
FadeInDownBig
FadeInLeft
FadeInLeftBig
FadeInRight
FadeInRightBig
FadeInUp
FadeInUpBig

淡出

FadeOut
FadeOutDown
FadeOutDownBig
FadeOutLeft
FadeOutLeftBig
FadeOutRight
FadeOutRightBig
FadeOutUp
FadeOutUpBig

翻转

Flip
FlipInX
FlipInY
FlipOutX
FlipOutY

光速

LightSpeedIn
LightSpeedOut

旋转进入

RotateIn
RotateInDownLeft
RotateInDownRight
RotateInUpLeft
RotateInUpRight

旋转退出

RotateOut
RotateOutDownLeft
RotateOutDownRight
RotateOutUpLeft
RotateOutUpRight

滑动进入

SlideInDown
SlideInLeft
SlideInRight
SlideInUp

滑动退出

SlideOutDown
SlideOutLeft
SlideOutRight
SlideOutUp

裂开进入

SlitInDiagonal
SlitInHorizontal
SlitInVertical

裂开退出

SlitOutDiagonal
SlitOutHorizontal
SlitOutVertical

特殊效果

CrossFadeAB
Hinge
JackInTheBox
RollIn
RollOut

缩放进入

ZoomIn
ZoomInDown
ZoomInLeft
ZoomInRight
ZoomInUp

缩放退出

ZoomOut
ZoomOutDown
ZoomOutLeft
ZoomOutRight
ZoomOutUp

完整示例

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

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

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<CrossFadeABState> crossFadeAnimation =
      GlobalKey<CrossFadeABState>();

  final GlobalKey<AnimatorWidgetState> basicAnimation =
      GlobalKey<AnimatorWidgetState>();

  final GlobalKey<InOutAnimationState> inOutAnimation =
      GlobalKey<InOutAnimationState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Animator'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 20)),
            CrossFadeAB(
              key: crossFadeAnimation,
              childA: Text('A', style: TextStyle(fontSize: 20)),
              childB: Text('B', style: TextStyle(fontSize: 20)),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            TextButton(
              onPressed: () {
                crossFadeAnimation.currentState!.cross();
              },
              child: Text(
                'Cross Animate',
                style: TextStyle(fontSize: 20),
              ),
            ),
            BounceIn(
              key: basicAnimation,
              child: Text(
                'BounceIn',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            TextButton(
              onPressed: () {
                basicAnimation.currentState!.forward();
              },
              child: Text(
                'Animate Bounce',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 40)),
            InOutAnimation(
              key: inOutAnimation,
              child: Text(
                'In & Out',
                style: TextStyle(fontSize: 20),
              ),
              inDefinition: FadeInAnimation(),
              outDefinition: BounceOutDownAnimation(),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            TextButton(
              onPressed: () {
                if (inOutAnimation.currentState!.status !=
                    InOutAnimationStatus.Out) {
                  inOutAnimation.currentState!.animateOut();
                } else {
                  inOutAnimation.currentState!.animateIn();
                }
              },
              child: Text(
                'Animate In & Out',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个完整的示例展示了如何使用 flutter_animator 包中的不同动画效果，包括交叉淡入淡出、基本动画和进出动画。希望这能帮助你更好地理解和使用 flutter_animator 插件。

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

sinazl 1楼•2 天前

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

当然，下面是一个关于如何使用Flutter动画效果插件flutter_animator的示例代码。这个插件可以帮助你轻松地在Flutter应用中实现各种动画效果。

首先，确保你已经在pubspec.yaml文件中添加了flutter_animator的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_animator: ^3.1.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

以下是一个简单的示例，展示如何使用flutter_animator来实现一个基本的动画效果，比如淡入淡出动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatorScreen(),
    );
  }
}

class AnimatorScreen extends StatefulWidget {
  @override
  _AnimatorScreenState createState() => _AnimatorScreenState();
}

class _AnimatorScreenState extends State<AnimatorScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Animator Demo'),
      ),
      body: Center(
        child: Animator(
          duration: 2000, // 动画时长（毫秒）
          curve: Curves.easeInOutQuad, // 动画曲线
          tween: Tween(begin: 0.0, end: 1.0),
          builder: (anim) => Opacity(
            opacity: anim.value,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, Flutter Animator!',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
          onEnd: () {
            print('Animation Ended');
          },
        ).play(), // 调用play()方法启动动画
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个中心位置的蓝色方块，该方块使用flutter_animator的Animator组件来实现淡入淡出的动画效果。

注意事项：

Animator组件：这是flutter_animator插件的核心组件，用于封装动画逻辑。
duration：动画的持续时间（以毫秒为单位）。
curve：动画的插值曲线，决定动画的加速和减速效果。
tween：定义动画的起始和结束值。
builder：一个函数，接收当前动画值并返回需要动画的Widget。
onEnd：动画结束时调用的回调函数。

由于flutter_animator的API可能会随着版本更新而变化，请确保查阅最新的官方文档以获取最新的使用方法和最佳实践。