[flutter] 스토리 보드 애니메이션을 사용한 간단한 애니메이션 제작 방법

11 Dec 2023

flutter

스토리 보드 애니메이션은 Flutter 앱에 시각적 요소를 부드럽게 변화시키는 효과적인 방법입니다. 여기서는 스토리 보드 애니메이션을 사용하여 간단한 애니메이션을 만드는 방법을 살펴보겠습니다.

스토리 보드 애니메이션 사용하기

스토리 보드 애니메이션을 사용하려면 Flutter의 animation 패키지를 사용해야 합니다. 이 패키지를 이용하여 객체의 속성을 일정 시간에 걸쳐 부드럽게 변경하는 애니메이션을 만들 수 있습니다.

단계 1: 패키지 추가

우선 pubspec.yaml 파일에 다음과 같이 flutter 애니메이션 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_animation:

단계 2: 애니메이션 만들기

이제 애니메이션을 만들기 위해 flutter 애니메이션 패키지의 AnimationController와 Tween을 사용합니다. 예를 들어, 텍스트 위에 애니메이션을 적용하려면 다음과 같이 할 수 있습니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 애니메이션을 위한 컨트롤러
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TweenAnimationBuilder(
            tween: ColorTween(begin: Colors.red, end: Colors.blue),
            duration: Duration(seconds: 1),
            builder: (BuildContext context, Color color, Widget? child) {
              return ColorFiltered(
                colorFilter: ColorFilter.mode(color, BlendMode.modulate),
                child: child!,
              );
            },
            child: const Text('애니메이션 효과'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 TweenAnimationBuilder를 사용하여 컬러 효과를 적용한 간단한 애니메이션을 만들었습니다.

스토리 보드 애니메이션을 사용하면 Flutter 앱에 다양한 효과적인 시각적 요소를 구현할 수 있습니다. 여러분의 앱에 스토리 보드 애니메이션을 적용하여 사용자 경험을 향상시켜보세요!

이상으로 Flutter에서 스토리 보드 애니메이션을 사용한 간단한 애니메이션 제작 방법에 대해 알아보았습니다. 감사합니다.

참고 자료