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

05 Dec 2023

flutter

velocity_x는 Flutter의 패키지 중 하나로, 애니메이션을 사용하여 위젯의 위치를 움직이는 데 도움을 줍니다. 이 기능을 사용하여 어떻게 위치 이동 애니메이션을 만들 수 있는지 배워보겠습니다.

1. velocity_x 패키지 추가하기

먼저, pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. dependencies 섹션에 다음과 같이 작성해주세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.3.0

저장한 뒤, 터미널에서 명령어 flutter packages get을 실행하여 패키지를 다운로드 받아주세요.

2. 위치 이동 애니메이션 적용하기

위치 이동 애니메이션을 만들기 위해 다음과 같은 코드를 작성해보겠습니다.

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

class PositionAnimation extends StatefulWidget {
  @override
  _PositionAnimationState createState() => _PositionAnimationState();
}

class _PositionAnimationState extends State<PositionAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Offset> _animation;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(reverse: true);

    _animation = Tween<Offset>(
      begin: Offset(0, 0),
      end: Offset(0.5, 0),
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Position Animation'),
      ),
      body: Center(
        child: VxAnimatedBox(
          child: FlutterLogo(size: 100),
          builder: (context, child, value) {
            return Transform.translate(
              offset: Offset(value.velocity <= 0 ? 0 : value.value, 0),
              child: child,
            );
          },
          animate: _animation,
          duration: Duration(seconds: 2),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PositionAnimation(),
    );
  }
}

위 코드에서는 velocity_x 패키지의 VxAnimatedBox 위젯을 사용하여 애니메이션을 구현하였습니다. VxAnimatedBox 위젯은 builder 속성을 통해 움직이는 위치 값을 전달받아 원하는 위치로 이동시킬 수 있습니다.

3. 실행해보기

위 코드를 실행하여 위치 이동 애니메이션의 동작을 확인해보세요. 애니메이션의 속도, 시작 위치, 종료 위치 등을 조정하여 원하는 대로 애니메이션을 커스터마이징할 수 있습니다.

결론

velocity_x 패키지를 사용하여 Flutter에서 위치 이동 애니메이션을 만드는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으니, 창의적인 앱 개발에 활용해보시기 바랍니다.

1. velocity_x 패키지 추가하기

2. 위치 이동 애니메이션 적용하기

3. 실행해보기

결론

참고 자료