Flutter
Stagger animation
Sequence multiple animations as stagger.
What is stagger?
stagger is a technique for starting multiple animations sequentially. Each animation is placed in a different Interval of the controller's 0.0-1.0 progress. So as the first animation ends the next begins; all run under the same AnimationController.
final a1 = Tween(begin: 0.0, end: 100.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
Multiple animations sequentially
To run two animations sequentially, give the first Interval(0.0, 0.5) and the second Interval(0.5, 1.0). The first then runs while the controller is between 0.0 and 0.5, and the second between 0.5 and 1.0; all scheduled under the same AnimationController.
Exercise Sequential animation with Interval
Define the _EmptyVsync class. In main, create ctrl (vsync: _EmptyVsync(), duration 1 second). Animate Tween(begin: 0.0, end: 50.0) with animate; use CurvedAnimation(parent: ctrl, curve: const Interval(0.0, 0.5, curve: Curves.easeIn)) as the curve. Print the animation's value.
Show example solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final anim = Tween(begin: 0.0, end: 50.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
print(anim.value);
ctrl.dispose();
}
Test yourself
-
What does Interval do in stagger animation?
- Cleans memory
- Starts the animation
- Sets an animation's time range within the controller
- Gives widget size
Show answer
Sets an animation's time range within the controller — Interval(begin, end) determines within which sub-range of the controller's 0.0-1.0 progress an animation runs.
-
Use Interval
curve: const ____(0.0, 0.5, curve: Curves.easeIn),
Show answer
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
-
Stagger matches
- stagger
- Sequential animation technique
- Interval
- Time range
- Tween
- Value range
- AnimationController
- Single time source
Next lesson: Summary - Advanced animation
