[flutter] PositionedTransition을 이용한 위치 이동 애니메이션 구현하기

08 Dec 2023

flutter

애니메이션은 모바일 앱의 사용성을 향상시키고 사용자 경험을 풍부하게 만들어줍니다. Flutter에서 애니메이션을 구현하는 방법 중 하나는 PositionedTransition 위젯을 사용하는 것입니다.

이 포스트에서는 Flutter에서 PositionedTransition을 활용하여 위젯의 위치를 변경하는 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. PositionedTransition 이란?

PositionedTransition 위젯은 Stack 위젯 내에서 사용되며, 자식 위젯의 위치를 애니메이션으로 자연스럽게 이동시킬 수 있습니다. 이 위젯은 Animation<RelativeRect> 객체를 사용하여 위치 값을 변화시킵니다.

2. PositionedTransition의 구현 방법

아래는 PositionedTransition을 이용하여 위치 이동 애니메이션을 구현하는 간단한 예제 코드입니다.

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('PositionedTransition 예제'),
        ),
        body: PositionedTransition(
          rect: RelativeRectTween(
            begin: RelativeRect.fromSize(
              Rect.fromLTWH(0, 0, 100, 100),
              Size(200, 200),
            ),
            end: RelativeRect.fromSize(
              Rect.fromLTWH(100, 100, 100, 100),
              Size(200, 200),
            ),
          ).animate(CurvedAnimation(
            parent: animationController,
            curve: Curves.ease,
          )),
          child: Container(
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위 코드에서는 PositionedTransition을 사용하여 Container 위젯을 이동시키는 애니메이션을 구현했습니다. rect 속성을 사용하여 애니메이션을 적용할 위치를 지정하고, animate 속성을 통해 애니메이션 효과를 설정했습니다.

위젯을 실행하면 Container가 시작 위치에서부터 애니메이션에 따라 움직이게 됩니다.

3. 마무리

애니메이션은 앱의 사용자 경험을 향상시키는 데 필수적입니다. Flutter의 PositionedTransition을 사용하면 직관적이고 효과적인 위치 이동 애니메이션을 손쉽게 구현할 수 있습니다. 이를 응용하여 다양한 UI 요소에 애니메이션을 적용하여 앱을 더욱 동적이고 매력적으로 만들어보세요.

훌륭한 Flutter 애니메이션을 위한 여정을 시작해보세요!