[flutter] 트위니 애니메이션을 사용한 플러터 앱 개선 방법

11 Dec 2023

flutter

플러터(Flutter)로 개발된 앱을 개선하기 위해 트위니(Tweeny) 애니메이션을 사용할 수 있습니다. 트위니는 애니메이션을 부드럽게 만들어주는 라이브러리로, 화면 전환, 위젯 이동 및 스케일링과 같은 다양한 애니메이션 효과를 구현하는 데 유용합니다.

이번 포스트에서는 트위니 애니메이션을 활용하여 플러터 앱을 개선하는 방법에 대해 살펴보겠습니다.

1. 트위니 애니메이션 라이브러리 추가하기

먼저, pubspec.yaml 파일에 다음과 같이 트위니 애니메이션 라이브러리를 추가합니다.

dependencies:
  tweeny: ^1.0.0

해당 라이브러리를 추가한 뒤에는 flutter packages get 명령어를 실행하여 라이브러리를 설치합니다.

2. 트위니 애니메이션 구현하기

이제, 다양한 화면 전환 및 위젯 애니메이션을 구현할 수 있습니다. 아래는 예시 코드로 화면 전환 애니메이션을 구현한 예시입니다.

import 'package:flutter/material.dart';
import 'package:tweeny/tweeny.dart';

class AnimationScreen extends StatefulWidget {
  @override
  _AnimationScreenState createState() => _AnimationScreenState();
}

class _AnimationScreenState extends State<AnimationScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      Tweeny.of(context).animate(
        Duration(milliseconds: 500),
        CurveType.decelerate,
      ).add(Tweeny<double>(0, 100, (value) {
        setState(() {
          _opacity = value;
        });
      }).add(
        Tweeny<double>(50, 200, (value) {
          setState(() {
            _width = value;
          });
        }),
      ).start();
    });
  }

  double _opacity = 0;
  double _width = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tweeny Animation'),
      ),
      body: Center(
        child: AnimatedOpacity(
          duration: Duration(milliseconds: 500),
          opacity: _opacity,
          child: Container(
            width: _width,
            height: _width,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위의 코드는 위젯의 크기와 투명도를 조절하여 애니메이션을 구현하는 예시입니다.

3. 트위니 애니메이션을 활용한 기능 개선

트위니 애니메이션을 활용하면 다양한 사용자 경험을 개선할 수 있습니다.

고유한 화면 전환 애니메이션
동적인 위젯 애니메이션
사용자 입력에 반응하는 부드러운 변화

마무리

이와 같이 트위니 애니메이션을 활용하여 플러터 앱을 개선할 수 있습니다. 트위니 라이브러리를 활용하여 다양한 애니메이션 효과를 구현해보세요.

참고문헌:

트위니 애니메이션 라이브러리 공식 문서