[flutter] RotationTransition을 이용한 회전 애니메이션 구현하기

Flutter에서 회전 애니메이션을 쉽게 구현하려면 RotationTransition 위젯을 사용할 수 있습니다. 이 위젯은 애니메이션을 적용하여 자식 위젯을 회전시킬 수 있도록 해줍니다.

RotationTransition 위젯 소개

RotationTransition 위젯은 Animation 객체를 사용하여 자식 위젯을 회전시킵니다. 회전 애니메이션의 각도는 Animation 객체의 값에 따라 결정됩니다.

회전 애니메이션 구현 방법

다음은 RotationTransition 위젯을 사용하여 간단한 회전 애니메이션을 구현하는 방법입니다.

  1. 필요한 라이브러리 추가
    import 'package:flutter/material.dart';
    
  2. RotationTransition 구현
    class MyRotationAnimation extends StatefulWidget {
      @override
      _MyRotationAnimationState createState() => _MyRotationAnimationState();
    }
    
    class _MyRotationAnimationState extends State<MyRotationAnimation>
        with SingleTickerProviderStateMixin {
      late AnimationController _controller;
      late Animation<double> _animation;
    
      @override
      void initState() {
        super.initState();
        _controller =
            AnimationController(vsync: this, duration: Duration(seconds: 2));
        _animation = Tween(begin: 0.0, end: 2 * 3.14).animate(_controller)
          ..addListener(() {
            setState(() {});
          });
        _controller.repeat();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Rotation Transition Example'),
          ),
          body: Center(
            child: RotationTransition(
              turns: _animation,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            ),
          ),
        );
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    }
    
  3. MyRotationAnimation 위젯 사용
    void main() {
      runApp(MaterialApp(
        home: MyRotationAnimation(),
      ));
    }
    

위 코드를 실행하면 파란색 사각형이 360도 회전하는 애니메이션이 화면에 표시됩니다.

회전 애니메이션의 각도와 지속 시간은 사용자의 요구에 맞게 조정할 수 있습니다.

이렇게 RotationTransition 위젯을 활용하여 간단하게 회전 애니메이션을 구현할 수 있습니다.

결론

Flutter에서 RotationTransition을 사용하여 자식 위젯을 회전시키는 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 간단한 애니메이션 효과를 쉽게 추가할 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하세요.