Description:

flutter animation set

✨ Flutter Animation Set #

[Lanuage ~~] English | 中文文档
Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in the form of an animation configuration.You can

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

🎖 Installing #
dependencies:
flutter_animation_set: ^0.0.3
copied to clipboard
⚡ Use Animation Set Widget #
1、import
import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
copied to clipboard
2、use
child: YYRotatingPlane(),
copied to clipboard
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

flutter_spinkit

⚡ Create Animation Set Widget By YourSelf #
1、import
import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
copied to clipboard
2、use widget
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



AnimatorSet(
child: widget.child,
animatorSet: [],
animationType: AnimationType.reverse,
debug: false,
)
copied to clipboard
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



This figure shows that the core components of the animation are made according to the timeLine
In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms
ScaleY components are used to scale up and down in order to make each rectangle have a wave effect
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),
],
copied to clipboard
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),
],
);
}
copied to clipboard
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),
],
),
);
}
}
copied to clipboard
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),
],
),
],
copied to clipboard
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,),
],
);
}
copied to clipboard
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),
],
),
],
);
}
copied to clipboard
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 #

QQ：510402535
QQ群：798874340
e-mail：xyj510402535@qq.com
g-mail：xyj51042535@gmail.com
Blog：http://blog.csdn.net/qq_30379689
Github：https://github.com/AndroidHensen

License #
Apache License 2.0

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter