V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
0gre2019
V2EX  ›  Electron

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

  •  
  •   0gre2019 ·
    Fijiisland · Dec 29, 2019 · 5628 views
    This topic created in 2323 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
        1
    summerwar  
       Dec 29, 2019
    这就是个 gif 图片,放到 loading 页面上就可以了
    geelaw
        2
    geelaw  
       Dec 29, 2019
    楼主贴的图和 Windows 的实现不同。Windows 的实现是从底部出现,转两圈后在底部消失。

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

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

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