Win8 Win10 开机加载Loading动画源码

yyyxb · 发表于 2024-3-8 15:40:12

本帖最后由 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) 更新内容：

包含了帖子 [易语言纯源码] [分享源码] 模仿win8加载中的字体文件
以及制作了无内置资源的模块，自由度更高
搜集了字体文件

效果示例（黑月界面类写的窗口）：

win11 loading：

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

设置要实现加载动画的标签的字体为“Setup”或“Segoe Boot Semilight”【也就是模块中的常量 #SegoeBootFontName），如果设置为“Segoe Boot Semilight”，建议安装字体（也是模块内置资源“segoe_slboot”和“segoen_slboot”，写出文件后再（临时）安装字体】
向标签置文本，这个文本用模块中的 GetLoadingFontChar () 或 GetLoadingFontW () 获取。参数1的设置值范围为 0-120 （用计次%121 即可）。
可以写时钟或循环。一般每 30ms 计次+1然后再置。
到最后一帧可以通过方法设置延迟。

[易语言纯源码] [分享源码] 模仿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

447485268 · 发表于 2024-3-8 15:44:46

支持开源~！感谢分享

铅笔刀 · 发表于 2024-3-8 16:07:20

六竟然研究这些东西

wlsk888 · 发表于 2024-3-8 17:23:04

谢谢分享，没搞懂（用计次%121 即可）是什么意思，给个调用模块的例子啊

1184798949 · 发表于 2024-3-8 17:41:20

支持开源~！感谢分享

wuqingg · 发表于 2024-3-8 18:07:13

支持开源，感谢分享~

yyyxb · 发表于 2024-3-8 18:45:41

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:59

感谢分享

易YY业务 · 发表于 2024-3-8 20:06:15

支持开源~！感谢分享

ttggnn · 发表于 2024-3-8 20:30:54

支持开源~！感谢分享

		自动登录	找回密码
密码			注册

[易语言纯源码] Win8 Win10 开机加载Loading动画源码

评分

本帖被以下淘专辑推荐: