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

05 Dec 2023

flutter

Flutter는 디자인과 애니메이션을 구현하기 위해 다양한 라이브러리를 제공합니다. 그 중 하나인 velocity_x 라이브러리는 Flutter 위젯에 애니메이션을 적용하기 위한 강력한 도구입니다.

이번 예제에서는 velocity_x를 사용하여 BTW(Bounce, Tilt, Wobble) 애니메이션을 만드는 방법을 알아보겠습니다. BTW 애니메이션은 위젯이 바운스, 기울기 및 흔들림 효과를 가지며 움직이는 애니메이션입니다.

먼저, pubspec.yaml 파일에서 velocity_x를 추가합니다:

dependencies:
  velocity_x: ^1.2.1

다음으로, 해당 위젯에서 velocity_x를 import 합니다:

import 'package:velocity_x/velocity_x.dart';

이제 BTW 애니메이션을 만들어보겠습니다. 아래의 예제 코드를 참고하십시오:

class BTWAnimationWidget extends StatefulWidget {
  @override
  _BTWAnimationWidgetState createState() => _BTWAnimationWidgetState();
}

class _BTWAnimationWidgetState extends State<BTWAnimationWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _bounceAnimation;
  Animation<double> _tiltAnimation;
  Animation<double> _wobbleAnimation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );

    _bounceAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.bounceOut,
      ),
    );
    _tiltAnimation = Tween<double>(begin: -0.2, end: 0.2).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
    _wobbleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.elasticOut,
      ),
    );

    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BTW Animation"),
      ),
      body: Center(
        child: VelocityX(
          builder: (context, velocityContext, child) => Transform.scale(
            scale: _bounceAnimation.value,
            child: child,
          ).tilt(_tiltAnimation.value).wobble(
              _wobbleAnimation.value), // VelocityX를 사용하여 애니메이션을 적용합니다.
          duration: Duration(seconds: 1),
          animate: true, // 애니메이션을 적용하도록 설정합니다.
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                "Hello",
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 VelocityX 위젯을 사용하여 BTW 애니메이션을 구현합니다. 해당 위젯은 builder 콜백 함수를 통해 애니메이션을 적용할 위젯(child)을 반환하고, duration과 animate 속성을 사용하여 애니메이션 속도와 시작 여부를 설정합니다.

위젯의 transform.scale, tilt, wobble 메서드에서 각각의 애니메이션을 적용합니다. Builder 메서드에서는 애니메이션의 값을 가져와서 사용하며, Curves 클래스를 사용하여 각각의 애니메이션에 적절한 커브를 설정합니다.

마지막으로, BTWAnimationWidget을 앱에 추가하고 실행해보면 BTW 애니메이션을 볼 수 있습니다.

이 글에서는 velocity_x 라이브러리를 사용하여 BTW 애니메이션을 만드는 방법을 알아보았습니다. velocity_x를 사용하면 간단하고 효과적인 애니메이션을 구현할 수 있습니다. 추가적인 정보는 velocity_x GitHub 페이지를 참조하십시오.