AnimatedContainer, transform(Matrix4.rotationZ), transformAlignment

import 'package:flutter/material.dart';

class ImplicitAnimationsScreen extends StatefulWidget {
  const ImplicitAnimationsScreen({super.key});

  @override
  State<ImplicitAnimationsScreen> createState() =>
      _ImplicitAnimationsScreenState();
}

class _ImplicitAnimationsScreenState extends State<ImplicitAnimationsScreen> {
  bool _visible = true;

  void _trigger() {
    setState(() {
      _visible = !_visible;
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Implict Animations'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              duration: const Duration(seconds: 2),
              width: size.width * 0.8,
              height: size.width * 0.8,
              transform: Matrix4.rotationZ(_visible ? 1 : 0),
              transformAlignment: Alignment.center,
              decoration: BoxDecoration(
                color: _visible ? Colors.red : Colors.amber,
                borderRadius: BorderRadius.circular(_visible ? 100 : 0),
              ),
            ),
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: _trigger,
              child: const Text('Go!'),
            )
          ],
        ),
      ),
    );
  }
}

이 Flutter 코드는 ImplicitAnimationsScreen이라는 StatefulWidget을 사용하여 암시적 애니메이션을 구현한 예제입니다. 이 코드는 사용자 인터페이스의 일부 요소에 애니메이션 효과를 적용하여, 사용자 상호 작용에 반응하는 동적인 UI를 만드는 방법을 보여줍니다.

코드 구조 및 구성요소:

1. ImplicitAnimationsScreen 클래스:

   • StatefulWidget을 상속받습니다. 이는 위젯의 상태가 사용자 상호 작용에 의해 변경될 수 있음을 의미합니다.
   • createState() 메서드를 통해 _ImplicitAnimationsScreenState 클래스의 인스턴스를 생성합니다.

2. _ImplicitAnimationsScreenState 클래스:

   • ImplicitAnimationsScreen의 상태를 관리하는 클래스입니다.
   • _visible이라는 bool 타입의 private 변수를 선언하여, 애니메이션 상태를 추적합니다.
   • _trigger() 메서드는 _visible 변수의 값을 토글합니다. 이는 setState() 호출을 통해 위젯 트리에 애니메이션 변화를 트리거합니다.

3. build() 메서드:

   • ElevatedButton을 사용하여 사용자가 버튼을 누를 때 _trigger() 메서드를 호출합니다.

AnimatedContainer

AnimatedContainer는 애니메이션 효과를 가지는 컨테이너 위젯입니다. Container 위젯과 유사하지만, duration, curve, decoration, padding, margin, transform 등의 속성을 애니메이션화할 수 있습니다. 이를 통해, 컨테이너의 스타일이나 위치 등을 부드럽게 변경할 수 있습니다.

AnimatedContainer의 주요 속성은 다음과 같습니다.

• duration: 애니메이션의 지속 시간을 설정합니다. 기본값은 200밀리초입니다.
• curve: 애니메이션의 타이밍 함수를 설정합니다. 기본값은 Curves.linear입니다.
• decoration: 컨테이너의 스타일을 설정합니다. BoxDecoration 클래스의 인스턴스로 생성됩니다.
• padding: 내부 위젯의 여백을 설정합니다. EdgeInsets 클래스의 인스턴스로 생성됩니다.
• margin: 컨테이너의 외부 여백을 설정합니다. EdgeInsets 클래스의 인스턴스로 생성됩니다.
• transform: 컨테이너의 변환 효과를 설정합니다. Matrix4 클래스의 인스턴스로 생성됩니다.

AnimatedContainer는 StatefulWidget 클래스를 상속받아 구현되었으며, setState 메서드를 호출하여 애니메이션을 업데이트합니다. AnimatedContainer는 Container 위젯과 유사하지만, 애니메이션 효과를 가지므로, 컨테이너의 스타일이나 위치 등을 부드럽게 변경할 수 있습니다.

애니메이션 작동 방식:

• AnimatedContainer 위젯은 다양한 속성의 변화를 시간에 따라 부드럽게 애니메이션화합니다.
• _visible이 true일 때와 false일 때, 컨테이너의 transform, color, borderRadius 속성이 다르게 설정됩니다.
• transform 속성은 Matrix4.rotationZ를 사용하여 회전 효과를 줍니다. _visible에 따라 회전 각도가 변경됩니다.
• color 속성은 컨테이너의 배경색을 변경합니다. 여기서는 _visible이 true일 때 빨간색, false일 때 호박색으로 설정됩니다.
• borderRadius 속성은 컨테이너의 모서리 둥글기를 조절합니다. _visible 상태에 따라 모서리가 둥글거나 날카로워집니다.
• 사용자가 'Go!' 버튼을 누를 때마다 _trigger() 메서드가 호출되고, 이는 _visible의 값을 반전시켜 다시 AnimatedContainer의 애니메이션을 트리거합니다.

코드에서 사용된 transform과 transformAlignment 속성은 AnimatedContainer 위젯의 시각적 형태를 변형시키는 데 사용됩니다. 이들은 AnimatedContainer의 변화를 애니메이션화하는 과정에서 중요한 역할을 합니다.

1. transform 속성:

   • transform 속성은 위젯의 변형(여기서는 회전)을 정의합니다.
   • 이 예제에서는 Matrix4.rotationZ() 함수를 사용하여 Z축(수직 축)을 중심으로 위젯을 회전시킵니다.
   • _visible이 true일 때 1 라디안으로, false일 때는 0 라디안으로 회전합니다. 여기서 1 라디안은 대략 57.3도입니다.
   • 결과적으로, _visible 상태에 따라 컨테이너가 회전하거나 원래 상태로 돌아갑니다.

2. transformAlignment 속성:

   • transformAlignment는 transform이 적용될 때의 기준점(피벗 포인트)을 설정합니다.
   • Alignment.center는 위젯의 중심점을 기준점으로 설정합니다.
   • 이는 컨테이너가 자신의 중심을 중심으로 회전하게 만듭니다.

이러한 속성의 조합은 AnimatedContainer에 동적인 회전 애니메이션 효과를 부여합니다. 사용자가 'Go!' 버튼을 누를 때마다 _trigger() 메서드가 호출되고, 이는 _visible의 값을 반전시켜 AnimatedContainer의 transform 속성을 변경합니다. setState() 함수가 호출되면서, Flutter 프레임워크는 AnimatedContainer의 새로운 상태에 따라 부드럽게 회전하는 애니메이션을 자동으로 생성합니다.