[flutter] 애니메이션의 타입과 종류

11 Dec 2023

flutter

애니메이션 타입 소개

애니메이션은 사용자 경험을 향상시키고 앱에 생동감을 불어넣는 데 중요한 역할을 합니다. Flutter는 다양한 애니메이션 타입을 제공하며, 이를 통해 화면 전환, 위젯 속성 변경, 그리고 모션 효과를 손쉽게 구현할 수 있습니다.

애니메이션을 구현하는 주요 방법으로는 AnimatedContainer, AnimatedOpacity, AnimatedPositioned, AnimatedCrossFade 등의 위젯을 활용하는 방법이 있습니다.

애니메이션 종류

1. 애니메이션 컨트롤러

애니메이션을 제어하고 조작하는 데 사용됩니다. 시작, 중지, 다시 시작, 그리고 애니메이션의 상태를 확인하는 등의 기능을 수행합니다.

2. 커스텀 애니메이션

Flutter에서 제공하는 애니메이션 외에도, 사용자가 직접 애니메이션을 커스터마이징하여 구현할 수 있습니다. 이를 통해 앱에 특별한 모션 효과를 적용할 수 있습니다.

3. Hero 애니메이션

화면 전환 시, 같은 위젯 또는 이미지를 부드럽게 전환시켜주는 애니메이션입니다. 사용자 경험을 향상시키기 위해 자주 활용됩니다.

4. 페이지 라우트 애니메이션

화면 전환 시 나타나는 전환 효과를 의미하며, 화면 전환에 동적이고 생동감 있는 느낌을 부여할 수 있습니다.

코드 예시

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('애니메이션 예시'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 애니메이션 코드 작성
            },
            child: Text('애니메이션 시작'),
          ),
        ),
      ),
    ),
  );
}

// TODO: 애니메이션 코드 작성

목차