精易论坛

标题: Win8 Win10 开机加载Loading动画源码 [打印本页]

作者: yyyxb    时间: 2024-3-8 15:40
标题: Win8 Win10 开机加载Loading动画源码
本帖最后由 yyyxb 于 2024-3-8 23:35 编辑
先给出相关链接:
[易语言纯源码] [分享源码] 模仿win8加载 https://125.confly.eu.org/forum.php?mod=viewthread&tid=13753807
WIN开机圆圈居然是字体 https://www.bilibili.com/video/av1251359835/

先给源码和模块: Win8Loading.7z (1.44 MB, 下载次数: 30) 更新内容:

效果示例(黑月界面类写的窗口):

win11 loading:

原理和实现效果与帖子:[易语言纯源码] [分享源码] 模仿win8加载 一致。前者是先获取 WChar,后者先获取 TChar。还有就是使用字体不一,前者用的字体为“Setup”,后者的字体为“Segoe Boot Semilight”(需要另安装)。
模块使用方法:

[易语言纯源码] [分享源码] 模仿win8加载 中演示的效果(字体为“Setup”):
因为用的字体不同,所以与平常看到的不同(“Setup”是 [易语言纯源码] [分享源码] 模仿win8加载 例程内置的字体,其实需要资源加载的)

换用字体:“Segoe Boot Semilight”,这就顺眼多了


Win7 的开机动画和登录动画(加载中)都以位图资源的形式存在EXE/DLL中(具体文件已经忘了)。而到了 Win8/Win10(Win11 不清楚),开机的加载动画存在字体文件中,该文件存放在“%WinDir%\Boot\Fonts” 文件夹中。一个为“segoe_slboot.ttf”,另一个为“segoen_slboot.ttf”。(这两个字体对应的字体名称皆为“Segoe Boot Semilight”)“segoen_slboot.ttf”这个字体是为了适应显示器为 16:9 而屏幕分辨率为 4:3 的)。

对应区段:U+E052 ~ U+E0CB
一般16:9的显示器显示4:3的分辨率会拉伸。如以下演示:
WinXP
640*480 分辨率在 4:3 的显示器上

640*480 分辨率在 16:9 的显示器上

Win7
1024*768 分辨率在 4:3 的显示器上

1024*768 分辨率在 16:9 的显示器上


而到了 Win8,16:9 的显示器也比较普及,但开机时的分辨率却仍是 4:3,所以,为了开机界面适应 16:9 的屏幕,则会缩放位图和字体一定的宽度。“segoen_slboot.ttf”也是为此而生的。
这个在虚拟机安装 Win8 时的部署界面能看出来:
Win8
分辨率为 1024*768:
拉伸前(4:3 显示器):

16:9 拉伸后:


用字体实现 Loading 动画其实有些优点:一是字体显示都是矢量,可以任意调大小不失真,也可以适应各种背景,如果背景是图片的话拿透明标签就可以;二是相较于 Win7 的开机动画来说是一种优化,用 标签 载入文本比 用 图片框 载入图片更能节省内存空间。

至于 Metro 应用(适用于 Windows 8 及以上版本)和 UWP 应用(适用于 Windows 10 及以上版本),其实有单独一套的加载动画,例如 Windows 8 的应用商店: 从源文件扣了一下(我不懂 HTML 和 CSS,我只是看着扣下来的,测试了一下能正常打开,估计扣对了):
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<!-- Copyright (C) Microsoft. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <link rel="Stylesheet" type="text/css" href="Win8Load.css" />
</head>
<body>
    <div id="splash">
        <div id="splashContent">
            <progress id="splashProgress"></progress>
        </div>
    </div>
</body>
</html>

[CSS] 纯文本查看 复制代码
/*! Copyright (C) Microsoft. All rights reserved. */
#splash
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 1;
}
#splashContent
{
    position: absolute;
    text-align: center;
}
#splashProgress
{
    width: 30px;
    height: 30px;
    margin-top: 32px;
    border-style: none;
    background-color: transparent;
    z-index: 2;
    color: White;
}
#splashProgress::-ms-fill
{
    animation-name: -ms-ring;
}

MetroLoading.7z (45.62 KB, 下载次数: 4) 演示效果:

只能通过 IE 10 及以上版本演示(易语言的超文本浏览框和其他浏览器无法显示)
(Win10的登录界面都6个点5个点混着用,其实 Windows 10 的登录界面用了 UWP 元素)

还有一种横着的加载动画,论坛里已经有人仿出来了:
win10系统加载动画 调用了Direct2D绘制,内附D2D模块
https://125.confly.eu.org/forum.php?mod=viewthread&tid=14397540
(出处: 精易论坛)
还有就是从 IE 入手。其实我也不太明白,只能给大家借鉴了。

这种 loading 在不同浏览器效果不一样

易语言带的超文本浏览看是无法通过这种方式显示横式的 loading 动画的。

给个内容的小示例(还是像之前扣了一下):
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loading</title>
</head>
<body >
    <div id="dlgRingProgress" class="dialog-progress">
        <div class="dialog-progress-loading">
            <div class="dialog-progress-div"><progress class="win-ring"></progress></div>
        </div>
    </div>
</body>
</html>


这种loading的IE浏览器版本有要求,至少为ie10(这是到了 Windows 8 才有的版本)
Internet Explorer 11 for Windows 7 演示:

帖子:[易语言纯源码] [分享源码] 模仿win8加载 中的“Setup”字体的映射如下图所示:

范围为:U+E052 ~ U+E0CB,范围与 Segoe Boot Semilight 一致。







补充内容 (2024-4-4 16:07):
修改了一个小地方,请从这里下载新版本:链接:https://pan.baidu.com/s/1V_dKatI31YmGdUm0RNANsQ?pwd=64l7
提取码:64l7

屏幕截图 2024-03-08 153930.png (7.67 KB, 下载次数: 2)

屏幕截图 2024-03-08 153930.png

作者: 447485268    时间: 2024-3-8 15:44
支持开源~!感谢分享
作者: 铅笔刀    时间: 2024-3-8 16:07
六 竟然研究这些东西
作者: wlsk888    时间: 2024-3-8 17:23
谢谢分享,没搞懂(用 计次%121 即可)是什么意思,给个调用模块的例子啊
作者: 1184798949    时间: 2024-3-8 17:41
支持开源~!感谢分享
作者: wuqingg    时间: 2024-3-8 18:07
支持开源,感谢分享~
作者: yyyxb    时间: 2024-3-8 18:45
wlsk888 发表于 2024-3-8 17:23
谢谢分享,没搞懂(用 计次%121 即可)是什么意思,给个调用模块的例子啊

就是求余数,我说的是求余数运算。如果是循环,这样写就行
以下是示例:
  
窗口程序集名保 留  保 留备 注
窗口程序集_窗口1   
变量名类 型数组备 注
Exit逻辑型  

子程序名返回值类型公开备 注
_窗口1_创建完毕  
透明标签3.字体.字体名称 = #SegoeBootFontName
启动线程 (&ThreadShowProgress, , )
子程序名返回值类型公开备 注
ThreadShowProgress  
变量名类 型静态数组备 注
Count整数型 
判断循环首 (Exit = )
透明标签3.标题 = GetLoadingFontChar (Count % 121)  ' 求余数,结果区间为 [0, 120]
Count = Count + 1
延时 (30)
判断循环尾 ()
返回 ()
子程序名返回值类型公开备 注
_窗口1_将被销毁  
Exit = 真
返回 ()


i支持库列表   支持库注释   
iext扩展界面支持库一
EThread多线程支持库



如果是时钟更简单了。
先把时钟周期设置为 30。
然后:(示例)
  
子程序名返回值类型公开备 注
_窗口1_创建完毕  
透明标签4.字体.字体名称 = #SegoeBootFontName
子程序名返回值类型公开备 注
_时钟1_周期事件  
变量名类 型静态数组备 注
Count整数型或者设置为程序集变量或全局变量
透明标签4.标题 = GetLoadingFontChar (Count % 121)  ' 求余数,结果区间为 [0, 120]
Count = Count + 1
返回 ()


i支持库列表   支持库注释   
iext扩展界面支持库一


如果背景为纯色,建议还是用标签。
演示.7z (2.3 MB, 下载次数: 3)

作者: 光影魔术    时间: 2024-3-8 19:57
感谢分享
作者: 易YY业务    时间: 2024-3-8 20:06
支持开源~!感谢分享
作者: ttggnn    时间: 2024-3-8 20:30
        支持开源~!感谢分享
作者: chenxiao20    时间: 2024-3-8 20:42
windows11行不
作者: wffhhy    时间: 2024-3-8 20:46
厉害了我的哥
作者: yyyxb    时间: 2024-3-8 21:33
chenxiao20 发表于 2024-3-8 20:42
windows11行不

这个不限系统,只要安装了字体就行
模仿win8加载 https://125.confly.eu.org/forum.php?mod=viewthread&tid=13753807 (出处: 精易论坛)
这里的例程还包括动态加载字体资源的例子
作者: ZHuanR    时间: 2024-3-8 22:44
新技能已get√
作者: 396384183    时间: 2024-3-9 00:49
支持开源~!感谢分享
作者: 查过    时间: 2024-3-9 07:04
感谢分享,很给力!~
作者: 豆豆灰常开心    时间: 2024-3-9 07:09
全都是大佬~
作者: fengyyun    时间: 2024-3-9 08:07
感谢分享,很给力!~

作者: jysoft2022    时间: 2024-3-9 08:34
感谢分享
作者: xz0455    时间: 2024-3-9 08:57
Win8 Win10 开机加载Loading动画源码开源必须支持
作者: 小虎来了    时间: 2024-3-9 10:19
感谢分享,很给力!~
作者: zaozi    时间: 2024-3-9 19:04
这个可以
作者: 查过    时间: 2024-3-10 07:13
感谢发布原创作品,精易因你更精彩!6666666666666
作者: 豆豆灰常开心    时间: 2024-3-10 07:18
下个学习一下
作者: 一指温柔    时间: 2024-3-10 09:00
感谢分享,很给力!~
作者: bianyuan456    时间: 2024-3-11 23:51
已经顶贴,感谢您对论坛的支持!
作者: pipicool    时间: 2024-3-13 20:46
学习一下
作者: 胖子葛格    时间: 2024-3-31 14:17
感谢大神分享~!
作者: 特别nb    时间: 2024-5-6 01:04
exui如何使用?
作者: yyyxb    时间: 2024-5-6 13:21
特别nb 发表于 2024-5-6 01:04
exui如何使用?

置字体,然后置文本就行,其实差不多的
作者: kyo9766    时间: 2024-6-20 14:56
学习一下加载动画,感谢分享




欢迎光临 精易论坛 (https://125.confly.eu.org/) Powered by Discuz! X3.4