简化Flutter交错动画。用动画配置的形式，通过时间线去驱动Flutter的交错动画。你可以
- 使用
Flutter Animation Set现有的动画组件 - 使用
Flutter Animation Set去创建新的动画组件 - 贡献你的
Flutter Animation Set动画组件
coming soon1、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
通过使用AnimatorSet组装动画
- child:执行动画的组件
- animatorSet：动画集合
AnimatorSet( child: widget.child animatorSet: [], )3、use api
about animation widget
| Widget | Description |
|---|---|
| W(width) | 控制宽度的变化，如果是按比例拉升，建议用SX替代 |
| H(height) | 控制高度的变化，如果是按比例拉升，建议用SY替代 |
| P(padding) | 控制边距的变化 |
| O(opacity) | 控制透明度的变化 |
| SX(scaleX) | 以中点进行X轴的缩放 |
| SY(scaleY) | 以中点进行Y轴的缩放 |
| RX(rotateX) | 以中点进行X轴的旋转 |
| RY(rotateY) | 以中点进行Y轴的旋转 |
| RZ(rotateZ) | 以中点进行Z轴的旋转 |
| TX(transitionX) | 进行X轴的平移 |
| TY(transitionY) | 进行Y轴的平移 |
| C(color) | 控制背景颜色变化 |
| B(border) | 控制背景边框变化 |
about support widget
| Widget | Description |
|---|---|
| Delay | 延长时间线，进入等待阶段 |
| Serial | 通过组合动画，达到通知播放的效果 |
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), ], ), ],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
QQ群:
MIT License