/flutter-animation-set

🔥🔥🔥 Easy to build an animation set

Primary LanguageDartApache License 2.0Apache-2.0

✨ Flutter Animation Set

pub package

[Lanuage ~~] English | 中文文档

Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in the form of an animation configuration.You can

  1. Uses the existing Animation Widget of Flutter Animation Set
  2. Use Flutter Animation Set to create a new Animation Widget
  3. Contribute your Flutter Animation Set Widget
  4. Watch All of the Curves of Flutter in example

🎖 Installing

dependencies:
  flutter_animation_set: ^0.0.4

⚡ Use Animation Set Widget

1、import

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

2、use

child: YYRotatingPlane(),

3、road map

transition_animations


YYRotatingPlane

YYDoubleBounce

YYWave

YYWanderingCubes

YYFadingFour

YYFadingCube

YYPulse

YYThreeBounce

YYThreeLine

YYCubeGrid

YYRotatingCircle

YYPumpingHeart

YYRipple

YYRotateLine

YYCubeFadeIn

YYBlinkGrid

behavior_animations


YYFadeButton

YYSingleLike

YYLove

YYSpringMenu

YYFoldMenu

4、thanks

⚡ Create Animation Set Widget By YourSelf

1、import

import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';

2、use widget

AnimatorSet(
    child: widget.child,
    animatorSet: [],
    animationType: AnimationType.reverse,
    debug: false,
)

AnimatorSet Supported properties

Property Mean Default
child The component that performs the animation not have
animatorSet Collection of animation not have
animationType Controls the type of animation execution AnimationType.repeat
debug The output log false

The properties of the animationType

Property Mean
repeat Repeat animation
reverse Rewind animation
once One play animation

3、use AnimatorSet api

about animation widget

Widget Mean Description
W width Control the change of width. If it is scaled up, SX is recommended instead
H height Control the change of height. If it is scaled up, SY is recommended instead
P padding Control padding changes
O opacity Control opacity changes
SX scaleX Scale the X-axis with the midpoint
SY scaleY Scale the Y-axis with the midpoint
RX rotateX Rotate the X-axis with the midpoint
RY rotateY Rotate the Y-axis with the midpoint
RZ rotateZ Rotate the Z-axis with the midpoint
TX transitionX Translate the Z-axis with the midpoint
TY transitionY Translate the Y-axis with the midpoint
C color Control background color changes
B border Control background border changes

about support widget

Widget Mean Description
Delay delay timeLine Extend the timeline to wait
Serial combine animation Through the combination of animation, to achieve the effect of playing together

⚡ For Example

1、create timeLine


  1. This figure shows that the core components of the animation are made according to the timeLine
  2. In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms
  3. ScaleY components are used to scale up and down in order to make each rectangle have a wave effect
  4. Drag the timeline with the Delay component to reach the animation duration of 900ms

2、build animatorSet

Assemble our animation component using the diagram above, which has the following properties

  • from:Animation initial value
  • to:End of animation value
  • duration:Animation time
  • delay:The delay in 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),
],

The object that the animation executes is 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),
    ],
  );
}

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),
        ],
      ),
    );
  }
}

4、done

More

1、Combination of animation

The scaling effect requires scaling both the X and Y axes, uses the Serial Widget

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),
    ],
  ),
],

done

2、Time-lapse animations

Deal with the delay attribute when you actually do the 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,),
    ],
  );
}

done

3、Reverse animation

After the animation can be played, set animationtype.reverse through the animationType property, making the animation play back

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),
        ],
      ),
    ],
  );
}

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

License

Apache License 2.0