anim
Fluent Flutter Animation library. Describe Sequences & Parallel animation's workflow, setup startDelay, duration and curve, then run !
Describe the Anim
Anim contains 3 major classes : AnimValues, AnimSequentially and AnimTogether.
Animation
AnimValues(
name:"animationName",
values: [value0, value1, value2, ...],
duration: Duration(seconds: 1),
);Animation schedulers
AnimSequentially() to play one after the other animations
AnimTogether() to play in parallel animations
AnimSequentially(anims: [
anim1, anim2, anim3
]);
AnimTogether(anims: [
anim1, anim2, anim3
]);Example
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],
),
])
]),
]);Bind your Anim
@override
Widget build(BuildContext context) {
return Opacity(
opacity: this.anim["alpha"],
child: SizedBox(
height: this.anim["size"],
width: this.anim["size"]
child: _yourView(),
),
);
}
}Flutter
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.