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

05 Dec 2023

flutter

Flutter는 애니메이션을 구현하기 위해 다양한 방법을 제공합니다. 그 중 하나는 VelocityX 패키지를 사용하여 카드 애니메이션을 만드는 것입니다. VelocityX는 애니메이션을 쉽게 구현할 수 있도록 도와주는 플러터 패키지입니다.

이제, VelocityX를 사용하여 카드 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. VelocityX 패키지 추가하기

먼저, pubspec.yaml 파일에서 velocity_x 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 velocity_x를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^3.0.0

그리고 패키지를 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

2. 애니메이션 만들기

이제 애니메이션을 만들 준비가 되었습니다.

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

class CardAnimation extends StatefulWidget {
  @override
  _CardAnimationState createState() => _CardAnimationState();
}

class _CardAnimationState extends State<CardAnimation>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  late final Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _offsetAnimation = Tween<Offset>(
      begin: Offset(0, 1),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeOut,
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _animationController.forward();
      },
      child: SlideTransition(
        position: _offsetAnimation,
        child: Card(
          child: Container(
            height: 200,
            width: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 CardAnimation 클래스를 정의하고, AnimationController 및 Animation<Offset>을 사용하여 애니메이션을 구현합니다.

AnimationController는 애니메이션의 속도와 지속 시간을 설정하고, Animation<Offset>은 시작과 끝 위치를 정의합니다. 여기서는 카드가 화면 하단에서 올라오는 애니메이션을 구현하였습니다.

onTap 이벤트를 통해 애니메이션을 시작하고, SlideTransition 위젯을 사용하여 애니메이션이 적용되는 카드를 만듭니다.

3. 애니메이션 실행하기

이제 CardAnimation 위젯을 앱의 화면에 배치하여 애니메이션을 실행할 준비가 끝났습니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Animation'),
        ),
        body: Center(
          child: CardAnimation(),
        ),
      ),
    );
  }
}

이제 앱을 실행하면, 화면 중앙에 위치한 카드가 탭을 통해 애니메이션과 함께 화면 상단으로 이동합니다.

이것으로 VelocityX를 사용하여 카드 애니메이션을 만드는 방법이 완료되었습니다. VelocityX의 다른 기능들도 살펴보세요!