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

05 Dec 2023

flutter

이번에는 Flutter에서 velocity_x 패키지를 사용하여 이미지 애니메이션을 만드는 방법에 대해 알아보겠습니다. 이미지 애니메이션은 사용자에게 더 동적이고 흥미로운 사용자 경험을 제공하는 데 도움이 됩니다.

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

dependencies:
  flutter:
    sdk: flutter

  velocity_x: ^1.2.2

그런 다음, 이미지를 애니메이션화 할 StatefulWidget을 작성합니다. 이 예시에서는 gif 애니메이션을 사용할 것입니다.

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

class ImageAnimator extends StatefulWidget {
  @override
  _ImageAnimatorState createState() => _ImageAnimatorState();
}

class _ImageAnimatorState extends State<ImageAnimator>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

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

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'assets/animation.gif',
    ).animatedBox
        .scale(
          _animationController,
          // 애니메이션 시작 크기
          from: 1.0,
          // 애니메이션 끝 크기
          to: 1.5,
        )
        .rotation(
          _animationController,
          // 애니메이션 시작 각도
          from: 0.0,
          // 애니메이션 끝 각도
          to: 2 * 3.1415926,
        )
        .make();
  }
}

위의 코드에서는 Image.asset과 animatedBox 메서드를 사용하여 애니메이션을 구현합니다. animatedBox는 velocity_x의 확장 기능으로, AnimationController와 함께 사용하여 애니메이션을 적용할 수 있습니다. scale과 rotation 함수는 애니메이션의 크기와 각도를 제어하는 데 사용됩니다.

마지막으로, 애니메이션을 사용할 수 있는 페이지에서 ImageAnimator 위젯을 호출합니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Animation'),
      ),
      body: Center(
        child: ImageAnimator(),
      ),
    );
  }
}

pubspec.yaml 파일에 이미지 애니메이션에 사용될 gif 파일을 추가해야 합니다. assets 디렉토리를 만들고 애니메이션 gif 파일을 복사하여 붙여넣은 후, pubspec.yaml 파일에서 해당 디렉토리를 포함하도록 합니다.

이제 애니메이션 효과가 적용된 이미지를 볼 수 있습니다. velocity_x 패키지는 다양한 애니메이션 함수와 효과를 제공하므로, 원하는 스타일의 이미지 애니메이션을 만들 수 있습니다.

더 자세한 내용은 velocity_x 패키지의 공식 문서를 참조하시기 바랍니다.