パッケージ、リポジトリ、アプリカテゴリを検索

icons_animate のカバー
パッケージ詳細v0.0.2

icons_animate

このパッケージを使用して、2つの静的アイコンの間でアニメーションを実行し、アニメーション付きアイコンを得ます。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
140
いいね数
27
Pub ポイント
145

パッケージをインストール

flutter pub add icons_animate

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

icons_animate パッケージは、Flutter アプリケーションで2つの静的アイコン間のスムーズなアニメーションを作成できるようにします。AnimatedIcon ウィジェットを使用することで、ユーザーは1つのアイコンからもう1つのアイコンへと滑らかに遷移でき、UI のインタラクティビティが向上します。このパッケージは Android、iOS、Web、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.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。