Fluent Flutter Animation library. Describe Sequences & Parallel animation's workflow, setup startDelay, duration and curve, then run !
Anim contains 3 major classes : AnimValues, AnimSequentially and AnimTogether.
AnimValues( name:"animationName", values: [value0, value1, value2, ...], duration: Duration(seconds: 1), );
AnimSequentially() to play one after the other animations
AnimTogether() to play in parallel animations
AnimSequentially(anims: [ anim1, anim2, anim3 ]); AnimTogether(anims: [ anim1, anim2, anim3 ]);
this.anim = Anim( vsync: this, listener: () { setState(() { /* rebuild */ }); }, /* Define initial values, used when the animation has not been launched */ initiaValues: { "alpha": 1, "size": 100, }, animations: [ AnimSequentially( startDelay: const Duration(milliseconds: 400), anims: [ //Animate the alpha, then the size AnimValues( name: "alpha", curve: Curves.easeIn, duration: const Duration(milliseconds: 800), values: [1, 0.4, 0.8, 0.5], ), AnimValues( name: "size", curve: Curves.easeIn, duration: const Duration(milliseconds: 800), values: [100, 140, 80], ), //and finally animate those two values together AnimTogether(anims: [ AnimValues( name: "alpha", curve: Curves.easeIn, duration: const Duration(milliseconds: 800), values: [0.5, 1], ), AnimValues( name: "size", curve: Curves.easeIn, duration: const Duration(milliseconds: 800), values: [80, 100], ), ]) ]), ]);
@override Widget build(BuildContext context) { return Opacity( opacity: this.anim["alpha"], child: SizedBox( height: this.anim["size"], width: this.anim["size"] child: _yourView(), ), ); } }
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.