cool_animation_flutter ✨


Flutter에서 멋진 애니메이션을 아주 쉽고 간결하게 적용할 수 있도록 도와주는 패키지입니다.

Feature

• delay와 buildSequentialAnimations를 사용하여 리스트나 그룹 요소에 순차적인 애니메이션을 쉽게 적용할 수 있습니다.
• 화면 밖에 있는 위젯이 스크롤되어 화면에 보일 때 애니메이션이 시작되도록 설정할 수 있습니다 (triggerOnVisible).
• 방향, 지속 시간, 곡선, 애니메이션 시작 오프셋 등을 자유롭게 조절 가능합니다.
• 활용 예시는 예제를 확인해주세요
• SlideFadeIn에 대한 자세한 내용은 기술블로그 포스팅을 참고해주세요

Install

pubspec.yaml 파일에 다음을 추가하세요:

dependencies:
  cool_animation_flutter: ^0.0.2

Usage

1️⃣ SlideFadeIn

가장 기본적인 형태로, 하단에서 위로 페이드 인되며 나타납니다.

import 'package:cool_animation_flutter/cool_animation_flutter.dart';

SlideFadeIn(
  child: Text('안녕하세요!'),
)

2️⃣ 방향 및 오프셋 커스텀

SlideDirection을 사용하여 8가지 방향에서 등장하게 하거나, beginOffset으로 정밀한 제어가 가능합니다.

SlideFadeIn(
  direction: SlideDirection.fromLeft, // 왼쪽에서 오른쪽으로 등장
  duration: Duration(milliseconds: 800),
  curve: Curves.elasticOut,
  child: MyWidget(),
)

3️⃣ 순차 애니메이션

여러 요소를 시간 차를 두고 나타나게 하고 싶을 때 buildSequentialAnimations를 사용하면 편리합니다.

Column(
  children: buildSequentialAnimations(
    children: [
      Text('첫 번째 항목'),
      Text('두 번째 항목'),
      Text('세 번째 항목'),
    ],
    builder: (child, delay) => SlideFadeIn(
      delay: delay,
      child: child,
    ),
  ),
)

Reference

SlideDirection

• fromBottom, fromTop, fromLeft, fromRight
• fromBottomLeft, fromBottomRight, fromTopLeft, fromTopRight
• none (페이드 효과만 적용)

SlideFadeIn Properties

속성	타입	설명
child	Widget	애니메이션을 적용할 대상 (필수)
direction	SlideDirection	슬라이드 시작 방향 프리셋
beginOffset	Offset	커스텀 시작 위치 (direction보다 우선함)
duration	Duration	애니메이션 재생 시간 (기본 400ms)
delay	Duration	애니메이션 시작 전 지연 시간
triggerOnVisible	bool	화면에 보일 때 시작 여부 (기본 false)

License

This project is licensed under the MIT License - see the LICENSE file for details.