0gre2019
V2EX  ›  Electron

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

  •  
  •   0gre2019 ·
    Fijiisland · Dec 29, 2019 · 6259 views
    This topic created in 2503 days ago, the information mentioned may be changed or developed.

    就是这个点构成的圈圈 image

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

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

    愣是没找着例子 (哭)

    9 replies  •  2020-01-01 17:09:20 +08:00
    summerwar
    summerwar
    Dec 29, 2019
    1
    这就是个 gif 图片,放到 loading 页面上就可以了
    geelaw
    geelaw
    Dec 29, 2019
    2
    楼主贴的图和 Windows 的实现不同。Windows 的实现是从底部出现,转两圈后在底部消失。

    有很多 CSS 模拟实现,想要精确找到 Windows 实现的缓动函数也不是很困难。
    xxpandxxp
    xxpandxxp
    Dec 29, 2019 via Android
    3
    @summerwar #1 不是 gif 吧,有时候看到这几个点会卡,会重合
    0gre2019
    0gre2019
    OP
    Dec 29, 2019
    4
    ESET 那个效果卡卡的,可能是 gif ;但另一款叫 MacDrive 的实现的效果感觉就像原生的 Win10 动画,流畅至死
    yzwduck
    yzwduck
    Dec 29, 2019❤️1
    5
    Windows 的安装程序里,它把每一帧动画都做成字体的一个字符。
    0gre2019
    0gre2019
    OP
    Dec 29, 2019
    6
    @yzwduck 惊了
    miyuki
    miyuki
    Dec 30, 2019 via Android
    7
    efaun
    efaun
    Dec 30, 2019 via Android
    8
    @geelaw 从底部消失是 feature 吗😂,我一直以为是我电脑太卡了,显示不出来
    0gre2019
    0gre2019
    OP
    Jan 1, 2020
    9
    找到一个第三方库,基于.net 的,叫 MahApp.Metro

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

    里面的 MetroProgressBar.xmal 和 ProgressRing.xmal 都实现了原生 Win10 的 Loading 动效,几乎一模一样,是纯代码绘制的。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2604 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 14:09 · PVG 22:09 · LAX 06:09 · JFK 09:09
    ♥ Do have faith in what you're doing.