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

05 Dec 2023

flutter

Velocity_x는 Flutter에서 애니메이션을 쉽게 만들어주는 패키지 중 하나입니다. 이것을 사용하여 모토 애니메이션을 만들어보겠습니다.

먼저, 프로젝트의 pubspec.yaml 파일에 velocity_x 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x:

그런 다음, main.dart 파일에 다음과 같은 코드를 작성합니다.

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

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

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

class VelocityAnimation extends StatefulWidget {
  @override
  _VelocityAnimationState createState() => _VelocityAnimationState();
}

class _VelocityAnimationState extends State<VelocityAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _controller.repeat(reverse: true); // 애니메이션을 반복하도록 설정합니다.
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Velocity Animation"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          VxBox()
              .size(200, 200)
              .backgroundColor(Colors.blue)
              .animate(VelocityAnimationProperties.all,
                  duration: Duration(milliseconds: 500))
              .repeat(reverse: true)
              .velocityFromVector(
                  VelocityVector(50, degrees: 45), reverse: true)
              .make(),
        ],
      ),
    );
  }
}

이 코드에서는 VelocityAnimation 클래스를 만들어 애니메이션을 생성합니다. initState 메소드에서 AnimationController를 초기화하고, repeat 메소드를 사용하여 애니메이션을 반복하도록 설정합니다.

위 코드에서는 VxBox 위젯을 사용하여 블루 컬러의 박스를 그립니다. .animate 메소드와 .repeat 메소드를 사용하여 해당 위젯에 애니메이션 효과를 추가하고, .velocityFromVector 메소드를 사용하여 모토 애니메이션을 만듭니다.

실행하면, 화면에 블루 컬러의 박스가 대각선 방향으로 모토 애니메이션으로 움직이는 것을 볼 수 있습니다.

이것은 velocity_x 패키지를 사용하여 어떻게 모토 애니메이션을 만들 수 있는지의 간단한 예시입니다. velocity_x 패키지에는 다양한 애니메이션 기능과 효과가 있으므로, 자유롭게 활용해보세요!