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 Setto create a new Animation Widget - Contribute your Flutter Animation Set Widget
- Watch All of the
Curvesof Flutter in example
dependencies:
flutter_animation_set: ^0.0.41、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
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 |
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),
],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
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
- If your application has problems, please submit your code and effect to Issue.
- Pull request are also welcome.
- Contribute your component, and we'll add it to the animation set
- Or post your animation, if interested, we will help you to achieve
- QQ：510402535
- QQ群：798874340
- e-mail：[email protected]
- g-mail：[email protected]
- Blog：http://blog.csdn.net/qq_30379689
- Github：https://github.com/AndroidHensen
Apache License 2.0