flutter_easy_animations #

中文文档

Animate.css for Flutter. 97 effects, same names, same keyframes.

Install #

dependencies:
  flutter_easy_animations: ^1.0.0

Requires Flutter 3.47 / Dart 3.13.

Usage #

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

class Greeting extends StatefulWidget {
  const Greeting({super.key});

  @override
  State<Greeting> createState() => _GreetingState();
}

class _GreetingState extends State<Greeting>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 1),
    vsync: this,
  )..forward();

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

  @override
  Widget build(BuildContext context) {
    return AnimateStyled(
      style: AnimateStyle.fadeInUp,
      animation: _controller,
      child: const Text('Hello'),
    );
  }
}

animation is any Animation<double> from 0 to 1.

Animate.css defaults to 1s, and a few effects multiply that (hinge 2×, heartBeat 1.3×, bounceIn/bounceOut 0.75×). The multiplier is style.track.durationScale:

AnimationController(
  duration: const Duration(seconds: 1) * style.track.durationScale,
  vsync: this,
);

AnimateStyle is an enum, so AnimateStyle.values gives you all of them. style.isExit is true for the *Out* effects.

When MediaQuery.disableAnimations is set, AnimateStyled renders the final frame instead of animating and hides exits. Pass respectReducedMotion: false to always animate.

Effects #

Run example/ for a gallery.

Custom effects #

const wiggle = AnimateKeyframeTrack([
  AnimateKeyframeStop(0.00, AnimateKeyframe.none),
  AnimateKeyframeStop(0.25, AnimateKeyframe(rotateZ: 5 * degrees)),
  AnimateKeyframeStop(0.75, AnimateKeyframe(rotateZ: -5 * degrees)),
  AnimateKeyframeStop(1.00, AnimateKeyframe.none),
], origin: Alignment.topCenter);

KeyframeTransition(track: wiggle, animation: controller, child: child);

transform and opacity interpolate independently, like CSS. Use fractionX/fractionY for percentages, pixelX/pixelY for px, and degrees for angles. CssCurves has the cubic-bezier curves from Animate.css.

Not implemented: visibility (slide*) and backface-visibility (flippers).

Migrating from 0.x #

// 0.x
AnimateStyles.bounce(controller, child)

// 1.x
AnimateStyled(style: AnimateStyle.bounce, animation: controller, child: child)

The old methods still work but are deprecated and go away in 2.0.0.

Several 0.x effects were wrong and now look different: rotateOut and the zoomOut* family faded in instead of out, the directional zoomOut* effects moved the wrong way, rollIn/rollOut moved by 1px, flash never went above 50% opacity. See CHANGELOG.

License #

MIT