Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/salkuadrat/curved_animation_controller
An easy way to use AnimationController with Curve.
https://github.com/salkuadrat/curved_animation_controller
animation dart flutter
Last synced: 3 months ago
JSON representation
An easy way to use AnimationController with Curve.
- Host: GitHub
- URL: https://github.com/salkuadrat/curved_animation_controller
- Owner: salkuadrat
- License: bsd-2-clause
- Created: 2020-09-07T13:08:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-19T14:41:14.000Z (over 3 years ago)
- Last Synced: 2024-05-03T03:49:20.925Z (9 months ago)
- Topics: animation, dart, flutter
- Language: Dart
- Homepage: https://pub.dev/packages/curved_animation_controller
- Size: 13.9 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# CurvedAnimationController
An easy way to use AnimationController with Curve.
## Getting Started
Add dependency in your flutter project.
```
$ flutter pub add curved_animation_controller
```
or
```yaml
dependencies:
curved_animation_controller: ^1.1.0+1
```
or
```yaml
dependencies:
curved_animation_controller:
git: https://github.com/salkuadrat/curved_animation_controller.git
```
Then run `flutter pub get`.
## Example
There is a nice example project in the [example folder](example).
Check it out to learn how to use Curved Animation Controller.
## Usage
Here is a snippet of code we usually use when we want to do some animation with curve.
```dart
AnimationController _controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
);
Animation _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller, curve: Curves.easeInOut,
));
_controller.addListener(() => setState(() {}));
...
// start animation
_animation.forward();
...
// apply animation
Opacity(
opacity: _animation.value,
child: child,
)
```
Using CurvedAnimationController, we can apply animation with a more straightforward code:
```dart
CurvedAnimationController _animation = CurvedAnimationController(
vsync: this, duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
_animation.addListener(() => setState(() {}));
...
// start animation
_animation.start();
...
// apply animation
Opacity(
opacity: _animation.value,
child: child,
)
```
We can also use custom Tween:
```
CurvedAnimationController _animation = CurvedAnimationController.tween(
ColorTween(begin: Colors.pink, end: Colors.teal),
Duration(milliseconds: 300),
curve: Curves.easeInCubic,
vsync: this,
);
_animation.addListener(() => setState(() {}));
...
// start animation
_animation.forward();
...
// apply animation
Container(
color: _animation.value,
child: child,
)
```
Don't forget to dispose the controller properly:
```dart
@override
void dispose() {
_animation.dispose();
super.dispose();
}
```
## Available Constructors
```dart
CurvedAnimationController(
begin: begin,
end: end,
vsync: vsync,
curve: curve,
duration: duration,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
```
```dart
CurvedAnimationController.tween(
tween, // ex: ColorTween(begin: Colors.pink, end: Colors.teal)
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
```
```dart
CurvedAnimationController.sequence(
sequence, // list of sequence (List)
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
```
```dart
CurvedAnimationController.tweenSequence(
sequence, // TweenSequence
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
```
## Available Methods
Start animation:
```dart
start()
```
or :
```dart
forward()
```
Start animation in reverse direction:
```dart
reverse()
```
Stop animation:
```dart
stop()
```
Start animation with fling effect:
```dart
fling()
```
Animate to specific target value:
```dart
animateTo()
```
Animate back to specific target value:
```dart
animateBack()
```
Reset animation:
```dart
reset()
```
Dispose animation controller:
```dart
dispose()
```
Add animation listener:
```dart
addListener()
```
Remove animation listener:
```dart
removeListener()
```
Add AnimationState listener:
```dart
addStateListener()
```
Remove AnimationState listener:
```dart
removeStateListener()
```
Notify all listeners:
```dart
notifyListeners()
```