Flutter 애니메이션 정리

1. 사전 선언 된 위젯으로 간단 구현

package: flutter/widget.dart 내부에 선언 된 Animated... 로 시작되는 위젯 호출하여 사용

- ex) AnimatedContainer 를 쓴다면

AnimatedContainer(
    transform: !animate?startTransform():endTransform(),
    duration: const Duration(milliseconds: 300),
    child: widget.child
)

이 외에도 AnimatedOpacity, AnimatedAlign 등 여러가지가 있음

 

2. TweenAnimationBuilder 를 사용하는 방법

0, 1 두가지 상태만 있는 Animated...Widgets와 다르게 범위 내에 특정 액션 취하도록 

/// 1 ///
controller.drive(
  Tween<Offset>(
    begin: const Offset(0.0, 0.0),
    end: const Offset(100.0, 500.0),
  ),
);

/// 2 ///
Tween<Offset>(
  begin: const Offset(0.0, 0.0),
  end: const Offset(100.0, 500.0),
).animate(controller);

 

3. Staggered Animation

여러 애니메이션을 AnimationController로 Tween 범위만큼 Interval 비율로 동작 

 opacity = Tween<double>(begin: 0, end: 1).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(0.0, 0.5, curve: Curves.easeIn),
  ),
);

padding = Tween<double>(begin: 0, end: 50).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(0.5, 1.0, curve: Curves.easeOut),
  ),
);

color = ColorTween(begin: Colors.blue, end: Colors.red).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(0.0, 1.0, curve: Curves.linear),
  ),
);

 

controller.forward();

 

AnimatedBuilder(
    animation: controller,
    builder: (context, child) {
      return Container(
        padding: EdgeInsets.all(padding.value),
        color: color.value,
        child: Opacity(
          opacity: opacity.value,
          child: FlutterLogo(size: 100),
        ),
      );
    },
  )

 

4. Hero Animation Hero 안에 담긴 같은 id의 위젯을 전환시켜주는 애니메이션

(안드로이드의 Transition Animation 과 거의 동일)

 

// 화면1 내부
Hero(
    tag: 'hero-logo',
    child: FlutterLogo(size: 100),
)

// 화면2 내부
Hero(
  tag: 'hero-logo',
  child: FlutterLogo(size: 200),
)