OPEN

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

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?