Flutter Mobile Development · 강의

시차 애니메이션 및 연출된 AnimationControllers

간격과 곡선을 사용해 여러 애니메이션을 지휘하고 연출된 시퀀스를 구성합니다.

시차 애니메이션 및 연출된 AnimationControllers은(는) CoddyKit의 무료 Flutter Mobile Development 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Flutter Mobile Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What Is a Staggered Animation?

A staggered animation is a sequence where several visual changes happen at different times within a single timeline, instead of all at once.

Think of a card that first fades in, then slides up, then its icon rotates. Each step starts and ends at a different point along one shared clock.

One AnimationController drives the master clock (0.0 to 1.0).
Each property gets its own slice of that clock via an Interval.
This keeps everything perfectly in sync because they share the same time source.

This lesson focuses on orchestrating multiple animations with intervals and curves to build choreographed sequences.

One Controller, Many Tweens

The core pattern: a single AnimationController defines the total duration, and you derive multiple Animation objects from it.

The controller value moves linearly from 0.0 to 1.0. Each animation reads that value but maps it to its own range and timing window.

controller.value is the shared progress.
Tween maps 0..1 to your target values (offsets, opacity, scale).
CurvedAnimation applies easing and timing windows.

Why one controller instead of many? Because synchronizing several independent controllers is error-prone. A single timeline guarantees the steps never drift apart.

// Conceptual mapping of a shared 0..1 clock to staggered slices.
void main() {
  // Master clock samples (what the controller would emit each frame).
  final samples = [0.0, 0.25, 0.5, 0.75, 1.0];

  // Opacity runs over the first half: interval [0.0, 0.5].
  double opacity(double t) {
    final local = ((t - 0.0) / (0.5 - 0.0)).clamp(0.0, 1.0);
    return local; // 0 -> 1 across the slice
  }

  // Slide runs over the second half: interval [0.5, 1.0].
  double slide(double t) {
    final local = ((t - 0.5) / (1.0 - 0.5)).clamp(0.0, 1.0);
    return 1.0 - local; // 1 -> 0 (slides into place)
  }

  for (final t in samples) {
    print('t=$t opacity=${opacity(t)} slideY=${slide(t)}');
  }
}

Intervals Carve Up the Timeline

An Interval is a curve that stays at 0.0 until its begin point, animates between begin and end, then stays at 1.0.

This is the key tool for staggering. By giving each animation a different interval, you decide when in the master timeline it plays.

Interval(0.0, 0.5) — plays in the first half.
Interval(0.5, 1.0) — plays in the second half.
Interval(0.2, 0.8) — starts a bit late, ends a bit early.

You can also nest a curve inside an interval to ease the motion within that slice.

// Simulate Flutter's Interval(begin, end, curve) math without Flutter.
class Interval {
  final double begin;
  final double end;
  Interval(this.begin, this.end);

  double transform(double t) {
    if (t <= begin) return 0.0;
    if (t >= end) return 1.0;
    return (t - begin) / (end - begin);
  }
}

void main() {
  final fade = Interval(0.0, 0.5);
  final rise = Interval(0.5, 1.0);
  for (final t in [0.0, 0.25, 0.5, 0.75, 1.0]) {
    print('t=$t fade=${fade.transform(t)} rise=${rise.transform(t)}');
  }
}

Building Staggered Animations in Flutter

Here is the idiomatic Flutter setup. Inside a State with SingleTickerProviderStateMixin, create one controller and several animations, each using a CurvedAnimation with an Interval.

vsync: this ties the controller to the screen's frame ticker.
Each CurvedAnimation combines an interval (timing) with a curve (easing).
Tween.animate(...) maps the curved progress to real values.

This is framework code, so it is not standalone-runnable, but it is the canonical structure you will reuse constantly.

class _CardState extends State<AnimatedCard>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 1200),
    vsync: this,
  );

  late final Animation<double> _opacity = Tween<double>(begin: 0, end: 1)
      .animate(CurvedAnimation(
    parent: _controller,
    curve: const Interval(0.0, 0.4, curve: Curves.easeIn),
  ));

  late final Animation<Offset> _slide = Tween<Offset>(
    begin: const Offset(0, 0.3),
    end: Offset.zero,
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: const Interval(0.3, 0.8, curve: Curves.easeOut),
  ));

  late final Animation<double> _scale = Tween<double>(begin: 0.8, end: 1.0)
      .animate(CurvedAnimation(
    parent: _controller,
    curve: const Interval(0.6, 1.0, curve: Curves.elasticOut),
  ));

  @override
  void initState() {
    super.initState();
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Overlapping vs Sequential Slices

The magic of choreography is in how intervals overlap. You rarely want hard cuts where one step fully finishes before the next begins.

Sequential: Interval(0.0, 0.3) then Interval(0.3, 0.6) — clean, distinct steps.
Overlapping: Interval(0.0, 0.5) and Interval(0.3, 0.8) — the second starts while the first is still finishing. This feels organic and fluid.

Overlap creates the sense that motion flows from one element into the next, which is the hallmark of polished, choreographed UI.

class Interval {
  final double begin, end;
  Interval(this.begin, this.end);
  double transform(double t) {
    if (t <= begin) return 0.0;
    if (t >= end) return 1.0;
    return (t - begin) / (end - begin);
  }
}

void main() {
  // Overlapping slices: fade still finishing while rise begins.
  final fade = Interval(0.0, 0.5);
  final rise = Interval(0.3, 0.8);
  for (var i = 0; i <= 10; i++) {
    final t = i / 10;
    final overlapping = fade.transform(t) > 0 &&
        fade.transform(t) < 1 &&
        rise.transform(t) > 0;
    print('t=${t.toStringAsFixed(1)} '
        'fade=${fade.transform(t).toStringAsFixed(2)} '
        'rise=${rise.transform(t).toStringAsFixed(2)} '
        'overlap=$overlapping');
  }
}

Curves: Shaping Motion Within a Slice

An interval controls when; a curve controls how the motion feels inside that window.

Curves.easeOut — fast start, gentle stop. Great for entrances.
Curves.easeIn — slow start, fast end. Great for exits.
Curves.elasticOut — overshoots and settles. Adds playfulness.
Curves.fastOutSlowIn — Material's standard motion curve.

You can pass the curve directly to Interval(begin, end, curve: ...), so each slice carries both its timing and its easing.

// Approximate an ease-out curve (1 - (1-t)^3) over a slice.
double easeOut(double t) => 1 - (1 - t) * (1 - t) * (1 - t);

class Interval {
  final double begin, end;
  final double Function(double) curve;
  Interval(this.begin, this.end, this.curve);
  double transform(double t) {
    if (t <= begin) return 0.0;
    if (t >= end) return 1.0;
    final local = (t - begin) / (end - begin);
    return curve(local);
  }
}

void main() {
  final entrance = Interval(0.2, 0.8, easeOut);
  for (var i = 0; i <= 10; i++) {
    final t = i / 10;
    print('t=${t.toStringAsFixed(1)} -> '
        '${entrance.transform(t).toStringAsFixed(3)}');
  }
}

Choreographing a Multi-Element List

A common pattern: animate a list so each item appears slightly after the previous one. You compute each item's interval from its index.

Divide the timeline into staggered windows. Item i might start at i * step and run for a fixed duration, clamped to stay inside [0, 1].

Keep the per-item duration longer than the step so windows overlap.
Clamp end to 1.0 so late items still complete.

This produces the familiar 'cascading' reveal seen in well-designed mobile apps.

// Compute staggered [begin, end] windows for a list of items.
List<List<double>> staggerWindows(int count, double itemDuration) {
  final windows = <List<double>>[];
  final step = count > 1 ? (1.0 - itemDuration) / (count - 1) : 0.0;
  for (var i = 0; i < count; i++) {
    final begin = (i * step).clamp(0.0, 1.0);
    final end = (begin + itemDuration).clamp(0.0, 1.0);
    windows.add([begin, end]);
  }
  return windows;
}

void main() {
  for (final w in staggerWindows(5, 0.4)) {
    print('begin=${w[0].toStringAsFixed(2)} '
        'end=${w[1].toStringAsFixed(2)}');
  }
}

Driving the Whole Sequence with AnimatedBuilder

To render the choreography, wrap your widget tree in an AnimatedBuilder (or use FadeTransition / SlideTransition for individual animations).

AnimatedBuilder rebuilds only its builder when the controller ticks — efficient.
Read each derived animation's .value inside the builder.
The child parameter caches subtrees that do not depend on the animation.

Because every animation shares the one controller, a single forward() plays the entire choreographed sequence.

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      return Opacity(
        opacity: _opacity.value,
        child: Transform.translate(
          offset: Offset(0, _slide.value.dy * 60),
          child: Transform.scale(
            scale: _scale.value,
            child: child,
          ),
        ),
      );
    },
    child: const Card(child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Choreographed!'),
    )),
  );
}

Replaying, Reversing, and Looping

Once your timeline is built, the controller gives you full transport control over the whole choreography at once.

forward() — play 0 to 1.
reverse() — play 1 to 0 (the choreography runs backwards).
repeat(reverse: true) — loop back and forth, ideal for ambient effects.
reset() then forward() — replay from scratch.

Tip: If you want exits to feel different from entrances, build separate intervals/curves and switch which animations you read based on direction, rather than just reversing.

Coordinating Two Controllers When Needed

Sometimes one timeline is not enough — for example a looping background pulse plus a one-shot entrance. Then you do use multiple controllers, but coordinate them deliberately.

Use a status listener to start controller B when controller A completes.
Or use TickerFuture: await _a.forward(); then _b.forward();
Always dispose every controller to avoid ticker leaks.

Prefer a single controller for tightly-synced choreography; reach for multiple only when the animations are genuinely independent in lifecycle or looping behavior.

Future<void> playSequence(
  AnimationController intro,
  AnimationController loop,
) async {
  // Await the one-shot entrance, then kick off the ambient loop.
  await intro.forward();
  loop.repeat(reverse: true);
}

// Chaining via a status listener is the alternative:
void chain(AnimationController a, AnimationController b) {
  a.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      b.forward();
    }
  });
  a.forward();
}

Common Pitfalls in Choreography

Staggered animations are easy to get subtly wrong. Watch for these:

Forgetting to dispose the controller — leaks the ticker and prints debug warnings.
Interval end past 1.0 — Interval asserts 0.0 ≤ begin ≤ end ≤ 1.0; clamp your computed windows.
Too many controllers — harder to sync; prefer one with intervals.
Curves on the wrong layer — nest the curve inside the Interval, not as a separate CurvedAnimation stacked on top, or easing compounds unexpectedly.
No overlap — purely sequential slices can feel robotic; add slight overlap.

// Guard your computed interval windows before passing to Flutter.
({double begin, double end}) safeWindow(double begin, double duration) {
  final b = begin.clamp(0.0, 1.0);
  final e = (begin + duration).clamp(0.0, 1.0);
  // Interval requires begin <= end; enforce it.
  return (begin: b, end: e < b ? b : e);
}

void main() {
  print(safeWindow(0.8, 0.5)); // end clamps to 1.0
  print(safeWindow(0.0, 0.3));
}

Quick Check: Designing the Stagger

You want three list items to fade and slide in one after another, fully synchronized, with a smooth cascading overlap. Which approach best fits Flutter's idiomatic choreography model?

Recap: Orchestrating Choreographed Animations

You learned how to build staggered, choreographed sequences in Flutter:

One AnimationController is the shared master clock (0.0 to 1.0) that keeps everything in sync.
Interval(begin, end, curve: ...) slices the timeline so each animation plays in its own window with its own easing.
Overlapping intervals create organic, flowing motion; purely sequential ones feel mechanical.
Derive each property with Tween.animate(CurvedAnimation(...)) and render via AnimatedBuilder or transition widgets.
Compute per-item windows from the index for cascading lists, and always clamp to [0, 1] and dispose controllers.
Use multiple controllers only when lifecycles are genuinely independent (e.g., a one-shot entrance plus an ambient loop).

Master one timeline, slice it with intervals and curves, and you can choreograph almost any mobile motion.

자주 묻는 질문

“시차 애니메이션 및 연출된 AnimationControllers” 강의는 무료인가요?

네 — “시차 애니메이션 및 연출된 AnimationControllers” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Flutter Mobile Development 강의 전체를 잠금 해제할 수 있습니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

“시차 애니메이션 및 연출된 AnimationControllers”에서 뭘 배우나요?

간격과 곡선을 사용해 여러 애니메이션을 지휘하고 연출된 시퀀스를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Flutter Mobile Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Flutter Mobile Development을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Flutter Mobile Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“시차 애니메이션 및 연출된 AnimationControllers” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Flutter Mobile Development 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Flutter Mobile Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Flutter Mobile Development(으)로 돌아가기