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

05 Dec 2023

flutter

velocity_x는 Flutter에서 애니메이션을 구현하는 데 도움이 되는 라이브러리입니다. 이 라이브러리는 매우 간단하고 직관적인 인터페이스를 제공하며, 다양한 애니메이션 효과를 적용할 수 있습니다. 이제 velocity_x를 사용하여 크기 조정 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. velocity_x 패키지 추가하기

먼저, velocity_x 패키지를 사용하기 위해 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  velocity_x: ^1.0.0

패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드하고 업데이트해주세요.

2. 크기 조정 애니메이션 적용하기

이제, 크기 조정 애니메이션을 적용할 위젯을 생성하고 해당 위젯을 화면에 추가해야 합니다.

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

class SizeAnimationWidget extends StatefulWidget {
  @override
  _SizeAnimationWidgetState createState() => _SizeAnimationWidgetState();
}

class _SizeAnimationWidgetState extends State<SizeAnimationWidget>
    with SingleTickerProviderStateMixin {
  AnimationController? _animationController;
  Animation<double>? _sizeAnimation;

  @override
  void initState() {
    super.initState();

    // 애니메이션 컨트롤러 초기화
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );

    // 크기 애니메이션 정의
    _sizeAnimation = Tween<double>(begin: 100, end: 200).animate(
      CurvedAnimation(
        parent: _animationController!,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    // 애니메이션 컨트롤러 정리
    _animationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Size Animation'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // 애니메이션 시작 또는 중지
            if (_animationController?.status == AnimationStatus.completed) {
              _animationController?.reverse();
            } else {
              _animationController?.forward();
            }
          },
          child: VxBox(
            width: _sizeAnimation?.value,
            height: _sizeAnimation?.value,
            child: FlutterLogo(),
          ).make(),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SizeAnimationWidget(),
  ));
}

위 코드에서는 _animationController와 _sizeAnimation을 사용하여 크기 변화 애니메이션을 만듭니다. initState 메서드에서 _animationController를 초기화하고, _sizeAnimation을 설정합니다. 애니메이션 컨트롤러는 애니메이션을 제어하고, 크기 애니메이션은 시작 값과 끝 값을 설정하여 정의합니다.

그리고 build 메서드에서 VxBox 위젯을 사용하여 애니메이션을 적용할 위젯을 생성합니다. VxBox는 velocity_x 라이브러리의 일부입니다. width와 height 속성을 _sizeAnimation?.value로 설정하여 애니메이션에 따라 크기가 변경되도록 합니다. 클릭 이벤트가 발생하면 _animationController를 시작하거나 중지하여 애니메이션을 제어합니다.

마지막으로, SizeAnimationWidget을 앱의 홈으로 설정하여 화면에 표시합니다.

이제 프로젝트를 실행하고 애니메이션을 확인해보세요. 탭을 클릭할 때마다 크기가 자연스럽게 변화하는 것을 확인할 수 있을 것입니다.

더 많은 velocity_x 기능을 사용하여 다양한 애니메이션 효과를 적용할 수 있습니다. velocity_x는 강력하고 유연한 애니메이션 라이브러리로서, Flutter 앱의 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

velocity_x GitHub 저장소