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

05 Dec 2023

flutter

로그인 화면 또는 앱 소개 화면에서 동적이고 매력적인 로고 애니메이션을 만들고 싶다면, Flutter의 velocity_x 패키지를 사용해보세요. velocity_x는 Flutter 개발자를 위한 강력한 UI 라이브러리이며, 다양한 애니메이션 및 효과를 손쉽게 구현할 수 있습니다.

이제 velocity_x를 사용하여 로고 로테이션 애니메이션을 만들어보겠습니다. 먼저, velocity_x 패키지를 프로젝트에 추가하세요. pubspec.yaml 파일에 의존성을 추가하는 방법은 다음과 같습니다:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

패키지를 추가했다면, 다음과 같이 애니메이션을 구현할 수 있습니다:

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

class LogoAnimation extends StatefulWidget {
  @override
  _LogoAnimationState createState() => _LogoAnimationState();
}

class _LogoAnimationState extends State<LogoAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

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

  @override
  Widget build(BuildContext context) {
    return VxAnimatedBox(
      duration: Duration(seconds: 2),
      curve: Curves.linear,
      builder: (context, animation, child) {
        return Transform.rotate(
          angle: animation.value * 2 * 3.14159,  // 로테이션 애니메이션을 위한 각도 계산
          child: child,
        );
      },
      child: FlutterLogo(
        size: 100,
      ),
    );
  }
}

// 화면에 애니메이션을 추가하려면, 다음과 같이 사용하세요:

LogoAnimation().p16().centered(),

위의 예제에서는 VelocityX 패키지의 VxAnimatedBox 위젯과 Flutter의 Transform.rotate 위젯을 결합하여 로고 로테이션 애니메이션을 만들었습니다. VxAnimatedBox 위젯은 애니메이션을 적용할 요소를 선택하고, builder 콜백에서 애니메이션을 조작하는 로직을 작성할 수 있게 해줍니다. Transform.rotate 위젯은 해당 애니메이션을 요소에 적용합니다.

애니메이션을 프로젝트에 적용하려면, 위의 예제 코드를 알맞게 수정하고 적절한 위치에 배치하면 됩니다. 이제 로고 로테이션 애니메이션을 확인할 수 있을 것입니다.

velocity_x 패키지의 다른 기능과 애니메이션 이외의 다양한 UI 요소를 사용하는 방법에 대해서는 velocity_x의 공식 문서를 참조하세요.

velocity_x 패키지: https://pub.dev/packages/velocity_x
Flutter 공식 문서: https://flutter.dev/docs