[flutter] 플러터 velocity_x를 활용한 다양한 애니메이션 효과 적용하기

14 Dec 2023

flutter

Velocity_X는 Flutter에서 UI 레이아웃 및 애니메이션을 쉽게 작성할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리를 사용하면 간단한 코드로 다양한 애니메이션 효과를 쉽게 적용할 수 있습니다. 이번 포스트에서는 Velocity_X를 사용하여 다양한 애니메이션 효과를 살펴보고, 코드 예시를 통해 각각의 효과를 적용하는 방법을 알아보겠습니다.

1. Velocity_X란?

Velocity_X는 Flutter 앱의 UI를 더 쉽게 구축하고 관리할 수 있도록 도와주는 라이브러리로, 다양한 애니메이션 및 레이아웃을 더 쉽게 작성할 수 있도록 도와줍니다.

2. 다양한 애니메이션 효과

2.1 Fade 애니메이션

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('Fade Animation Example'),
        ),
        body: Center(
          child: 'Fade Animation'.text.xl2.make().p16().box.red500.roundedLg.shadow2xl.make().p16().fadeIn(duration: 1.seconds),
        ),
      ),
    );
  }
}

위의 예시는 Velocity_X를 사용하여 Fade 애니메이션을 적용하는 예시입니다. 적용된 애니메이션은 1초 동안에 걸쳐 투명도가 변화하면서 나타납니다.

2.2 Bounce 애니메이션

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('Bounce Animation Example'),
        ),
        body: Center(
          child: 'Bounce Animation'.text.xl2.make().p16().box.blue500.roundedLg.shadow2xl.make().p16().bounce(duration: 1.seconds),
        ),
      ),
    );
  }
}

위의 예시는 Velocity_X를 사용하여 Bounce 애니메이션을 적용하는 예시입니다. 지정된 시간 동안 위젯이 반복적으로 튀어오르는 애니메이션 효과가 적용됩니다.

3. 결론

Velocity_X를 사용하면 Flutter 앱에 다양한 애니메이션 효과를 손쉽게 적용할 수 있습니다. 각 애니메이션은 간단한 코드로 구현할 수 있으며, UI에 화려하고 동적인 효과를 쉽게 추가할 수 있습니다. Velocity_X 라이브러리를 활용하여 앱의 UI/UX를 더욱 향상시켜보세요.