Flutter Animations

https://github.com/mjohnsullivan/dashcast/tree/flutterEurope

• 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

• Status (running, dismissed, etc)
• Value (double, Color, etc)
• Listeners

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);
    }
  }
)

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,
    );
  }
)

snippet.dart

AnimatedOpacity(
  child: child,
  opaticy: _getOpacity(value.percentDownloaded),
  duration: Duration(milliseconds: 100),
)
 
double _getOpacity(double percentDownloaded) => percentDownloaded * (1- _defaultOpacity) + _defualt...

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 an Explicit animation

• Code based Animations
• Drawing based Animations

<uml>
if (Code-based animation questions) then (yes)

:Implicit animation;

else (
- Does it repeat 'forever'?
- Is it 'discontinuous'?
- Do multiple widgets animate together?
)

:Explicit animation;

</uml>

• Does it repeat 'forever'?
• Is it 'discontinuous'?
• Do multiple widgets animate together?

Built-in implicit animation
TweenAnimationBuilder

• Built0in explicit explicit animation
• Custom explicit animation

1. Flutter code or plugin?

1. Is my animation more like a drawing?

2. Implicit or Explicit?

1. Does my animation repeat 'forever'?
2. Is it 'discontinuous'?
3. Are multiple widgets animating together?

3. Built-in or custom?

1. Is there a built-in widget for my needs?

• AnimatedContainer

wnARLByOtKA

• https://flutter.dev/docs/development/ui/animations