Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/YYFlutter/flutter-animation-set
🔥🔥🔥 Easy to build an animation set
https://github.com/YYFlutter/flutter-animation-set
animation animation-set curves flutter
Last synced: 14 days ago
JSON representation
🔥🔥🔥 Easy to build an animation set
- Host: GitHub
- URL: https://github.com/YYFlutter/flutter-animation-set
- Owner: YYFlutter
- License: apache-2.0
- Created: 2019-08-14T05:06:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-15T12:03:02.000Z (over 3 years ago)
- Last Synced: 2024-05-20T22:49:36.152Z (6 months ago)
- Topics: animation, animation-set, curves, flutter
- Language: Dart
- Homepage:
- Size: 1.21 MB
- Stars: 281
- Watchers: 13
- Forks: 26
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ Flutter Animation Set
[](https://pub.dev/packages/flutter_animation_set)
**[Lanuage ~~]** [English](README.md) | [中文文档](README_CN.md)
Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in the form of an animation configuration.You can
1. Uses the existing Animation Widget of `Flutter Animation Set`
2. Use `Flutter Animation Set` to create a new Animation Widget
3. Contribute your Flutter Animation Set Widget
4. Watch All of the `Curves` of Flutter in example
## 🎖 Installing
```yaml
dependencies:
flutter_animation_set: ^0.0.4
```
## ⚡ Use Animation Set Widget
**1、import**
```dart
import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
```
**2、use**
```dart
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**
* [flutter_spinkit](https://github.com/jogboms/flutter_spinkit)
## ⚡ Create Animation Set Widget By YourSelf
**1、import**
```dart
import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
```
**2、use widget**
```dart
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
## ⚡ For Example
**1、create timeLine**
1. This figure shows that the core components of the animation are made according to the timeLine
2. In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms
3. ScaleY components are used to scale up and down in order to make each rectangle have a wave effect
4. 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
```dart
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
```dart
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**
```dart
class YYWave extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 40,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
makeWave(0, 500),
makeWave(100, 400),
makeWave(200, 300),
makeWave(300, 200),
makeWave(400, 100),
makeWave(500, 0),
],
),
);
}
}
```
**4、done**
## More
**1、Combination of animation**
> The scaling effect requires scaling both the X and Y axes, uses the Serial Widget
```dart
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
```dart
class YYThreeLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 40,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
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
```dart
class YYFoldMenu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 40,
height: 40,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
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
* Or post your animation, if interested, we will help you to achieve
## About
* QQ：510402535
* QQ群：798874340
* e-mail：[email protected]
* g-mail：[email protected]
* Blog：http://blog.csdn.net/qq_30379689
* Github：https://github.com/AndroidHensen
## License
Apache License 2.0