Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🔥🔥🔥 Easy to build an animation set

License

NotificationsYou must be signed in to change notification settings

YYFlutter/flutter-animation-set

Repository files navigation

pub package

[Lanuage ~~]English |中文文档

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 ofFlutter Animation Set
  2. UseFlutter Animation Set to create a new Animation Widget
  3. Contribute your Flutter Animation Set Widget
  4. Watch All of theCurves 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

PropertyMeanDefault
childThe component that performs the animationnot have
animatorSetCollection of animationnot have
animationTypeControls the type of animation executionAnimationType.repeat
debugThe output logfalse

The properties of the animationType

PropertyMean
repeatRepeat animation
reverseRewind animation
onceOne play animation

3、use AnimatorSet api

about animation widget

WidgetMeanDescription
WwidthControl the change of width. If it is scaled up, SX is recommended instead
HheightControl the change of height. If it is scaled up, SY is recommended instead
PpaddingControl padding changes
OopacityControl opacity changes
SXscaleXScale the X-axis with the midpoint
SYscaleYScale the Y-axis with the midpoint
RXrotateXRotate the X-axis with the midpoint
RYrotateYRotate the Y-axis with the midpoint
RZrotateZRotate the Z-axis with the midpoint
TXtransitionXTranslate the Z-axis with the midpoint
TYtransitionYTranslate the Y-axis with the midpoint
CcolorControl background color changes
BborderControl background border changes

about support widget

WidgetMeanDescription
Delaydelay timeLineExtend the timeline to wait
Serialcombine animationThrough 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
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 isContainer rectangle

WidgetmakeWave(int before,int after) {returnAnimatorSet(    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

classYYWaveextendsStatelessWidget {@overrideWidgetbuild(BuildContext context) {returnContainer(      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

classYYThreeLineextendsStatelessWidget {@overrideWidgetbuild(BuildContext context) {returnContainer(      width:40,      height:40,      child:Row(        mainAxisAlignment:MainAxisAlignment.spaceBetween,        children:<Widget>[makeLine(0),makeLine(50),makeLine(100),        ],      ),    );  }}WidgetmakeLine(int delay) {returnAnimatorSet(    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, setanimationtype.reverse through the animationType property, making the animation play back

classYYFoldMenuextendsStatelessWidget {@overrideWidgetbuild(BuildContext context) {returnContainer(      width:40,      height:40,      child:Column(        mainAxisAlignment:MainAxisAlignment.spaceBetween,        children:<Widget>[makeFoldMenu(0,40),makeFoldMenu(100,26.0),makeFoldMenu(200,12.0),        ],      ),    );  }}WidgetmakeFoldMenu(int delay,double toY) {returnAnimatorSet(    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

License

Apache License 2.0

About

🔥🔥🔥 Easy to build an animation set

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp