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

05 Dec 2023

flutter

개요

이번 글에서는 Flutter에서 Velocity_X 패키지를 사용하여 모션 블러 애니메이션을 만드는 방법을 알아보겠습니다. 애니메이션을 통해 인터페이스를 부드럽게 전환하는 모션 블러 효과를 만들 수 있습니다.

Velocity_X 패키지 소개

Velocity_X는 Flutter로 개발된 애니메이션 및 모션 이펙트 라이브러리입니다. 이 패키지를 사용하면 간단하고 직관적인 코드로 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.

모션 블러 애니메이션 만들기

다음은 Velocity_X를 사용하여 모션 블러 애니메이션을 만드는 예시 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Motion Blur Animation'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              VelocityX(context).animate(
                duration: const Duration(milliseconds: 500),
                blur: true,
                curve: Curves.easeInOut,
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                ),
              );
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 VelocityX 클래스의 animate 메서드를 사용하여 애니메이션을 생성합니다. animate 메서드는 duration을 설정하여 애니메이션의 지속 시간을 지정할 수 있습니다. blur 매개변수를 true로 설정하여 모션 블러 효과를 켤 수 있습니다. curve 매개변수를 사용하여 애니메이션의 속도 곡선을 조절할 수도 있습니다.

애니메이션을 주는 위젯이 포함된 GestureDetector 위젯으로 감싸주어 터치 이벤트에 반응할 수 있도록 합니다. 여기서는 터치할 때마다 애니메이션이 실행되도록 설정되었습니다.

결론

Velocity_X 패키지를 사용하면 간단하게 모션 블러 애니메이션을 구현할 수 있습니다. 위 예시 코드를 참고하여 다양한 애니메이션 효과를 적용하여 Flutter 앱을 보다 생동감있게 만들어보세요.

참고 자료

Velocity_X 패키지 문서