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

05 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 애니메이션 효과를 구현할 수 있습니다. Velocity_X는 Flutter에서 반응형 UI를 구현할 때 사용되는 다양한 유틸리티 메서드를 제공하는 라이브러리입니다. 이를 사용하여 간단하게 파도 애니메이션을 구현할 수 있습니다.

Velocity_X 라이브러리 설치하기

먼저, 프로젝트에 Velocity_X 라이브러리를 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 아래의 코드를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^3.0.1

그리고 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

파도 애니메이션 구현하기

이제 파도 애니메이션을 구현해보겠습니다. 먼저, Stateful 위젯을 생성하고 build 메서드에서 파도 애니메이션을 구현합니다.

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

class WaveAnimation extends StatefulWidget {
  @override
  _WaveAnimationState createState() => _WaveAnimationState();
}

class _WaveAnimationState extends State<WaveAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

  @override
  Widget build(BuildContext context) {
    return VxContinuousAnimation(
      builder: (context, time) {
        return Transform.translate(
          offset: Offset(0, 20 * (1 - (time - time.floor()))),
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.white],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
          ),
        );
      },
      controller: _animationController,
    );
  }

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

위의 코드에서는 AnimationController를 사용하여 애니메이션을 제어합니다. VxContinuousAnimation 위젯은 builder 콜백을 통해 애니메이션의 상태를 가져올 수 있습니다. Transform.translate를 사용하여 컨테이너의 위치를 변경하고 파도 모양의 그래디언트를 적용합니다.

WaveAnimation 위젯 사용하기

WaveAnimation 위젯을 사용하기 위해서는 해당 위젯을 다른 위젯에서 호출하면 됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Wave Animation Demo')),
      body: Center(child: WaveAnimation()),
    ),
  ));
}

위의 코드에서는 WaveAnimation 위젯을 Center 위젯 안에 배치하여 화면 중앙에 애니메이션을 표시합니다.

결론

Velocity_X 라이브러리를 사용하여 Flutter에서 파도 애니메이션을 만들었습니다. 이를 통해 반응형 UI를 구현하고 다양한 애니메이션 효과를 쉽게 추가할 수 있습니다. Velocity_X의 다양한 메서드를 탐색하여 더 다양한 애니메이션을 구현해 보세요.

Velocity_X 라이브러리 설치하기

파도 애니메이션 구현하기

WaveAnimation 위젯 사용하기

결론

참고 자료