使您能够创建出色的 Flutter 动画

动画器

使您能够更快速、高效、更少代码地创建出色的 Flutter 动画。

部分灵感来自 Dan Eden 的出色 Animate.css 包。请注意，尽管它受到了 Animate.css 的启发，但它仍然是一个 Flutter 包，这意味着它将适用于所有支持 Flutter 的平台。

• LightspeedIn
• LightspeedOut

入门

注意：要查看所有动画小部件的实际效果，请确保在 demo_app 包中运行该应用程序，或者在 Animate.css 页面上查看它们。

将依赖项放入 pubspec.yml 文件中，然后运行 packages get。

使用 Animate.css 样式的小部件之一

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

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

使用 GlobalKey 从代码中启用播放/停止/反转动画

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

class TestAnimatedWidget extends StatefulWidget {
  @override
  _TestAnimatedWidgetState createState() => _TestAnimatedWidgetState();
}
class _TestAnimatedWidgetState extends State<TestAnimatedWidget> {
  //Register a key in your state:
  GlobalKey<AnimatorWidgetState> _key = GlobalKey<AnimatorWidgetState>();
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
            //Render the widget using the _key
            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,
              ),
              //Use _key.currentState to forward/stop/reverse
              onPressed: () => _key.currentState.forward(),
            ),
        ),
      ],
    );
  }
}

创建自己的

下面是实际 FadeInDown 动画小部件的代码（附带额外注释）。
它应该能让你清楚地了解如何使用 Animator 和 AnimatorWidget 进行动画。

import 'package:flutter/widgets.dart';

import '../../flutter_animator.dart';

///Firstly, we create an _AnimationDefinition_.
///This is the actual animation part, which gets driven by the _AnimatorWidget_.
class FadeInDownAnimation extends AnimationDefinition {
  FadeInDownAnimation({
  ///[AnimationPreferences] allows us to use the animation with different parameters for:
  ///offset, duration, autoPlay and an animationStatusListener.
    AnimationPreferences preferences = const AnimationPreferences(),
  }) : super(
          preferences: preferences,
          ///If you want to use the size of the widget, you need to define it here. (needsScreenSize is also available)
          needsWidgetSize: true,
          ///The opacity to use on the first render when using screenSize or widgetSize.
          ///In some cases 'flickering' may appear when this isn't set to 1.0 or 0.0 respectively.
          preRenderOpacity: 0.0,
        );

  ///Use the build function to actually render the animated values.
  ///Performance-wise it's better to use a FadeTransition for opacity animation.
  ///Use AnimatedBuilder to update te animation and it's values.
  @override
  Widget build(BuildContext context, Animator animator, Widget child) {
    return FadeTransition(
      ///Use animator.get([KEY]) to get to the Animation object.
      opacity: animator.get("opacity"),
      child: AnimatedBuilder(
        ///[Animator] exposes the AnimationController via animator.controller.
        animation: animator.controller,
        child: child,
        builder: (BuildContext context, Widget child) => Transform.translate(
          child: child,
          ///Use animator.get([KEY]).value to get the animated value.
          offset: Offset(0.0, animator.get("translateY").value),
        ),
      ),
    );
  }

  ///Inside the getDefinition method we return the actual animation.
  @override
  Map<String, TweenList> getDefinition({Size screenSize, Size widgetSize}) {
    return {
      ///Define a [KEY] and a list of Animated values from 0 to 100 percent.
      ///Please not that you can also define an animation curve inside the [TweenPercentage] class:
      ///TweenPercentage(percent: 0, value: 0.0, curve: Curves.ease),
      "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),
        ],
      ),
    };
  }
}

///To use the AnimationDefinition we just created we could do the following:
///For a single animation:
/// AnimatorWidget(child: [child], definition: FadeInDownAnimation());
/// 
///For In & Out Animations:
///  InOutAnimation(child: [child), inDefinition: FadeInDownAnimation(), outDefinition: ...);
/// 

可用的默认动画

吸引力聚集器

• 弹跳
• 闪光灯
• HeadShake
• HeartBeat
• Jello
• 脉冲
• 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

翻转器

• 翻转
• FlipInX
• FlipInY
• FlipOutX
• FlipOutY

Lightspeed

• LightspeedIn
• LightspeedOut

旋转进入

• RotateIn
• RotateInDownLeft
• RotateInDownRight
• RotateInUpLeft
• RotateInUpRight

旋转退出

• RotateOut
• RotateOutDownLeft
• RotateOutDownRight
• RotateOutUpLeft
• RotateOutUpRight

滑动进入

• SlideInDown
• SlideInLeft
• SlideInRight
• SlideInUp

滑动退出

• SlideOutDown
• SlideOutLeft
• SlideOutRight
• SlideOutUp

特殊

• Hinge
• JackInTheBox
• RollIn
• RollOut

缩放进入

• ZoomIn
• ZoomInDown
• ZoomInLeft
• ZoomInRight
• ZoomInUp

缩放退出

• ZoomOut
• ZoomOutDown
• ZoomOutLeft
• ZoomOutRight
• ZoomOutUp

GitHub

https://github.com/sharp3dges/animator