动态icon制作教程，手把手教你做动态图标？-建站教程-锦华智联科技

第一部分：基础概念与准备工作

在开始之前,我们先明确几个概念：

（图片来源网络，侵删）

动态图标 vs. 静态图标：静态图标是一张固定图片，而动态图标会播放一个简短的、循环的动画。
应用场景：
- iOS App Icon：从 iOS 10.3 开始，苹果允许开发者为 App Icon 设置动态效果，它通常是一个非常简短（3-5秒）的动画，当用户从主屏幕点击或长按 App 时播放。
- Android Adaptive Icon：Android 的自适应图标本身是静态的，但可以通过 ShortcutManager 实现点击时的动态效果。
- 网站 Favicon：网站标签页左侧的小图标，也可以是动态的，通常使用 .gif 或 .svg 格式。
核心工具：
- 设计工具：Figma, Adobe After Effects (AE), Adobe Photoshop (PS), Procreate 等。
- 格式转换/优化工具：在线 GIF 压缩工具、LottieFiles 等。

第二部分：制作方法详解

这里我们介绍三种最主流的方法,你可以根据自己的需求和技术背景选择。

使用 GIF（最简单，适合网站 Favicon）

这是最直接、最容易上手的方法，特别适合制作网站的动态 Favicon，缺点是文件体积较大,且动画控制能力弱。

适用场景：网站 Favicon、社交媒体头像、简单的装饰性图标。

制作步骤（以 Figma 为例）：

（图片来源网络，侵删）

设计动画帧：
- 在 Figma 画板上,创建你的图标基础图形。
- 复制这个画板，在新画板上对图形进行微小的改动（改变颜色、旋转角度、大小、位置等）。
- 重复此步骤，创建出动画的每一个关键帧，一个旋转的图标，你可能需要创建 4-8 个不同旋转角度的画板。
导出为 GIF：
- 选中所有创建好的画板。
- 右键点击，选择 “Export...” (导出)。
- 在弹出的设置中，将格式选择为 GIF。
- 调整帧率，10-15 FPS 就足够了,太高的帧率会让文件体积过大。
- 点击 Export (导出)。
应用到网站：
- 将导出的 .gif 文件上传到你的网站服务器。
- 在 HTML 的 <head> 标签中，使用以下代码替换原来的 Favicon 链接：
```
<link rel="icon" type="image/gif" href="your-animated-icon.gif">
```

优点：

（图片来源网络，侵删）

极其简单,无需编程知识。
兼容性好,几乎所有现代浏览器都支持。

缺点：

文件体积较大,可能影响网站加载速度。
无法精确控制播放时机（如循环次数、暂停等）。
动画效果相对单一。

使用 Lottie（最专业，适合 App 和 Web）

Lottie 是由 Airbnb 推出的一种开源的、基于 JSON 的动画格式，它使用 Bodymovin 插件将 After Effects (AE) 的动画导出成一个小巧的 JSON 文件。

适用场景：iOS/Android App 动态图标、网站复杂动画、加载动画等，这是目前移动端和现代 Web 领域最推荐的方案。

制作步骤（以 After Effects + Bodymovin 为例）：

在 After Effects 中制作动画：
- 创建一个新的合成，设置尺寸为你的 App Icon 尺寸（iOS 的 1024x1024px）。
- 设计你的图标，并使用 AE 的图层、关键帧、表达式等功能制作出流畅的动画。
- 关键提示：动画一定要设计成可以无限循环播放的，并且要简洁，因为 App Icon 的动画时间不宜过长。
安装 Bodymovin 插件：
- 下载 Bodymovin 插件：https://github.com/airbnb/lottie-web/tree/master/after-effects
- 将下载的文件解压，将 bodymovin.jsxbin 文件复制到 After Effects 的 Scripts/ScriptUI Panels 文件夹中。
- 重启 After Effects，在菜单栏 窗口 > 扩展 中就能找到 Bodymovin。
导出为 JSON：
- 在 AE 中，点击 文件 > 导出 > 使用 Bodymovin 导出...。
- 在弹出的窗口中，设置导出路径，渲染模式选择 JSON。
- 点击 Render，你会得到一个 .json 文件。
在 App 或 Web 中使用：
- iOS App：
  - 将 .json 文件添加到你的 Xcode 项目中。
  - 使用 Lottie-iOS 库 (github.com/airbnb/lottie-ios) 来加载和播放这个 JSON 文件。
  - 将 LottieAnimationView 实例化并设置为你的 App Icon。
- Android App：
  - 将 .json 文件和相关的图片资源（如果有）放入 res/raw 或 assets 文件夹。
  - 使用 Lottie-Android 库 (github.com/airbnb/lottie-android) 来加载和播放。
- 网站：
  - 引入 Lottie Web 库 (cdn.jsdelivr.net/npm/lottie-web@latest/build/lottie.min.js)。
  - 使用 JavaScript 加载 JSON 文件并渲染到指定的 DOM 元素上。

优点：

文件体积非常小,性能优异。
动画效果丰富,可以精确控制。
跨平台（iOS, Android, Web）一套代码。
可以轻松地修改颜色、速度等属性,无需重新设计动画。

缺点：

需要学习 After Effects 的使用,有一定门槛。

使用 CSS/SVG（最灵活，适合 Web）

如果你的图标动画比较简单（如旋转、缩放、颜色渐变），并且主要用在网站上，那么纯 CSS 或 SVG 动画是最佳选择。

适用场景：网站上的动态 Logo、按钮图标、装饰元素。

制作步骤（以 SVG + CSS 为例）：

创建 SVG 图标：
- 使用 Figma、Illustrator 或在线工具（如 https://yqnn.github.io/svg-path-editor/）创建你的图标，并导出为 .svg 格式。
- SVG 的好处是，它的每一个元素（如 <circle>, <path>, <rect>）都可以被单独操作。
编写 CSS 动画：
- 在你的 HTML 中嵌入 SVG 代码，或者通过 <img> 或 <object> 标签引用 .svg 文件。
- 在 CSS 中，为 SVG 的目标元素添加动画。

示例：一个旋转的齿轮图标

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">Dynamic SVG Icon</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 直接嵌入 SVG，方便用 CSS 控制 -->
    <svg class="gear-icon" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M50,10 L55,25 L70,20 L75,35 L90,35 L85,50 L100,55 L85,60 L90,75 L75,80 L70,95 L55,90 L50,100 L45,90 L30,95 L25,80 L10,75 L15,60 L0,55 L15,50 L10,35 L25,35 L30,20 L45,25 Z" fill="#3498db"/>
        <circle cx="50" cy="50" r="20" fill="white"/>
    </svg>
</body>
</html>

CSS (style.css):

.gear-icon {
  width: 100px;
  height: 100px;
  /* 让动画无限循环，持续 3 秒，线性速度 */
  animation: rotate 3s linear infinite;
}
/* 定义名为 'rotate' 的旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

优点：

无需外部图片,文件体积小。
矢量图形,无限放大不失真。
动画效果流畅，且易于通过 CSS 控制和交互（如 hover 暂停）。
对 SEO 友好。

缺点：

复杂的动画（如路径变形）用 CSS 实现起来非常困难。
主要局限于 Web 环境，在 App 中实现较复杂。

第三部分：平台特定指南（以 iOS App Icon 为例）

如果你要制作的是 iOS 的动态 App Icon，除了制作动画本身,还需要一些额外的配置。

准备动画：
- 使用 After Effects 制作动画，并导出为 .json（Lottie 格式）或 .mov / .mp4（视频格式）。
- 重要：动画时长应在 3-5 秒内，并且必须有一个平滑的循环结束帧,以便在播放结束后能无缝地回到静态图标。
配置 Xcode：
- 对于 Lottie：
  - 将 .json 文件拖入 Xcode 项目。
  - 在 Assets.xcassets 中，选择你的 App Icon Set。
  - 在右侧的 "Attributes Inspector" 中，勾选 "Provides app icon"。
  - 在下面的 "App Icon - iOS" 部分，为每个尺寸的图标都关联上你的 Lottie 动画视图，这通常需要一些代码来实现,而不是简单的拖拽。
- 对于视频：
  - 将 .mov 或 .mp4 文件拖入 Xcode 项目。
  - 在 Assets.xcassets 中创建一个新的 Image Set,将视频文件拖入。
  - 同样，在 Assets.xcassets 中选择你的 App Icon Set，勾选 "Provides app icon"，并为每个尺寸关联上视频的第一帧作为预览,实际播放需要通过代码控制。
编写代码控制播放：
- 你需要在 AppDelegate.swift 或 SceneDelegate.swift 中监听 App 的生命周期事件。
- 当 App 从后台进入前台时 (applicationDidBecomeActive),开始播放动画。
- 当 App 即将进入后台时 (applicationWillResignActive),暂停动画。
- 这样可以确保用户只在需要时看到动画,避免不必要的消耗。

总结与建议

方法	难度	文件大小	动画效果	主要平台	推荐场景
GIF	⭐	较大	简单	Web	网站Favicon、简单装饰
Lottie	⭐⭐⭐	很小	丰富	iOS, Android, Web	App动态图标、复杂Web动画
CSS/SVG	⭐⭐	很小	中等	Web	网站上的矢量动画图标

给你的建议：

新手入门：从 GIF 或 CSS/SVG 开始，它们能让你快速看到成果,理解动态图标的基本原理。
专业/开发者：强烈建议学习 Lottie，它是行业标准，能为你提供最大的灵活性和最佳的性能，尤其是在 App 开发中。
设计师：如果你是设计师，掌握 After Effects + Lottie 的组合会让你成为非常抢手的人才,因为你可以直接交付可交互的动画原型。

希望这份详细的教程能帮助你顺利制作出酷炫的动态图标！