패키지, 저장소 및 앱 카테고리 검색

icons_animate 표지
패키지 상세v0.0.2

icons_animate

이 패키지를 사용하여 두 개의 정적 아이콘 사이를 애니메이션 처리하고 애니메이션 아이콘을 얻으세요.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
140
좋아요
27
Pub 점수
145

패키지 설치

flutter pub add icons_animate

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

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

GitHub branch checks state GitHub release (latest by date)
Pub Version Pub Points
GitHub license GitHub last commit GitHub issues GitHub closed issues

Features

Here are some examples of animated icons.

Note that you can provide any Icon that is of type IconData to the animator

example gif

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");
        return true;
    },
    onEndIconPress: () {
        print("Clicked on Close Icon");
        return true;
    },
    duration: Duration(milliseconds: 500),
    startIconColor: Colors.deepPurple,
    endIconColor: Colors.deepOrange,
    clockwise: false,
),

See Example Code for more info.

Issues & Feedback

Please file an issue to send feedback or report a bug, If you want to ask a question or suggest an idea then you can open an discussion. Thank you!

Contributing

Every PR is welcome.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.