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

05 Dec 2023

flutter

이 튜토리얼에서는 Flutter에서 velocity_x 패키지를 사용하여 슈터 게임 애니메이션을 만드는 방법을 알아보겠습니다.

velocity_x란?

velocity_x는 Flutter에서 사용할 수 있는 간단하고 직관적인 레이아웃 및 스타일링 패키지입니다. 이 패키지를 사용하면 단 몇 줄의 코드만으로도 동적인 애니메이션을 만들 수 있습니다.

슈터 게임 애니메이션 만들기

먼저, velocity_x 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 추가하십시오:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.4.1

패키지를 추가한 후, 다음과 같은 코드를 작성하여 슈터 게임 애니메이션을 만들 수 있습니다.

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

class ShooterAnimation extends StatefulWidget {
  @override
  _ShooterAnimationState createState() => _ShooterAnimationState();
}

class _ShooterAnimationState extends State<ShooterAnimation> with TickerProviderStateMixin {
  AnimationController _animationController;

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

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: VStack(
        [
          FlutterLogo(
            size: 200,
          ).rotateAnimation(
            angle: _animationController,
            duration: Duration(milliseconds: 500),
          ),
          20.heightBox,
          'Shooter Game'.text.xl3.bold.make(),
        ],
        crossAlignment: CrossAxisAlignment.center,
      ),
    );
  }
}

위 코드에서 ShooterAnimation 위젯은 StatefulWidget을 상속하고 TickerProviderStateMixin을 사용하여 애니메이션을 제어합니다. initState() 메서드에서 AnimationController를 초기화하고 애니메이션을 반복하도록 설정합니다. dispose() 메서드에서는 애니메이션 컨트롤러를 dispose합니다.

build() 메서드에서는 Center 위젯을 사용하여 화면 중앙에 애니메이션을 배치합니다. VStack 위젯을 사용하여 FlutterLogo와 ‘Shooter Game’ 텍스트를 세로로 정렬하고 간격을 조정합니다. rotateAnimation() 메서드를 통해 FlutterLogo를 회전 애니메이션으로 만듭니다. 애니메이션에는 AnimationController와 duration이 설정됩니다.

이제 ShooterAnimation 위젯을 적절한 위치에서 호출하여 슈터 게임 애니메이션을 화면에 출력할 수 있습니다.

이것으로 velocity_x를 사용하여 슈터 게임 애니메이션을 만드는 방법을 알아보았습니다. velocity_x 패키지는 여러 가지 다른 효과와 애니메이션을 제공하므로, 다른 애니메이션을 시도해보고 필요에 따라 커스텀할 수도 있습니다.

참고 자료

velocity_x 패키지