搜尋套件、儲存庫與 APP 分類

icons_animate 封面
套件詳情v0.0.2

icons_animate

使用此套件在兩個靜態圖示之間進行動畫切換,以獲得一個動態圖示。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
140
喜歡數
27
Pub 分數
145

安裝套件

flutter pub add icons_animate

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

icons_animate 套件讓開發者能在 Flutter 應用中建立兩個靜態圖示之間的流暢動畫。透過使用 AnimatedIcon 小工具,使用者可順暢地從一個圖示過渡到另一個圖示,提升使用者介面的互動性。此套件支援所有主要平台,包含 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。