icons_animate 패키지는 Flutter 애플리케이션에서 두 개의 정적 아이콘 간에 부드러운 애니메이션을 생성할 수 있도록 해줍니다. AnimatedIcon 위젯을 사용하면 사용자가 하나의 아이콘에서 다른 아이콘으로 자연스럽게 전환할 수 있으며, 사용자 인터페이스의 상호작용성을 향상시킬 수 있습니다. 이 패키지는 Android, iOS, 웹, macOS, Windows, Linux 등 주요 플랫폼을 모두 지원하여 크로스플랫폼 개발에 매우 유연합니다. 패키지는 가볍고 간단한 pub add 명령어를 통해 기존의 Flutter 프로젝트에 쉽게 통합할 수 있습니다.
사용 사례
버튼 내 애니메이션 아이콘 전환
인터랙티브 UI 요소
로딩 상태 표시기
전환 애니메이션
작업에 대한 시각적 피드백
주요 기능
아이콘 간의 부드러운 애니메이션
크로스 플랫폼 지원
Flutter와의 간단한 통합
사용자 정의 애니메이션 지속 시간
내장 아이콘 쌍
적합한 대상
동적 시각 효과를 찾는 UI 디자이너
인터랙티브 앱을 개발하는 개발자
미세한 애니메이션을 필요로 하는 프로젝트
크로스플랫폼 모바일 및 웹 앱
마이크로 인터랙션을 통한 사용자 경험 향상
고려 사항
사전 정의된 아이콘 쌍으로 제한됨
저사양 기기에서 성능 튜닝에 신중해야 합니다
애니메이션의 복잡도는 반응성에 영향을 줄 수 있습니다
복잡한 사용자 정의 애니메이션에 적합하지 않습니다
Flutter의 애니메이션 프레임워크 안정성에 의존합니다
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
Icons Animate
This is a Flutter package to make a custom AnimatedIcon from two Icons.
This package is born to make AnimatedIcons easily available for any Icon and not only the few default ones
Features
Here are some examples of animated icons.
Note that you can provide any Icon that is of type IconData to the animator
You can see an example of some icons being animated in the Sample Project
Getting started
To install the package just do:
flutter pub add icons_animate
flutter pub get
OR add the dependency manually to your pubspec.yaml file:
dependencies:icons_animate:^0.0.2
Then depend on it in your class:
import'package:icons_animate/icons_animate.dart';
Usage
Here is a simple implementation:
AnimateIcons(
startIcon: Icons.add_circle,
endIcon: Icons.add_circle_outline,
size: 100.0,
controller: controller,
startTooltip: 'Icons.add_circle',
endTooltip: 'Icons.add_circle_outline',
// add this for splashColor, default is Colors.transparent means no click effect
splashColor: Colors.blueAccent.shade100.withAlpha(50),
// add this to specify a custom splashRadius// default is Material.defaultSplashRadius (35)
splashRadius: 24,
onStartIconPress: () {
print("Clicked on Add Icon");
returntrue;
},
onEndIconPress: () {
print("Clicked on Close Icon");
returntrue;
},
duration: Duration(milliseconds: 500),
startIconColor: Colors.deepPurple,
endIconColor: Colors.deepOrange,
clockwise: false,
),