[flutter] 애니메이션 심화: 물리적인 움직임을 위한 애니메이션 구현

11 Dec 2023

flutter

이번 포스팅에서는 Flutter를 사용하여 물리적인 움직임을 시뮬레이션하는 애니메이션을 구현하는 방법에 대해 살펴보겠습니다.

애니메이션 및 물리 시뮬레이션 라이브러리 사용

일반적인 애니메이션의 경우, Flutter에서 제공하는 애니메이션 라이브러리를 사용하여 간단하게 구현할 수 있습니다. 하지만 물리 시뮬레이션을 필요로 하는 경우, flutter_physics와 같은 물리 시뮬레이션 라이브러리를 추가로 사용해야 합니다.

import 'package:flutter_physics/flutter_physics.dart';

물리 시뮬레이션을 적용한 애니메이션 구현

다음은 물리 시뮬레이션을 적용하여 물리적인 움직임을 구현하는 예시입니다. 여기서는 공을 시뮬레이션하여 바운스 모션을 구현하는 예시를 다룰 것입니다.

class BouncingBallWidget extends StatefulWidget {
  @override
  _BouncingBallWidgetState createState() => _BouncingBallWidgetState();
}

class _BouncingBallWidgetState extends State<BouncingBallWidget> {
  PhysicsSimulation _simulation;
  ValueNotifier<double> _position;

  @override
  void initState() {
    super.initState();
    final spring = SpringDescription.withDampingRatio(
        mass: 1, stiffness: 100, ratio: 0.95);
    _simulation = SpringSimulation(spring, 0, 300, 0);
    _position = ValueNotifier<double>(_simulation.x(0));
    _simulation.addListener(_onTick);
  }

  void _onTick() {
    _position.value = _simulation.x(_simulation.time);
  }

  @override
  void dispose() {
    _simulation.removeListener(_onTick);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _position,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(0, _position.value),
            child: Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
          );
        },
      ),
    );
  }
}

마치며

물리 시뮬레이션을 적용한 애니메이션은 사용자 경험을 향상시키고 앱에 현실감을 더해줄 수 있습니다. Flutter를 사용하여 이러한 물리적인 움직임을 구현하는 것은 사용자들에게 더욱 흥미로운 애플리케이션을 제공할 수 있는 좋은 방법 중 하나입니다.