jQ 狂野飙车9加载动画V1.1
响应国家号召，在家里待着实在是没啥娱乐方式，就下了狂野飙车9玩，期间对它这个加载动画很喜欢，觉得能搞下来，就自己仿着样式写了个加载动画，这个动画以后将加入的我的自用主题效果，废话不多说，上图！
更新
2020-2-3
- 优化的最后阶段动画展示方式
- 修复快结束动画的时候，窗口发生变化导致的动画重载
- 针对部分宽屏做了初始化原汁原味效果（默认显示固定方格位置的背景图）
预览图
教程
设置颜色
<div id="aligame" data-theme='{"backgroundColor":"#1b2a2f","borderColor":"#203c39","loadColor":"#e63a62"}'>
</div>id为aligame的元素有一个data-theme的属性，他的值为一个对象，有三个键值对：
| 键 | 值 | 说明 | 是否必须 |
|---|---|---|---|
| backgroundColor | 颜色值,可以为16进制，rgb，rgba，hsl | 该值为加载动画的背景色 | 是 |
| borderColor | 颜色值,可以为16进制，rgb，rgba，hsl | 该值为方块的边框颜色 | 是 |
| loadColor | 颜色值,可以为16进制，rgb，rgba，hsl | 该值为右下角加载动画的颜色 | 是 |
背景图也可自行替换，但是一定要在css文件中修改或者直接替换掉对应的背景图文件
触发的方式
jq的ready方法中，表示demo已经加载完毕了，然后我又加了一个对背景图的判断，由于该效果本身就很依赖背景图，所以我判断是当背景图加载完毕后出发loadEnd()方法然后触发动画，最后整个遮罩层消失。
判断背景图是否加载完毕的方法为：aligame_bg_load()
该方法在初始化方格creatGrid()方法的末尾运行。
demo
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
暂无评论数据