很奇怪有些软件是怎么实现 Win10 那个小点点 Loading 动画的

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1788 天前的主题，其中的信息可能已经有所发展或是发生改变。

就是这个点构成的圈圈

的横向版本（在 Win10 设置-游戏-Xbox 网络里有直观的效果）

比如说杀毒软件 ESET NOD32，我知道它最新版本界面是 Electron 写的，但它也有这种横向小点 Loading 加速度动画，这是调用了 Windows 的啥 Api 还是 ESET 自己用 AE 画的帧序列= =

愣是没找着例子 (哭)

eset

win10

横向

9 条回复 • 2020-01-01 17:09:20 +08:00

summerwar

2019-12-29 20:19:37 +08:00

这就是个 gif 图片，放到 loading 页面上就可以了

geelaw

2019-12-29 20:20:31 +08:00

楼主贴的图和 Windows 的实现不同。Windows 的实现是从底部出现，转两圈后在底部消失。

有很多 CSS 模拟实现，想要精确找到 Windows 实现的缓动函数也不是很困难。

xxpandxxp

2019-12-29 20:21:08 +08:00 via Android

@summerwar #1 不是 gif 吧，有时候看到这几个点会卡，会重合

0gre2019

2019-12-29 20:25:31 +08:00

ESET 那个效果卡卡的，可能是 gif ；但另一款叫 MacDrive 的实现的效果感觉就像原生的 Win10 动画，流畅至死

yzwduck

2019-12-29 20:28:43 +08:00

Windows 的安装程序里，它把每一帧动画都做成字体的一个字符。

0gre2019

2019-12-29 20:30:00 +08:00

@yzwduck 惊了

miyuki

2019-12-30 00:05:30 +08:00 via Android

https://codepen.io/feebaa/pen/PPrLQP

纯 CSS

efaun

2019-12-30 00:20:32 +08:00 via Android

@geelaw 从底部消失是 feature 吗😂，我一直以为是我电脑太卡了，显示不出来

0gre2019

2020-01-01 17:09:20 +08:00

找到一个第三方库，基于.net 的，叫 MahApp.Metro

https://github.com/MahApps/MahApps.Metro

里面的 MetroProgressBar.xmal 和 ProgressRing.xmal 都实现了原生 Win10 的 Loading 动效，几乎一模一样，是纯代码绘制的。