[flutter] 뷰 애니메이션을 통한 플러터 앱의 시각적인 효과 구현 방법

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 앱을 개발할 때, 애니메이션은 사용자에게 더 풍부하고 매력적인 사용자 경험(UX)을 제공하는 중요한 요소입니다. 뷰 애니메이션을 활용하면 앱의 시각적인 효과를 극대화할 수 있습니다. 이번 포스트에서는 플러터를 사용하여 뷰 애니메이션을 구현하는 방법에 대해 살펴보겠습니다.

애니메이션을 위한 기본적인 개념 이해

뷰 애니메이션을 구현하기 전에, 애니메이션에 대한 기본적인 이해가 필요합니다. 플러터에서 애니메이션을 구현하려면 다음과 같은 개념을 이해해야 합니다.

애니메이션 컨트롤러: 애니메이션 상태를 제어하고 애니메이션을 시작하거나 중지하는 역할을 합니다.
애니메이션 객체: 애니메이션의 세부 속성(예: 이동, 회전, 크기 조절 등)을 정의합니다.
애니메이션 빌더: 실제 애니메이션을 작성하는 코드를 구현합니다.

플러터에서 뷰 애니메이션 구현하기

플러터에서 뷰 애니메이션을 구현하려면 애니메이션을 위한 위젯을 생성하고, 그 위젯에 애니메이션을 적용해야 합니다. 아래의 예제 코드를 통해 간단한 애니메이션을 도식화해 보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('애니메이션 예제'),
        ),
        body: Center(
          child: MyAnimatedWidget(),
        ),
      ),
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {
        
        });
      });
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Center(
          child: Container(
            height: _animation.value,
            width: _animation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }

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

위의 코드는 플러터에서 애니메이션을 구현하는 간단한 예제입니다. 이 예제에서는 AnimationController 및 AnimatedBuilder와 같은 클래스를 사용하여 뷰 애니메이션을 구현합니다.

다음 포스트에서는 더 복잡한 뷰 애니메이션 및 애니메이션 간의 상호작용을 구현하는 방법에 대해 자세히 살펴보겠습니다.

참고 자료

Flutter 애니메이션 공식 문서