前言

2021年6月24日,随着微软正式宣布 Windows 11 作为下一代 Windows 的大版本更新, 更新的流畅设计体系 Fluent Design System 也通过 WinUI 库 2.6 版本与大家见面. 本文探讨其中 "动态图标 AnimatedIcon" 板块的具体内容.

背景

其实这套AnimatedIcon的实现途径并不新鲜. 早在很久以前的Windows Community Toolkit 中, 我们便已在 Lottie-Windows 中见过. Lottie 是 Airbnb 公司推出的一款动画实现工具, 用于为各平台原生应用提供动画支持, 通用型极强. 我们只需使用 Adobe After Effects 配合 Bodymovin 插件即可制作优美, 通用于各平台的动画.

开发环境

若工具版本低于笔者版本, 无法确保各项功能可用. 如果工具发生更新, 也无法确保功能仍然可用.

Windows 10 Version 21H1
- Visual Studio 2019 (v16.10.4)
- .Net (v5.0.302) [.Net 5.0 必需]
- NuGet Package: Microsoft.UI.Xaml (v2.6.1)
macOS Big Sur 11.4
- Adobe After Effects 2021 (v18.2.1)
- AE Plugin: Bodymovin (v5.7.12) 安装参考

同时, 请确保你的UWP项目使用的C#语言版本高于v9.0 (后文详述原因).

步骤一: 使用 After Effects 制作动画

创建好合成即可. 注意合成的帧率和时间. 此处不赘述.

但请注意创建的动画必须满足生成 Lottie 动画文件的条件. 具体支持在这里.

请务必优化动画的性能, 以最小的代价达到最优效果.

步骤二: 使用 Bodymovin 插件制作 Lottie 的 json 文件

安装好 Bodymovin 后在 After Effects 中依次点击菜单栏"窗口" - “扩展” - “Bodymovin”, 启动转换工具.

接着在打开的窗口中选中你需要生成的合成, 设置 json 文件存储的目标路径, 如无特别需求无需更改合成项导出相关设置 (至少在本项目中是如此).

准备就绪后点击 Render 即导出了 Lottie 的目标文件, 格式为 json.

步骤三: 根据需求修改导出的文件

与社区工具包中的 Lottie 不同的是, AnimatedIcon 支持根据指针事件控制动画的播放, 这极大减少了开发人员的工作量, 只需在 json 文件中进行定义即可完成不同操作的动画反馈.

此处我们仅关注文件末尾的 markers 字段. 根据官方文档的描述:

You can also define markers in the animation definition to indicate playback time positions. You can then set the AnimatedIcon state to these markers. For example, if you have a playback position in the Lottie file marked “PointerOver”, you can set the AnimatedIcon state to “PointerOver” and move the animation to that playback position.
For example, the AutoSuggestBox control uses an AnimatedIcon that animates with the following states:

Normal

PointerOver

Pressed

You can define markers in your Lottie file with those state names. You can also define markers as follows:
Insert “To” between state names. For example, if you define a “NormalToPointerOver” marker, changing the AnimatedIcon state from “Normal” to “PointerOver” will cause it to move to this marker’s playback position.
Append “_Start” or “_End” to a marker name. For example defining markers “NormalToPointerOver_Start” and “NormalToPointerOver_End” and changing the AnimatedIcon state from “Normal” to “PointerOver” will cause it to jump to the _Start marker’s playback position and then animate to the _End playback position.

大致解释一下, 定义 markers 的方式有两种: 点定位和段定位 (为描述方便, 自命名之).

点定位即声明每种状态所处帧数位置, 定义简单, 但不适用于较复杂动画. 两状态的切换只有顺序播放和倒序播放. 模板:

"markers": [{ "tm": 0, "cm": "Normal", "dr": 0 },{ "tm": 0, "cm": "PointerOver", "dr": 0 },{ "tm": 0, "cm": "Pressed", "dr": 0 }
]

具体帧数在 tm (?好名字) 指定即可.

段定位需要指定不同指针状态的过渡动画. 定义稍繁琐, 定义时 “cm” 字段需要用 “StateToState_Start/End” 的形式显式指定动画的起点/终点, 优点是十分灵活, 可自由定义动画的进行, 适应复杂的视觉反馈. 模板:

"markers": [{ "tm": 0, "cm": "NormalToPointerOver_Start", "dr": 0 }, { "tm": 0, "cm": "NormalToPointerOver_End", "dr": 0 },{ "tm": 0, "cm": "NormalToPressed_Start", "dr": 0 }, { "tm": 0, "cm": "NormalToPressed_End", "dr": 0 },{ "tm": 0, "cm": "PointerOverToNormal_Start", "dr": 0 }, { "tm": 0, "cm": "PointerOverToNormal_End", "dr": 0 },{ "tm": 0, "cm": "PointerOverToPressed_Start", "dr": 0 }, { "tm": 0, "cm": "PointerOverToPressed_End", "dr": 0 },{ "tm": 0, "cm": "PressedToNormal_Start", "dr": 0 }, { "tm": 0, "cm": "PressedToNormal_End", "dr": 0 },{ "tm": 0, "cm": "PressedToPointerOver_Start", "dr": 0 }, { "tm": 0, "cm": "PressedToPointerOver_End", "dr": 0 }]

帧数定义同上.

根据动画设计自行选择即可.

步骤四: 使用 LottieGen 工具生成 C# 类

在 AnimatedIcon 中我们不再使用工具包中传统的 AnimatedVisualPlayer 来进行动画的展示. 这里介绍 LottieGen 工具. 它可以直接将 Lottie 文件转换为我们可用的 C# 类嵌入项目, 生成的类实现了 IAnimatedVisualSource 接口, 可直接作为 AnimatedIcon 的 Source 在 XAML 中显示.

首先确保 Windows 平台安装了 .Net 5.0 (官方要求). 下载页面

在命令行输入:

dotnet tool install -g LottieGen

导航至 Lottie 文件所在目录后, 运行以下指令:

lottiegen -InputFile 「Lottie文件名」 -Language cs

对于此项目, 笔者运行的是:

lottiegen -InputFile SettingsAnimatedIcon.json -Lanuguage cs -WinUIVersion 2.6 -GenerateColorBindings -MinimumUapVersion 7

解释:

-WinUIVersion 2.6 设置 WinUI 版本, 以匹配项目中 WinUI 的版本. LottieGen 默认为 WinUI 2.4 生成, 生成的类仅实现 IAnimatedVisualSource 接口, 而 WinUI 2.6 要求的 IAnimatedVisualSource2 未实现, 编译报错.
-GenerateColorBindings 生成动画元素的颜色绑定. 具体后文介绍.
-MinimumUapVersion 7 此处UAP版本可参照我的这篇文章,项目支持最低Windows版本为1809,因此Uap最低版本为7.

至此, 我们便在 Lottie 文件的目录下得到了包含目标类的 cs 文件.

步骤五: 在项目中使用类文件

笔者在项目的NavigationView中使用动画图标. XAML 代码如下:

<!--xmlns:animatedvisuals="using:AnimatedVisuals"--><muxc:NavigationViewItem Content = "Settings"><muxc:NavigationViewItem.Icon><muxc:AnimatedIcon><muxc:AnimatedIcon.Source><animatedvisuals:SettingsAnimatedIcon /></muxc:AnimatedIcon.Source><muxc:AnimatedIcon.FallbackIconSource><muxc:FontIconSource FontFamily="Segoe MDL2 Assets" Glyph=""/></muxc:AnimatedIcon.FallbackIconSource></muxc:AnimatedIcon></muxc:NavigationViewItem.Icon></muxc:NavigationViewItem>

XAML中应加入命名空间引用, LottieGen 默认生成的命名空间均为 AnimatedVisuals , 如有需要也可以更改. (在生成命令中加上 -Namespace XXXXX 即可.)

至此, 动态图标已在UWP中实现.

步骤六: 明暗主题适配

注: 此步骤仅用于黑白图标. 其他配色需要单独设计.

此前生成的图标是不支持主题自适应的. 它仅仅会显示为第一步在 After Effects 中制作动画时使用的配色. 我们可以通过修改 C# 类达到目的. 官方推荐我们定义 “Foreground” 字段实现颜色自适应, 这里提供一个更简单的方法.

在第四步中我们通过-GenerateColorBindings 生成了动画元素的颜色绑定. 类中定义了方法 SetColorProperty(), 通过传入颜色名称改变元素颜色. 方法定义如下:

/// <summary>
/// Sets the color property with the given name, or does nothing if no such property exists.
/// </summary>
public void SetColorProperty(string propertyName, Color value)
{if (propertyName == "Color_000000"){_themeColor_000000 = value;}else{return;}if (_themeProperties is not null){_themeProperties.InsertVector4(propertyName, ColorAsVector4(value));}
}

注: 此处 LottieGen 工具自动生成的代码中包含了 is not 关键字, 仅在 C# 9.0 版本以上可用, 为避免反复修改, 建议将项目语言版本修改至 9.0 .

在该方法中断点调试, 得知生成动画元素以及系统主题切换时调用该方法, 传入参数 propertyName 的值为 "Foreground" . 由于动画元素中仅有一个前景色, 我们可直接将 Foreground 重定向至该颜色, 在方法开头添加一句

if (propertyName == "Foreground") propertyName = "Color_000000";

万事大吉. 此后系统对图标的 Foreground 进行修改时, 所有默认为黑色的元素均会调整为系统前景色. XAML 中无需进行任何修改. Over.

总结

WinUI 2.6 在此前基础上大大强化了 Lottie 在 Windows 平台上的实用性, 插入动态效果也变得十分简洁, 相比以前减少了许多代码量, 点个赞. LottieGen 官方文档描述较简单, 功能可以通过 lottiegen -Help 具体查看, 此处不赘述. 预祝 Windows 11 和新一代设计体系取得成功.

转载请注明来源。
文章地址 https://blog.csdn.net/brandonw3612/article/details/119399450

【UWP】AnimatedIcon 动态图标的实现步骤相关推荐

东京奥运会73枚动态图标刷爆朋友圈，中国网友怒赞：不愧是设计大国！
本文转载自公众号"日本设计小站"(ID:japandesign),已获得其授权. 前不久,东京奥组委.残奥组委公布了73个奥运比赛项目的动态图标视觉效果堪称惊艳! 图标先以碎片 ...
html动态图标代码,SVG动态图标是如何实现的
这篇文章给大家分享的内容是SVG动态图标是如何实现的,有需要的朋友可以参考一下. 在 loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几行代码,比img图片 ...
酷炫的SVG 动态图标
酷炫的SVG 动态图标在 loading.io 上能看到好多效果惊艳的loading图标.它们都 ...
android 时钟动态图标,Android 8.1 Launcher3实现动态指针时钟功能
本文主要实现功能,可能有不合理的地方首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bit ...
html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?（代码实例）
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
MOGRT动态图标模板爱情元素手绘爱心特效pr视频模板
MOGRT动态图标模板爱情元素手绘爱心特效pr视频模板此模板包含16个惊人的手绘元素,你可以在你的下一个视频或照片中使用.这些元素是预先呈现的,可以在你的编辑软件中使用.通过使用alpha通道添加 ...
【Android】时钟动态图标的定制化
活动地址:CSDN21天学习挑战赛 1.概述在定制化10.0的项目开发中,在Launcher3的app列表页,有时钟app的图标,由于图标是静态的开发的需要要求调成动态图标,时刻显示时间,所以要 ...
计算机桌面出现家庭组,win10系统桌面突然多出一个家庭组图标的修复步骤
win10系统使用久了,好多网友反馈说win10系统桌面突然多出一个家庭组图标的问题,非常不方便.有什么办法可以永久解决win10系统桌面突然多出一个家庭组图标的问题,面对win10系统桌面突然多出一 ...
miui怎么用第三方图标包_MIUI上线全新动态图标主题，锁屏功能超级多且好用
喜欢用MIUI主题的米粉肯定知道,一款优秀的主题一定是好看.适配图标多.功能多且流畅,小编今天要给大家分享的这款主题就有这些特点. 首先我们来看看这款主题的锁屏.我们点击左下角按钮可以进入自定义界面, ...

【UWP】AnimatedIcon 动态图标的实现步骤

前言

背景