[flutter] AnimatedContainer의 회전 속성을 이용한 회전 애니메이션 구현하기

08 Dec 2023

flutter

Flutter에서 UI 요소에 애니메이션을 쉽게 적용할 수 있는 AnimatedContainer 위젯은 매우 유용합니다. 이번 블로그 포스트에서는 AnimatedContainer의 transform 속성을 이용하여 회전 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

애니메이션 구현 방법

AnimatedContainer의 transform 속성을 사용하면 여러 종류의 변형(translation, rotation, scale) 애니메이션을 쉽게 적용할 수 있습니다. 이를 이용하여 위젯을 회전시키는 회전 애니메이션을 구현할 수 있습니다.

아래는 AnimatedContainer를 이용하여 회전 애니메이션을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('회전 애니메이션')),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isRotated = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isRotated = !_isRotated;
        });
      },
      child: AnimatedContainer(
        width: 200,
        height: 200,
        color: Colors.blue,
        duration: Duration(seconds: 1),
        transform: _isRotated ? Matrix4.rotationZ(0.5) : Matrix4.rotationZ(0),
        child: Center(child: Text('탭하여 회전')),
      ),
    );
  }
}

위 예제 코드에서는 AnimatedContainer를 사용하여 회전 애니메이션을 구현하였습니다. _isRotated 변수를 토글하여 회전 상태를 변경하며, Matrix4.rotationZ를 사용하여 회전 애니메이션을 적용했습니다.

이를 실행하면 정사각형이 탭할 때마다 45도씩 회전하는 애니메이션을 확인할 수 있습니다.

결론

AnimatedContainer의 transform 속성을 이용하여 회전 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으니, 다양한 UI 요소에 애니메이션을 적용해보세요. Happy coding!