简介
图标动画是指在UI中动态变换的一种效果,具备过度动画的一种动态图标,这些动画增强了用户体验,使界面更直观
、灵活
、生动
,常用于:
播放器按钮: 播放 ➝ 暂停 动画切换
收藏按钮: 星形/心形跳动、缩放
折叠菜单箭头: 旋转 0° ➝ 90°
文件上传/下载: 图标从灰变亮、或箭头滑动
下面是演示效果:
AnimatedIcon
AnimatedIcon
是WinUI3
提供的一种图标动画效果,可以让你的页面图标动起来,截至目前WinUI3,它支持7种动画:
**Back:**返回箭头切换动画
Close: X关闭动画
PlayPause: 播放/暂停切换动画
Favorite: 收藏/取消收藏动画
ExpandCollapse: 展开/折叠箭头
Reorder: 拖动/排序提示动画
OpenFolder: 文件夹展开动画
使用AnimatedIcon自带的动画
下面是AnimatedIcon
的代码示例:
<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
:
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
AnimatedVisuals
名字空间里的动画类默认实现了AnimatedIcon
的事件驱动模型
,当被嵌入到容器里时,动画类会监听VisualStateManager状态
,当按下按钮时会自动根据事件状态来播放动画,无需手动控制,并且AnimatedVisuals
的动画一般分为两段,按下和松开,分别对应前半部分和后半部分,AnimatedVisuals
会监听开始事件与结束事件两段事件来分别播放两段动画,天然适合Button
。
运行效果:
下面是AnimatedVisuals提供的7动画Icon演示:
AnimatedBackVisualSource:
AnimatedChevronDownSmallVisualSource:
AnimatedChevronRightDownSmallVisualSource:
AnimatedChevronUpDownSmallVisualSource:
AnimatedFindVisualSource:
AnimatedGlobalNavigationButtonVisualSource:
AnimatedSettingsVisualSource: