[flutter] 플러터(Flutter)로 애니메이션 구현하기

18 Dec 2023

flutter

플러터는 Google에서 개발한 모바일 앱 개발 프레임워크로, 애니메이션을 구현하는 데 매우 강력한 기능을 제공합니다. 애니메이션을 통해 앱의 사용자 경험을 향상시키고, 앱의 인터페이스 요소들을 부드럽게 이동시킬 수 있습니다.

이번 포스트에서는 플러터를 사용하여 간단한 애니메이션을 구현하는 방법을 소개하겠습니다.

애니메이션을 위한 기본적인 구조

플러터에서 애니메이션을 구현하려면 기본적인 구조가 필요합니다. 먼저 AnimationController와 CurvedAnimation을 설정한 후, Tween을 사용하여 애니메이션의 시작과 끝을 정의합니다. 마지막으로, AnimatedBuilder나 AnimatedContainer를 사용하여 화면에 애니메이션을 적용합니다.

예제 코드

다음은 간단한 애니메이션을 구현하는 플러터 코드입니다. 여기서는 원 모양의 컨테이너를 터치할 때마다 크기가 변경되는 애니메이션을 구현하였습니다.

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(vsync: this, duration: Duration(seconds: 1));
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('애니메이션 예제'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            _controller.forward();
          },
          child: AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return Container(
                width: 100 * _animation.value,
                height: 100 * _animation.value,
                color: Colors.blue,
              );
            },
          ),
        ),
      ),
    );
  }
}

결론

이제 여러분은 위의 코드를 참고하여 플러터를 사용하여 간단한 애니메이션을 구현하는 방법을 알게 되었습니다. 앞으로 이를 응용하여 다양한 애니메이션 효과를 구현해보시기 바랍니다!

애니메이션을 위한 기본적인 구조

예제 코드

결론

참고 문헌