anim 1.0.0
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(),
),
);
}
}
Getting Started #
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.
0.0.1 #
- TODO: Describe initial release.
anim_example #
Demonstrates how to use the anim plugin.
Initialize your Anim #
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],
),
]),
],
)
],
);
Bind with your widget #
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(),
),
),
);
}
3. Start ! #
this.anim.start();
Getting Started #
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.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
anim: ^1.0.0
2. Install it
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.
3. Import it
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]
|
35
|
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]
|
67
|
We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.12.21
- Flutter: 1.9.1+hotfix.6
Platforms
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
Dependencies
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 | 1.14.12 | |
meta | 1.1.7 | 1.1.8 | |
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 |