Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/florent37/flutter-anim
Fluent Flutter Animation library. Describe Sequences & Parallel animation's workflow, setup startDelay, duration and curve, then run !
https://github.com/florent37/flutter-anim
android anim animation animator curve dart duration flutter ios startdelay tween ui ux
Last synced: 6 days ago
JSON representation
Fluent Flutter Animation library. Describe Sequences & Parallel animation's workflow, setup startDelay, duration and curve, then run !
- Host: GitHub
- URL: https://github.com/florent37/flutter-anim
- Owner: florent37
- License: apache-2.0
- Created: 2019-01-25T15:20:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-29T13:09:55.000Z (almost 6 years ago)
- Last Synced: 2024-10-25T00:48:48.098Z (15 days ago)
- Topics: android, anim, animation, animator, curve, dart, duration, flutter, ios, startdelay, tween, ui, ux
- Language: Dart
- Homepage: https://pub.dartlang.org/packages/anim#-analysis-tab-
- Size: 902 KB
- Stars: 36
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```Dart
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
```Dart
AnimSequentially(anims: [
anim1, anim2, anim3
]);
AnimTogether(anims: [
anim1, anim2, anim3
]);
```
# Example
[](https://github.com/florent37/Flutter-Anim)
```Dart
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
```Dart
@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](https://flutter.io/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.