[flutter] velocity_x를 사용하여 어떻게 여러 애니메이션을 조합할 수 있는가?

05 Dec 2023

flutter

애니메이션은 모바일 앱을 개발하는 데 매우 중요한 부분입니다. Flutter에서는 다양한 애니메이션 라이브러리가 제공되는데, 그 중 velocity_x는 강력하고 직관적인 방법으로 애니메이션을 조작할 수 있게 해줍니다.

velocity_x는 VelocityX 패키지의 일부로 제공되는 유틸리티 라이브러리입니다. 여러 애니메이션을 쉽게 조합하고, 동시에 실행하고, 애니메이션의 일부를 반복하거나 루프를 만들 수 있습니다.

아래는 velocity_x를 사용하여 여러 애니메이션을 조합하는 예제입니다.

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

class CombinedAnimationExample extends StatefulWidget {
  @override
  _CombinedAnimationExampleState createState() => _CombinedAnimationExampleState();
}

class _CombinedAnimationExampleState extends State<CombinedAnimationExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Combined Animation Example'),
      ),
      body: VStack(
        [
          VxAnimatedBox(
            duration: Duration(seconds: 1),
            height: 200,
            width: 200,
            alignment: Alignment.center,
            child: 'Scale Animation'.text.white.xl2.make(),
          ).rotate(_controller.drive(Tween(begin: 0.0, end: 2.0).animate(_controller))),
          20.heightBox,
          VxAnimatedBox(
            duration: Duration(seconds: 1),
            height: 200,
            width: 200,
            alignment: Alignment.center,
            child: 'Opacity Animation'.text.white.xl2.make(),
          ).fadeIn(_controller.drive(Tween(begin: 0.0, end: 1.0).animate(_controller))),
        ],
        alignment: MainAxisAlignment.center,
        crossAlignment: CrossAxisAlignment.center,
      ).pSymmetric(v: 32, h: 16),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          _controller.reset();
          _controller.forward();
        },
      ),
    );
  }
}

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

위의 예제에서는 첫 번째 VxAnimatedBox 위젯에 대해 회전 애니메이션을 적용하고, 두 번째 VxAnimatedBox 위젯에 대해 페이드 인 (불투명도 변화) 애니메이션을 적용합니다. 모든 애니메이션은 AnimationController를 사용하여 제어됩니다.

이 예제에서는 FloatingActionButton을 누를 때마다 애니메이션을 시작합니다. AnimationController를 재설정하고, forward() 메서드를 호출하여 애니메이션을 재생합니다.

velocity_x는 다양한 애니메이션 종류와 메서드를 제공하므로, 개발자들은 자신의 앱에 적합한 애니메이션 조합을 만들 수 있습니다.

velocity_x에 대한 더 자세한 내용은 다음 링크를 참고하세요:

이것은 velocity_x를 사용하여 여러 애니메이션을 조합하는 방법에 대한 간단한 예제였습니다. velocity_x를 통해 애니메이션을 조작할 수 있는 많은 옵션을 탐색하고 실험해 보세요!