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

05 Dec 2023

flutter

Flutter는 Google에서 개발한 크로스 플랫폼 프레임워크로, 아름답고 반응성 있는 앱을 빠르게 개발할 수 있습니다. VelocityX는 Flutter용 UI 엔진으로 다양한 UI 요소를 쉽게 작성할 수 있도록 도와줍니다. 이 블로그 포스트에서는 Flutter와 VelocityX를 사용하여 회전 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. VelocityX 패키지 설정하기

먼저, Flutter 프로젝트에서 VelocityX 패키지를 사용할 수 있도록 설정해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 다음과 같이 VelocityX를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.2.0

패키지를 추가한 후, 터미널 또는 명령 프롬프트에서 flutter packages get 명령을 실행하여 패키지를 다운로드하고 프로젝트를 업데이트합니다.

2. 회전 애니메이션 만들기

회전 애니메이션을 만들기 위해 VxAnimatedBox 위젯을 사용합니다. 아래와 같은 코드를 작성해보세요:

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: Scaffold(
        appBar: AppBar(
          title: Text('Rotation Animation Example'),
        ),
        body: Center(
          child: VxAnimatedBox(
            animations: {
              'rotate': Tween<double>(begin: 0, end: 2 * 3.14)
                  .animate(CurvedAnimation(
                      parent: VxHelpers.springAnimationController(),
                      curve: Curves.easeInOut)),
            },
            duration: Duration(seconds: 2),
            builder: (context, _, __) => VxBox(
              child: FlutterLogo(size: 100),
            ).rotate(_.get('rotate').value).make(),
          ),
        ),
      ),
    );
  }
}

위의 코드는 회전 애니메이션을 생성하는 예제입니다. VxAnimatedBox 위젯은 duration 속성을 설정하여 애니메이션의 지속 시간을 지정합니다. animations 맵 안에 'rotate' 키와 Tween 클래스를 사용하여 회전 애니메이션을 정의합니다. 애니메이션이 끝나고 다시 시작되도록 하려면 VxHelpers.springAnimationController()를 사용하여 애니메이션 컨트롤러를 생성합니다.

VxBox 위젯은 회전 애니메이션을 적용하고자 하는 위젯(예: FlutterLogo)을 감싸는 역할을 합니다.

3. 앱 실행하기

위의 코드를 작성하고 실행하면, 앱에서 회전 애니메이션을 볼 수 있습니다. Tween 클래스를 사용하여 시작과 끝 값을 지정하고 VxBox와 VxAnimatedBox를 이용하여 애니메이션을 만들어냅니다.

이것으로 Flutter와 VelocityX를 사용하여 회전 애니메이션을 만들 수 있습니다. VelocityX 패키지를 사용하면 편리하고 강력한 UI 요소를 더 쉽게 작성할 수 있습니다. Flutter와 VelocityX를 함께 사용하여 다양한 애니메이션 효과를 구현해보세요!

1. VelocityX 패키지 설정하기

2. 회전 애니메이션 만들기

3. 앱 실행하기

참고 자료