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
dependencies: flutter_animation_set: ^0.0.21、import
import 'package:flutter_animation_set/widget/transition_animations.dart'; import 'package:flutter_animation_set/widget/behavior_animation.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_animation
 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
Assemble the animation using an AnimatorSet Widget
- child:The component that executes the animation
- animatorSet:Collection of animation
AnimatorSet( child: widget.child animatorSet: [], )3、use 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
- 此图表明动画的组成是根据时间线(timeLine)去制作的
- 如果需要延长时间线，就用Delay组件去拖长时间线，duration属性为延长的时间
- 如果需要组合各种动画，就用Serial组件去组合动画，Serial的duration属性为组合动画时间
2、build animatorSet
通过上面的图示组装我们的动画组件，只需要控制好Delay的时间即可
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), ], ); }- from:动画初始值
- to:动画结束值
- duration:动画时间
- delay:真正执行动画的延时
- curve:动画插值器
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、组合动画
缩放效果需要同时缩放X、Y轴
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、延时动画
对真正做动画的时候处理delay属性
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、倒退动画
动画可以播放完成后，通过animationType属性设置AnimationType.reverse，让动画接着倒退播放
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：xyj510402535@qq.com
- g-mail：xyj51042535@gmail.com
- Blog：http://blog.csdn.net/qq_30379689
- Github：https://github.com/AndroidHensen
Apache License 2.0