[Flutter]기본 애니메이션

AnimatedOpacity

투명도를 조절하고 싶다면 AnimatedOpacity를 사용 합니다.

Flutter 기본 프로젝트에서 텍스트 부분만 Opacity를 적용해 봤습니다.

 

AnimatedOpacity(
  duration: const Duration(milliseconds: 300),
  opacity: _counter%2==0?0.2:1,
  child: const Text(
    'You have pushed the button this many times:',
  ),
),

duration은 전환 시간으로 300 milliseconds 즉 0.3초 입니다.

opacity는 투명도입니다.

여기서는 0~1 사이의 실수.

그래서 버튼을 누를떄마다 투명해졌다 진해졌다 전환하게 됩니다.

 

테스트 해보면 코드대로 잘 동작하는 것을 확인 할 수 있습니다.

curve 라는 항목이 있는데 이는 어떤 속도로 애니메이션 될지를 선택 할 수 있습니다.

 

아마도 2D 애니메이션을 해보신 분들이라면 대충 아실만한 내용입니다.

linear는 직선, bounce 는 bounce 형태의 곡선 뒤에 In, Out은  진입할떄인지, 빠질때인지의 그래프 방향성 등등을 나타냅니다.

 

AnimatedScale

다음은 사이즈 조절 입니다.

코드는 거의 동일합니다.

AnimatedScale(
  duration: const Duration(milliseconds: 300),
  scale: _counter%2==0?0.8:1.5,
  child: const Text(
    'You have pushed the button this many times:',
  ),
),

scale 도 1.0이 원래 사이즈고 원하는데 맞춰서 확인 하실 수 있습니다.

 

AnimatedBuilder

이제 이 두가지를 합치기 위함입니다.

정확히는 한번에 여러가지 애니메이션을 복합적으로 넣기 위함 입니다.

 

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _counter = 0;

  late AnimationController _animationController;
  late Animation<double> _animationScale;
  late Animation<double> _animationOpacity;

  @override
  void initState() {
    _animationController = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this);
    _animationController.forward();

    _animationScale = Tween(begin: 0.8, end: 1.5).animate(_animationController);
    _animationOpacity =
        Tween(begin: 0.2, end: 1.0).animate(_animationController);

    super.initState();
  }

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

  void _incrementCounter() {
    setState(() {
      _counter++;
      if(_counter%2==0){
        _animationController.forward();
      }
      else{
        _animationController.reverse();
      }
    });
  }

우선 AnimationController를 사용하기 위해서는 클래스가 SingleTickerProviderStateMixin을 구현 해야 합니다.

클래스 선언 상단에 붙어있습니다.

 

이후 전체적인것을 컨트롤할 AnimationController와 Scale용, Opacity용 Animation<double>를 각각 하나씩 만들어 줍니다.

initState에 있는 내용을 확인해 보시면 어느정도 감이 오실것 입니다.

AnimationController에 시간을 정해주고, vsync:this 항목은 SingleTickerProviderStateMixin 항목의 구현부분 입니다.

클래스가 저것을 구현하지 않는다면 AnimationController는 정상적으로 구동하지 않습니다.

각각 Animation은 시작값과 종료값 설정이 됩니다.

 

이후 dispose를 꼭 override해서 AnimationController도 같이 dispose해줘야 합니다.

 

_incrementCounter에서는 정방향/역방향 애니메이션을 선택해 줍니다.

선택방법은 이전과 동일하게 홀수/짝수 입니다.

 

AnimatedBuilder(
  animation: _animationController,
  builder: (context, child) {
    return Transform(
      transform: Matrix4.identity()
        ..scale(_animationScale.value)
        ..scale(_animationScale.value),
      child: Opacity(
        opacity: _animationOpacity.value,
        child: const Text(
          'You have pushed the button this many times:',
        ),
      ),
    );
  },
),

실제 AnimatedBuilder 위젯 부분입니다.