[flutter] 플러터 애니메이션을 사용한 모션 그래픽 효과 구현 방법

11 Dec 2023

flutter

플러터(Flutter)는 플랫폼 간 모바일 앱을 개발하기 위한 Google의 오픈 소스 UI툴킷으로, 다양한 애니메이션을 제공하여 앱에 모션 그래픽 효과를 구현하는 데 유용합니다. 이번 블로그에서는 플러터의 애니메이션을 사용하여 모션 그래픽 효과를 구현하는 방법에 대해 알아보겠습니다.

애니메이션 기본 개념

애니메이션은 UI 요소를 부드럽게 변화시켜 화면에 동적인 효과를 주는 기술입니다.

애니메이션 구현 방법

플러터에서 애니메이션을 구현하는 방법은 다양합니다. 가장 일반적인 방법은 AnimationController와 Animation을 사용하는 것입니다.

아래는 플러터에서 애니메이션을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Animation'),
      ),
      body: Center(
        child: Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        ),
      ),
    );
  }

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

화면 전환 애니메이션

화면 전환 애니메이션은 화면이 전환되는 동안 부드러운 효과를 주어 사용자 경험을 향상시킵니다.

페이드 인/아웃 애니메이션

페이드 인/아웃 애니메이션은 UI 요소가 서서히 나타나거나 사라지는 효과를 주어 사용자에게 부드러운 인상을 남깁니다.

플러터 애니메이션을 활용하여 다양한 모션 그래픽 효과를 구현할 수 있으며, UI에 동적이고 생동감있는 경험을 제공할 수 있습니다.

참고문헌:

목차

애니메이션 기본 개념

애니메이션 구현 방법

화면 전환 애니메이션

페이드 인/아웃 애니메이션