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
- 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
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
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
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
Comments are closed.