Simplified Flutter interleaved animation. A staggered animation of Flutter is used to drive the Flutter through the timeline in the form of an animation configuration. You can

1. useFlutter Animation SetExisting animation components
2. useFlutter Animation SetTo create a new animation component
3. Contribution to yourFlutter Animation SetThe animation component
4. See all of them in the example of the projectCurvesAnimation effects

🎖 Installing

dependencies:
  flutter_animation_set: ^ 0.0.3
Copy the code

⚡ Use Animation Set Widget

1, the import

import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
Copy the code

2, the use

child: YYRotatingPlane(),
Copy the code

3, the road map

Transition_animations Transition animations

YYRotatingPlane ✅	YYDoubleBounce ✅	YYWave ✅	YYWanderingCubes ✅	YYFadingFour ✅	YYFadingCube ✅
YYPulse ✅	YYThreeBounce ✅	YYThreeLine ✅	YYCubeGrid ✅	YYRotatingCircle ✅	YYPumpingHeart ✅
YYRipple ✅	YYRotateLine ✅	YYCubeFadeIn ✅	YYBlinkGrid ✅

Behavior_animations indicates the behavior

YYFadeButton ✅

YYSingleLike ✅

YYLove ✅

YYSpringMenu ✅

YYFoldMenu ✅

4, thanks

• flutter_spinkit

⚡ Create Animation Set Widget By YourSelf

1, the import

import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
Copy the code

2, use the widget

Assemble animations by using AnimatorSet

• Child: Component that performs the animation
• AnimatorSet: a collection of animations

AnimatorSet(
    child: widget.child,
    animatorSet: [],
)
Copy the code

3, use the API

about animation widget

about support widget

⚡ For Example

1. Create a timeLine

1. This figure shows that the core composition of the animation is based on the timeLine
2. There are 6 simultaneous animations in the execution process, and the total animation duration is 900ms
3. The ScaleY components zoom in and out in order to give each rectangle a wavy effect
4. The Delay component was used to drag the long time line, and the unified animation time was 900ms

2, build animatorSet

Assemble our animation component using the above illustration with the following properties

• From: initial value of animation
• To: end value of animation
• Duration: animation time
• Delay: The delay for actually executing the animation
• Curve: Animation interpolator

animatorSet: [
  Delay(duration: before),
  SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),
  SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),
  Delay(duration: after),
],
Copy the code

The object that the animation executes is the Container rectangle

Widget makeWave(int before, int after) {
  return AnimatorSet(
    child: Container(
      color: Colors.white,
      width: 5,
      height: 15,
    ),
    animatorSet: [
      Delay(duration: before),
      SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),
      SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),
      Delay(duration: after),
    ],
  );
}
Copy the code

3, convert to code

class YYWave extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeWave(0.500),
          makeWave(100.400),
          makeWave(200.300),
          makeWave(300.200),
          makeWave(400.100),
          makeWave(500.0),,),); }}Copy the code

4, the done

More

1. Combination animation

The scaling effect requires scaling both the X and Y axes, using the Serial component

animatorSet: [
  Serial(
    duration: 2000,
    serialList: [
      SX(from: 0.0, to: 1.0, curve: Curves.easeInOut),
      SY(from: 0.0, to: 1.0, curve: Curves.easeInOut),
      O(from: 0.5, to: 0.0, delay: 1000, curve: Curves.easeInOut),
    ],
  ),
],
Copy the code

done

2. Time-lapse animation

Handle the delay property for actual animation

class YYThreeLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeLine(0),
          makeLine(50),
          makeLine(100),,),); } } Widget makeLine(int delay) {
  return AnimatorSet(
    child: Container(
      color: Colors.white,
      width: 10,
      height: 5,
    ),
    animatorSet: [
      TY(from: 0.0, to: 5.0, duration: 400, delay: delay, curve: Curves.fastOutSlowIn,),
      TY(from: 5.0, to: 0.0, duration: 400, curve: Curves.fastOutSlowIn,),
    ],
  );
}
Copy the code

done

3. Backward animation

Animationtype. reverse can then be set to animationType. reverse after the animation has finished playing

class YYFoldMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeFoldMenu(0.40),
          makeFoldMenu(100.26.0),
          makeFoldMenu(200.12.0),,),); } } Widget makeFoldMenu(int delay, double toY) {
  return AnimatorSet(
    animationType: AnimationType.reverse,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      width: 30,
      height: 10,
    ),
    animatorSet: [
      Serial(
        duration: 2000,
        delay: delay,
        serialList: [
          TY(from: 0.0, to: toY, curve: Curves.elasticInOut),
          SX(from: 1.0, to: 0.1, curve: Curves.elasticInOut),
          SY(from: 1.0, to: 0.1, curve: Curves.elasticInOut),
        ],
      ),
    ],
  );
}
Copy the code

done

Bugs/Requests

• If your application has problems, please submit your code and effect to Issue.
• Pull request are also welcome.

Contribution

• Contribute your component, and we’ll add it to the animation set
• Or post your animation, if interested, we will help you to achieve

About