搜索插件、代码仓与 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。