[flutter] velocity_x를 사용하여 어떻게 이모티콘 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

개요

Flutter는 다양한 UI 애니메이션을 구현하는 데 도움을 주는 다양한 패키지를 제공합니다. 그 중 하나인 velocity_x를 사용하여 이모티콘 애니메이션을 만들어 보겠습니다.

velocity_x 패키지 설치

우선 프로젝트의 pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. dependencies: 항목에 아래와 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.2.0

그리고 이후에 패키지를 가져와야 합니다. Flutter 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.

flutter pub get

이모티콘 애니메이션 구현

이제 애니메이션을 구현해 보겠습니다. 먼저 애니메이션에 사용할 이모티콘 이미지를 가져와야 합니다. 원하는 이모티콘 이미지를 프로젝트 디렉토리의 assets 폴더에 복사합니다.

이모티콘 애니메이션을 구현하기 위해 아래의 코드를 작성해 보겠습니다.

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

class EmojiAnimation extends StatefulWidget {
  @override
  _EmojiAnimationState createState() => _EmojiAnimationState();
}

class _EmojiAnimationState extends State<EmojiAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return VxBox(
      child: Image.asset('assets/emoji.png'),
    )
        .withDecoration(BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          color: Colors.yellow,
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 10,
            ),
          ],
        ))
        .animate(
          _animationController,
          Curves.easeInOut,
          duration: Duration(seconds: 1),
        )
        .make()
        .p16();
  }

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

이제 EmojiAnimation 위젯을 애니메이션을 적용하고 싶은 화면에 추가하면 됩니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이모티콘 애니메이션'),
      ),
      body: Center(
        child: EmojiAnimation(),
      ),
    );
  }
}

위와 같이 코드를 작성하면 velocity_x 패키지를 사용하여 이모티콘 애니메이션을 구현할 수 있습니다.

더 자세한 내용은 velocity_x 패키지의 공식 문서를 참조하십시오.