[flutter] CurvedAnimation을 이용한 곡선 형태의 애니메이션 구현하기

08 Dec 2023

flutter

애니메이션은 사용자 경험을 향상시키고 앱의 시각적 효과를 향상시키는 데 중요합니다. Flutter 프레임워크는 CurvedAnimation을 사용하여 요소들이 곡선 형태로 움직이는 인상적인 애니메이션을 쉽게 구현할 수 있습니다.

CurvedAnimation

CurvedAnimation은 다양한 곡선을 사용하여 애니메이션을 제어하는 데 사용됩니다. 이를 통해 초기 속도, 끝 속도, 지속 시간 등을 조절할 수 있습니다.

CurvedAnimation은 항상 Animation Controller와 함께 사용됩니다. Animation Controller를 생성하고 CurvedAnimation을 통해 원하는 곡선을 설정할 수 있습니다.

다음은 CurvedAnimation을 사용하여 간단한 곡선 형태의 애니메이션을 구현하는 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    
    final animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeIn,
    );

    final sizeAnimation = Tween<double>(begin: 100, end: 200).animate(animation);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Curved Animation')),
        body: Center(
          child: AnimatedBuilder(
            animation: controller,
            builder: (context, child) {
              return Container(
                width: sizeAnimation.value,
                height: sizeAnimation.value,
                color: Colors.blue,
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            controller.forward();
          },
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

위 예제는 간단한 앱을 만들고, 플로팅 액션 버튼을 클릭하면 컨테이너의 크기가 곡선 형태로 변하는 애니메이션을 보여줍니다.

위 예제 결과는 다음과 같습니다.

Curved Animation

결론

CurvedAnimation을 사용하면 Flutter 앱에서 곡선형 애니메이션을 간단하게 구현할 수 있습니다. 이를 통해 사용자에게 더 흥미로운 시각적 경험을 제공할 수 있습니다.

더 많은 정보를 찾으려면 Flutter 애니메이션 공식 문서를 참조하세요.