Flutter Animations
2. How to Idea
- Look at the user actions in your app
- Emulate the physical world when possible, or use it for inspiration.
- Subtle and short is good, generally.
- Sine is your friend!
Animation? AnimationController?
Animation
- Status (running, dismissed, etc)
- Value (double, Color, etc)
- Listeners
AnimationController
AnimatedIcon
- snippet.dart
IconButton( icon: AnimatedIcon( progress: _animationController, icon: AnimatedIcons.play_pause, ), onPressed: () { if (playStatus.isPlaying) { _animationController.reverse(); _stop(); } else { _animationController.forward(); _play(downloadLocation ?? item.guid); } } )
AlertWiggle
We need…
- Positive and negative values
- (wiggling up and down)
- A continuous function to get those values
- (so that the movement to each value is smooth)
- snippet.dart
static final sinePeriod = 2 * pi; double _endValue = 0; if (episode.percentDownloaded == 1 && !episode.hasNotified){ _endValue = sinePeriod; episode.downloadNotified(); } TweenAnimationBuilder( tween: Tween<double>(begin:0, end:_endValue), duration: Duration(milliseconds: 200), child: child, builder: (_, double value, Widget child){ double offset = sin(value); return Transform.translate( offset: Offset(0, offset * 2), child: child, ); } )
AnimatedOpacity
- snippet.dart
AnimatedOpacity( child: child, opaticy: _getOpacity(value.percentDownloaded), duration: Duration(milliseconds: 100), ) double _getOpacity(double percentDownloaded) => percentDownloaded * (1- _defaultOpacity) + _defualt...
Try the simplest thing first
Is my animation more like a drawing
- Rive
“Pure Flutter Animatios”: Two kinds
- Implicit Animations
- Duration, and transition method (curve) are defined. Implicitly starts and stops when “end vlaue” is set.
- Explicit Animations
- Animations is fully defined, will 'go' on command, with a controller
Does my animation repeat forever
?
Is is discontinuous
?
Are multiple widgets animating together?
- If
YES
, use anExplicit animation
- Code based Animations
- Drawing based Animations
- Does it repeat 'forever'?
- Is it 'discontinuous'?
- Do multiple widgets animate together?
Implicit animation
Built-in implicit animation
TweenAnimationBuilder
Explicit animation
- Built0in explicit explicit animation
- Custom explicit animation
1. Flutter code or plugin?
- Is my animation more like a drawing?
2. Implicit or Explicit?
- Does my animation repeat 'forever'?
- Is it 'discontinuous'?
- Are multiple widgets animating together?
3. Built-in or custom?
- Is there a built-in widget for my needs?