# Flutter Animations

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


### 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

{{http://snappyimages.nextwavesrl.netdna-cdn.com/img/bc65974d95bcccdb39f74ef1d3f38bef.png}}



### AnimatedIcon

```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)

```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

```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

{{http://snappyimages.nextwavesrl.netdna-cdn.com/img/fad10c67b5f58e719596f149b0ea7f03.png}}



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`




{{ http://snappyimages.nextwavesrl.netdna-cdn.com/img/4fa720c196689103c9a9dfc83d1dc2e1.png?300}}

- Code based Animations
- Drawing based Animations

{{ http://snappyimages.nextwavesrl.netdna-cdn.com/img/021e38dbfe3443a96113ce5b6411548c.png?300}}

<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?


## Implicit animation

Built-in implicit animation
TweenAnimationBuilder

## Explicit animation

{{ http://snappyimages.nextwavesrl.netdna-cdn.com/img/20368a31040342d630b493f41ef5c4bf.png?500}}

- 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?





### Animated

- AnimatedContainer

{{http://snappyimages.nextwavesrl.netdna-cdn.com/img/1f76c7a5283cf02032d3eac974dc1041.png}}

{{youtube>wnARLByOtKA}}

## Links

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