Flutter: Staggered Animations

여러 animation 을 시차를 두고 연속적으로 만드는 방법을 설명한 아래의 페이지의 내용을 살펴보자.

 

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

Staggered Animations

여러개의 Tween 을 전체 animation 의 범위 0.0 ~ 1.0 의 내에서 쪼개어 구간(시간)을 할당한다.

Curve 의 implementer 중 하나인 Interval 을 사용하여 각 animation 의 시작과 끝을 지정한다.

하나의 AnimationController 를 사용하여 모든 animation 을 컨트롤 한다.

각 Tween 은 opacity, width, height, padding, borderRadius, color 속성을 animation 값으로 가진다.

 

예제의 소스코드 주소: https://github.com/flutter/website/tree/master/examples/_animation/basic_staggered_animation

flutter/website

예제의 동작화면

Tween

Tween 중 하나의 코드를 보자.

width = Tween<double>(
  begin: 50.0,
  end: 150.0,
).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0.125, 0.250,
      curve: Curves.ease,
    ),
  ),
),

width 속성값을 가지는 Tween 을 생성한 코드이다.

animation 의 width 속성 값은 50.0 ~ 150.0 을 가진다.

Interval 은 전체 animation 의 범위 0.0 ~ 1.0 중에서 0.125 ~ 0.250 구간으로 설정하여 실제 이 Tween 의 animation 이 구현되는 기간을 설정한다.

AnimatedBuilder

animation 을 생성하는 코드를 보자.

Widget _buildAnimation(BuildContext context, Widget child) {
  return Container(
    padding: padding.value,
    alignment: Alignment.bottomCenter,
    child: Opacity(
      opacity: opacity.value,
      child: Container(
        width: width.value,
        height: height.value,
        decoration: BoxDecoration(
          color: color.value,
          border: Border.all(
            color: Colors.indigo[300],
            width: 3.0,
          ),
          borderRadius: borderRadius.value,
        ),
      ),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    builder: _buildAnimation,
    animation: controller,
  );
}

AnimatedBuilder 를 사용하여 animation 들의 속성들인 opacity, padding, width, height, color, borderRadius, color 를 구성한다.

Intervals

animation 시작 전의 초기 값들이다.

 

0.0 ~ 0.1 까지 opacity 값으로 animation 이 동작한다.

 

0.125 ~ 0.250 까지 width 값으로 animation 이 동작한다.

 

0.250 ~ 0.375 까지 height 와 padding 값으로 animation 이 동작한다.

 

0.375~ 0.500 까지 borderRadius 값으로 animation 이 동작한다.

 

0.500 ~ 0.750 까지 color 값으로 animation 이 동작한다.