애니메이션#

Figma Foundation · 06. Motion · 값은 coui_core 가 정본입니다. 정본 파일은 Figma 라이브러리.

CoUI 는 토큰 기반 전환 외에, 임의 값을 보간하는 두 빌더를 제공합니다. 전환 시간은 CoreDuration 토큰을 경유하세요 (raw Duration 숫자 금지).

AnimatedValueBuilder#

value 가 바뀌면 이전 값에서 새 값으로 duration 동안 보간하며 builder 를 다시 호출합니다.

AnimatedValueBuilder<double>(
  value: targetOpacity,
  duration: const Duration(milliseconds: CoreDuration.ms300),
  curve: Curves.easeInOut,
  builder: (context, value, child) => Opacity(opacity: value, child: child),
  child: const Card(/* ... */),
)

• value (T, required) — 목표 값.
• duration (Duration, required) — 보간 시간.
• builder (required) — 보간된 값으로 위젯 빌드.
• curve (default Curves.linear) — 이징.

AnimatedValueBuilder.animation (Animation 객체 전달) / .raw (원시 보간 데이터) 변형도 있습니다.

RepeatedAnimationBuilder#

start ↔ end 사이를 반복 보간합니다 (로딩 인디케이터·맥동 효과 등).

RepeatedAnimationBuilder<double>(
  start: 0.0,
  end: 1.0,
  duration: const Duration(milliseconds: CoreDuration.ms400),
  curve: Curves.easeInOut,
  builder: (context, value, child) => Transform.scale(scale: value, child: child),
)

• start / end (T, required) — 보간 양 끝.
• duration (Duration, required) · curve (default Curves.linear).

모션 토큰 — alias 를 쓰세요#

전환 길이와 이징은 coui_core 의 alias 가 정본입니다. raw ms150 이나 Curves.easeInOut 을 컴포넌트 default 에 박으면 reduced-motion 오버라이드가 그 호출만 비껴갑니다.

표시 시간(ms1000 이상, indeterminate)은 "얼마나 오래 머무르나"이지 전환이 아니라서 alias 가 없습니다 — raw 가 맞습니다.

CoreEasing.linear 는 alias 가 아닙니다 — 이름 그대로 루프(스피너·shimmer) 전용입니다.

Duration(milliseconds: CoreDuration.fast)
CoreEasing.move.toValue()   // Flutter Curve

Figma 의 같은 축은 06. Motion 입니다.