[flutter] AlignTransition을 이용한 정렬 애니메이션 구현하기

08 Dec 2023

flutter

Flutter는 다양한 애니메이션 효과를 구현할 수 있는 다양한 기능을 제공합니다. 이 중 AlignTransition은 Widget의 정렬을 자연스럽게 변화시키는 애니메이션을 쉽게 생성할 수 있게 해줍니다. 이번 포스트에서는 AlignTransition을 이용하여 Flutter 앱에서 정렬 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

AlignTransition을 사용하여 정렬 애니메이션 구현하기

AlignTransition은 애니메이션을 적용할 때 정렬 상태에 따라 자연스럽게 변화시키는 데 사용됩니다. 예를 들어, AlignTransition은 앱의 UI 요소를 화면의 상단, 하단, 좌측, 우측 등으로 순차적으로 움직이거나 크기를 조절하는 데 유용하게 사용될 수 있습니다.

AlignTransition(
  alignment: _animation,
  child: YourWidget(),
)

위의 예시 코드에서 _animation은 Align의 정렬 애니메이션을 제어하는데 사용되는 Animation 속성입니다. 이를 통해 AlignTransition은 정렬에 따른 애니메이션을 자연스럽게 적용할 수 있게 됩니다.

AlignTransition을 이용한 Flutter 앱 예제

다음은 AlignTransition을 사용하여 간단한 Flutter 앱에서 정렬 애니메이션을 구현하는 예제입니다.

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('AlignTransition Example'),
        ),
        body: AlignTransitionExample(),
      ),
    );
  }
}

class AlignTransitionExample extends StatefulWidget {
  @override
  _AlignTransitionExampleState createState() => _AlignTransitionExampleState();
}

class _AlignTransitionExampleState extends State<AlignTransitionExample>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Alignment> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<Alignment>(
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
    ).animate(_controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AlignTransition(
        alignment: _animation,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}

위의 예제는 앱 시작 시 파란색 정사각형을 화면 하단 좌측에서 상단 우측으로 움직이는 AlignTransition 애니메이션을 구현한 것입니다.

이러한 방식으로 AlignTransition을 이용하여 Flutter 앱에서 다양한 정렬 애니메이션을 만들 수 있습니다.

AlignTransition에 대한 더 자세한 정보는 Flutter 공식 문서를 참고할 수 있습니다.