YYFlutter/flutter-animation-set
🔥🔥🔥 Easy to build an animation set
go to github for download✨ Flutter Animation Set
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 Set
to create a new Animation Widget - Contribute your Flutter Animation Set Widget
- Watch All of the
Curves
of Flutter in example
🎖 Installing
dependencies:
flutter_animation_set: ^0.0.4
⚡ Use Animation Set Widget
1、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
⚡ 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: 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
![](https://github.com/efoxTeam/flutter-animation-set/raw/master/image/readme/YYWave.png)
- 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
![](https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/3.gif)
More
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
![](https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/7.gif)
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
![](https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/9.gif)
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
![](https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/21.gif)
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:xyj510402535@qq.com
- g-mail:xyj51042535@gmail.com
- Blog:http://blog.csdn.net/qq_30379689
- Github:https://github.com/AndroidHensen
License
Apache License 2.0
![](/images/banner-woo.jpg)
related excellent projects recommendation download
AppFlowy
47859
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
localsend
33797
An open-source cross-platform alternative to AirDrop
spotube
23772
🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
revanced-manager
15035
💊 Application to use ReVanced on Android
gsy_github_app_flutter
14559
Flutter 超完整的开源项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,持续维护,配套文章,适合全面学习,对比参考。跨平台的开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、原生 kotlin 版本 https://github.com/CarGuo/GSYGithubAppKotlin
dio
12249
A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.
gopeed
11832
A modern download manager that supports all platforms. Built with Golang and Flutter.
bloc
11441
A predictable state management library that helps implement the BLoC design pattern
getx
9899
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
flame
8846
A Flutter based game engine.
flutter_deer
7595
🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
fish-redux
7343
An assembled flutter application framework.
fl_chart
6451
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
pixez-flutter
6360
一个支持免代理直连及查看动图的第三方Pixiv flutter客户端
Flutter-Responsive-Admin-Panel-or-Dashboard
6355
Responsive Admin Panel or Dashboard using Flutter
aidea
6021
AIdea 是一款支持 GPT 以及国产大语言模型通义千问、文心一言等,支持 Stable Diffusion 文生图、图生图、 SDXL1.0、超分辨率、图片上色的全能型 APP。
riverpod
5828
A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.
pikapika
5463
美观易用且无广告的漫画和游戏客户端,同时支持MacOS,Windows,Android,iOS。
provider
5029
InheritedWidgets, but simple
getwidget
4416
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.