flutter_animation_set 0.0.1 flutter_animation_set: ^0.0.1 copied to clipboard
A new flutter plugin project.
✨ Flutter Animation Set #
简化Flutter交错动画。用动画配置的形式,通过时间线去驱动Flutter的交错动画。你可以
- 使用
Flutter Animation Set
现有的动画组件 - 使用
Flutter Animation Set
去创建新的动画组件 - 贡献你的
Flutter Animation Set
动画组件
🎖 Installing #
coming soon
⚡ Use Animation Set Widget #
1、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
⚡ 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:执行动画的组件
- animatorSet:动画集合
AnimatorSet(
child: widget.child
animatorSet: [],
)
3、use api
about animation widget
Widget | Mean | 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 | Mean | Description |
---|---|---|
Delay | delay timeLine | 延长时间线,进入等待阶段 |
Serial | combine animation | 通过组合动画,达到通知播放的效果 |
⚡ For Example #
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
More #
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
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
About #
QQ群:
License #
Apache License 2.0