WinUI3开发_图标动画

简介

图标动画是指在UI中动态变换的一种效果，具备过度动画的一种动态图标，这些动画增强了用户体验，使界面更直观、灵活、生动，常用于：
播放器按钮： 播放 ➝ 暂停动画切换
收藏按钮： 星形/心形跳动、缩放
折叠菜单箭头： 旋转 0° ➝ 90°
文件上传/下载： 图标从灰变亮、或箭头滑动

下面是演示效果：

AnimatedIcon

AnimatedIcon是WinUI3提供的一种图标动画效果，可以让你的页面图标动起来，截至目前WinUI3，它支持7种动画：

**Back：**返回箭头切换动画
Close： X关闭动画
PlayPause： 播放/暂停切换动画
Favorite： 收藏/取消收藏动画
ExpandCollapse： 展开/折叠箭头
Reorder： 拖动/排序提示动画
OpenFolder： 文件夹展开动画

使用AnimatedIcon自带的动画

下面是AnimatedIcon的代码示例：

xml 复制代码

<Button Width="75">
    <AnimatedIcon x:Name="SearchAnimatedIcon">
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol="Find"/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

注意animatedvisuals名字空间属于Microsoft.UI.Xaml.Controls.AnimatedVisuals：

xml 复制代码

xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"

AnimatedVisuals名字空间里的动画类默认实现了AnimatedIcon的事件驱动模型，当被嵌入到容器里时，动画类会监听VisualStateManager状态，当按下按钮时会自动根据事件状态来播放动画，无需手动控制，并且AnimatedVisuals的动画一般分为两段，按下和松开，分别对应前半部分和后半部分，AnimatedVisuals会监听开始事件与结束事件两段事件来分别播放两段动画，天然适合Button。

运行效果：

下面是AnimatedVisuals提供的7动画Icon演示：
AnimatedBackVisualSource：

AnimatedChevronDownSmallVisualSource：

AnimatedChevronRightDownSmallVisualSource：

AnimatedChevronUpDownSmallVisualSource：

AnimatedFindVisualSource：

AnimatedGlobalNavigationButtonVisualSource：

AnimatedSettingsVisualSource：