Dart pub
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(),
),
);
}
}
This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
example/README.md
Demonstrates how to use the anim plugin.
this.anim1 = Anim(
vsync: this,
listener: () {
setState(() {
/* rebuild */
});
},
/* Define initial values, used when the animation has not been launched */
initiaValues: {
"text.alpha": 0,
"text.translationY": -20,
"round.alpha": 0,
"round.scale": 1,
"round.rotation": 0,
"round.size": 0,
},
animations: [
AnimSequentially(
anims: [
AnimTogether(
anims: [
AnimValues(
name: "round.alpha",
curve: Curves.easeIn,
duration: const Duration(milliseconds: 500),
values: [0, 1],
),
AnimValues(
name: "round.size",
curve: Curves.easeIn,
duration: const Duration(milliseconds: 800),
values: [0, 140, 100],
),
],
),
AnimTogether(
anims: [
AnimValues(
name: "text.alpha",
curve: Curves.linear,
duration: const Duration(milliseconds: 1000),
values: [0, 1],
),
AnimValues(
name: "text.translationY",
curve: Curves.easeIn,
duration: const Duration(milliseconds: 800),
values: [-20, 5, -5, 0],
),
],
),
AnimTogether(anims: [
AnimValues(
name: "round.rotation",
curve: Curves.linear,
duration: const Duration(milliseconds: 600),
values: [0, degToRad(-10), degToRad(10), 0],
),
AnimValues(
name: "round.scale",
curve: Curves.easeIn,
duration: const Duration(milliseconds: 400),
values: [1, 1.3, 1],
),
]),
],
)
],
);
Widget buildAvatarName() {
return Transform.translate(
offset: Offset(0, anim1["text.translationY"]),
child: Opacity(
opacity: this.anim["text.alpha"],
child: Text("Avatar",
style: const TextStyle(
color: Colors.blueGrey,
fontSize: 18,
fontWeight: FontWeight.w700),
),
),
);
}
Widget buildAvatar() {
return Transform.scale(
scale: this.anim["round.scale"],
child: Transform.rotate(
angle: this.anim["round.rotation"],
child: SizedBox(
height: this.anim["round.size"],
width: this.anim["round.size"],
child: CircleAvatar(),
),
),
);
}
this.anim.start();
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Add this to your package's pubspec.yaml file:
dependencies:
anim: ^1.0.0
You can install packages from the command line:
with Flutter:
$ flutter pub get
Alternatively, your editor might support flutter pub get.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:anim/anim.dart';
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
3
|
|
Health:
Code health derived from static analysis.
[more]
|
100
|
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
100
|
|
Overall:
Weighted score of the above.
[more]
|
52
|
We analyzed this package on Jul 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
| Package | Constraint | Resolved | Available |
|---|---|---|---|
| Direct dependencies | |||
| Dart SDK | >=2.0.0-dev.68.0 <3.0.0 | ||
| flutter | 0.0.0 | ||
| Transitive dependencies | |||
| collection | 1.14.11 | ||
| meta | 1.1.6 | 1.1.7 | |
| sky_engine | 0.0.99 | ||
| typed_data | 1.1.6 | ||
| vector_math | 2.0.8 | ||