WinUI3开发_图标动画

简介

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

AnimatedIcon

AnimatedIconWinUI3提供的一种图标动画效果,可以让你的页面图标动起来,截至目前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:
请添加图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

17岁boy想当攻城狮

感谢打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值