Loading Animation

开发记录

开发记录

2020-11-4:内测版v0.01

1. 使用ejs模板
2. 直接替换源码。
3. 使用inject配置项来外挂css。

2020-11-5:内测版v0.02

1. 修改为pug模板。
2. 优化了css代码结构。

2020-11-5:正式版v1.0

1. 成功实现多主题配置
2. css转为stylus，支持根据指定选项加载对应样式，节省资源。
3. 保留原版spinner-box加载动画，与自定义wizard动画并存。
4. 优化代码结构，可以根据教程示例和魔改思路，自行尝试添加自定义样式。

2020-11-8:正式版v1.1

1. 新增直接使用gif图作为加载动画配置。
2. 支持自定义配置加载动画背景颜色。

2020-11-22:正式版v1.2

1. 自选修改，删除夜间模式背景色覆盖以适配image主题加载动画。

2021-01-31:正式版v1.2.1

1. 更新butterfly_v3.6.0适配方案

2021-02-22:正式版v1.3

1. 新增钢铁之心加载动画
2. 新增哈尔的移动城堡稻草人加载动画

巫师加载动画预览效果

旧版教程，只需要本站同款巫师主题的可以看这个

魔改示例

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug

这里我保留了原代码的前三行内容，这三行配合loading-js.pug控制加载动画的显隐和背景色的帷幕动画效果。

在[Blogroot]\themes\butterfly\source\css\目录下新建loading_wizard.css文件

修改[Blogroot]\_config.butterfly.yml中的配置项，

运行hexo clean && hexo generate && hexo server即可查看加载动画样式了。

bug归纳

以下为新版教程，需要改动五个主题源码文件。 相比旧版教程，优势在于可以根据配置项内的指定选项加载对应样式。 不选的样式就不加载了，有效节省资源。 同时优化了代码结构，方便读者融会贯通以后，自行添加其他加载动画。 最新版内容支持自定义图片（png,jpg,gif均可）作为加载动画

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源，将压缩包内的butterfly文件夹复制到[Blogroot]\theme\目录下覆盖现有主题文件夹即可跳过以下教程的前4步，直接到主题配置文件_config.butterfly.yml中参照第5步修改配置项。

下载资源文件

魔改步骤

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug，直接复制以下代码替换所有原代码。

此处第一行的if用于判断preloader功能是否打开。下面的case和when则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

几个if的判断机制与loading.pug类似，都是根据配置项来决定加载的样式。且默认使用旋转盒子动画。

修改[Blogroot]\themes\butterfly\layout\includes\layout.pug，以适配接下来需要添加的配置项。

修改[Blogroot]\themes\butterfly\source\css\var.styl，添加自定义修改背景色的配置项。(大概98行的位置)

修改[Blogroot]\_config.butterfly.yml的preloader配置项。

配置项参数说明：

1. enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
2. load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用’’包起来，不然会被识别成注释符。 这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
3. load_style：控制加载动画的样式，目前提供三种类型。
   • spinner-box是主题原版的盒子加载动画
   • wizard是巫师施法加载动画
   • ironheart是钢铁侠核心加载动画
   • scarecrow是稻草人跳动加载动画
   • image为自定义添加静态图片或gif作为加载动画。
4. load_image：该配置项的生效前提是load_style设置为image,内容填写图床链接或者本地相对地址。

此项为非必要修改项，主要是为了避免使用image主题时，切换夜间模式后，背景色被强制覆盖为黑色，说白了就是治疗强迫症。修改[Blogroot]\themes\butterfly\source\css\_mode\darkmode.styl第10行的--preloader-bg: darken(#121212, 2)。

其中#ca3b3e是设置为image主题时，切换为夜间模式后，自定义图片的背景色值。（切换夜间模式时，整个页面会降低色调，所以连带着自定义图片的色值也变暗，需要重新取值。）

补充内容

很多同学表示添加了加载动画以后加载半天，只能看动画却进不了站我的加载动画还被Heo说成是无限施法2333。这点主要是因为加载动画的关闭与否是与网站加载状态的load的返回值决定的，而网站加载完成与否这个概念是很暧昧的，如果加装了pwa，清空缓存后再次加载的内容可能比想象的要多。以下提供两种方案，一个超时自动结束，一个手动点击结束。两者兼容，你可以同时使用达到多重保险。

• 超时自动结束
• 手动点击结束

可以给加载动画设置一个settimeout()的函数来达到伪·加载完毕的效果，即超时了自动关闭加载动画，即使页面还在加载。 得益于loading-js使用的是原生js，所以可以给script添加async属性实现异步加载，以免阻塞后续HTML渲染。 仅仅需要给控制加载动画开关的loading-js.pug添加两行代码即可。

-   script.
+   script(async).
      var preloader = {
        endLoading: () => {
          document.body.style.overflow = 'auto';
          document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
          document.body.style.overflow = '';
          document.getElementById('loading-box').classList.remove("loaded")

        }
      }
      window.addEventListener('load',()=> {preloader.endLoading()})
+     setTimeout(function(){preloader.endLoading();}, 5000);

其中5000的单位是ms，代表你设置的最大容忍时间。可以自行修改。 这样一来，如果网站在五秒内加载完成，则优先执行window.addEventListener(‘load’,()=> {preloader.endLoading()}),如果超过5秒，则执行 setTimeout(function(){preloader.endLoading();}, 5000);,两者互不干扰。可喜可贺，可喜可贺。

给整个loading-box添加一个点击动作，点击动画就能结束。 修改[Blogroot]\themes\butterfly\layout\includes\layout.pug

butterfly_v3.0.0-v3.5.1:

butterfly_v3.6.0+:

思路分享

理论上你可以任意更改加载动画的内容，放置gif，放置静态图片，添加html，甚至是放置一个html5小游戏，只要是能够写在静态页面里的内容，都可以放在这里。当然，过于复杂的加载动画肯定是要牺牲掉网页加载速度的。

点击查看DIY动画思路

首先我们必须了解加载动画涉及到哪几个文件的修改。

如示例一样，如果想要保留背景拉开帷幕的效果，我们可以保留loading.pug的前三行，在第四行与.loading-right-bg保持相同缩进来添加新的页面元素。

样式不建议修改loading.styl,直接引入相应的css文件即可。 之后，为了保证加载完成，我们需要给自己添加的元素新增一个隐藏的属性。 例如示例中，巫师动画的顶层元素是.wizard-scene,所以需要添加

个别情况可能会遇到画布三维层级混乱，就需要定义loading-box的z-index属性。

欢迎在评论区留下你的设想。或者是托我帮忙做加载动画的样式适配（好看的话还是会帮忙的），或者是添加新的配置项构思（啊，我就客套一下，不要真的提太麻烦的需求）。