[flutter] getX 함수를 사용하여 터치 이벤트에 따른 시간에 따른 애니메이션 이동하기

04 Dec 2023

flutter

Flutter의 getX 함수를 사용하면 터치 이벤트에 따라 시간에 따라 애니메이션을 이동시킬 수 있습니다. getX 함수는 GetX 패키지의 한 가지 기능으로, 사용자의 터치 이벤트를 추적하고 그에 따라 애니메이션을 조작할 수 있게 해줍니다.

GetX 패키지 설치하기

먼저, GetX 패키지를 설치해야 합니다. pubspec.yaml 파일에 GetX 패키지를 추가하고, 디펜던시를 업데이트합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

애니메이션을 위한 컨트롤러 설정하기

GetX 함수를 사용하여 애니메이션을 조작하기 위해, 먼저 애니메이션을 위한 컨트롤러를 설정해야 합니다. 이 컨트롤러는 애니메이션의 현재 위치와 시간을 추적합니다.

import 'package:get/get.dart';

class AnimationController extends GetxController {
  double position = 0.0;
  double time = 0.0;

  void updatePosition(double newPosition) {
    position = newPosition;
  }

  void updateTime(double newTime) {
    time = newTime;
  }
}

애니메이션 이동 구현하기

이제 애니메이션 이동을 구현할 수 있습니다. 예를 들어, 사용자가 화면을 터치했을 때, updatePosition 메서드를 호출하여 애니메이션의 위치를 업데이트하고, updateTime 메서드를 호출하여 애니메이션의 시간을 업데이트합니다.

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

class AnimationScreen extends StatelessWidget {
  final AnimationController animationController = Get.put(AnimationController());

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUpdate: (tapDetails) {
        double newPosition = tapDetails.globalPosition.dx;
        animationController.updatePosition(newPosition);

        double newTime = DateTime.now().millisecondsSinceEpoch.toDouble();
        animationController.updateTime(newTime);
      },
      child: Container(
        width: double.infinity,
        height: 200.0,
        color: Colors.blue,
        child: Obx(() {
          return AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
            transform: Matrix4.translationValues(
              animationController.position,
              0.0,
              0.0,
            ),
            child: Text(
              'Animation',
              style: TextStyle(
                fontSize: 24.0,
                color: Colors.white,
              ),
            ),
          );
        }),
      ),
    );
  }
}

이 예제에서는 사용자의 터치 이벤트에 따라 position 변수와 time 변수를 업데이트하고, AnimatedContainer 위젯의 transform 속성을 사용하여 애니메이션 이동을 구현합니다. 애니메이션의 시간과 위치가 변경될 때마다 AnimatedContainer의 애니메이션이 업데이트됩니다.

이제 위젯을 사용하여 화면에 애니메이션 이동을 구현할 수 있습니다.