web loding 自定义加载动画插件

官网

指南

介绍

Web 中实现 loading 的方式有很多种，例如使用css动画、js操作元素、gif图片、svg动画、ui框架中自带loading等等，各有所优，操作元素可能更方便，但会影响性能或其他元素，动态图片性能很好，但自定义不理想。

WebLoading 是一个基于 web 封装的loading动画插件，主要model是通过Canvas绘制，这种方式不会影响到界面中的元素，当然，WebLoading也提供了html配置兼容了html加载方式。默认的model模块都提供了独自的options配置属性，如果想更贴近业务可以使用Custom进行自定义，WebLoading提供了BaseModel 继承class让你更方便自定义自己的loading，或者html加载方式。

实现

WebLoading中每一个model都是使用Canvas绘制，启动方式分别有DOM(元素挂载)、FULL(全屏)、MINI(移动端)。

原理大同小异，这里以DOM来讲述，首先我们需要initLoading初始化你需要渲染的model并提供自定义参数，当然，这个操作不是必须的，因为WebLoading已经初始化所以的默认数据，此时抛出操作WebLoading相关函数。

启动WebLoading调用loading函数需要一个HtmlElement元素，该元素必须拥有children，而不是一个单标签元素。启动WebLoading时会获取到这个挂载的元素，并在children添加一个Canvas，同时会计算该元素位置以及大小以最优显示同步到Canvas上。WebLoading会根据options参数来绘制具体的model，model中主要以requestAnimationFrame来进行回调多次渲染，以来实现每一帧动画。

注意：如果配置是通过html渲染，那么就不会走上一步。

WebLoading封装上主要分隔三层

• 交互层：开发者与WebLoading的操作，例如初始化、启动、关闭、获取相关信息等等。
• 逻辑层：获取到WebLoading接收options后进行初始化挂载的元素以及canvas等等。
• model 层：继承BaseModel获取初始化后的canvas进行绘制模块。

安装

根据自己的包管理工具下载。

npm install web-loading

使用

获取元素

// 无框架情况
let dom = document.querySelector('xxx')
// vue
let dom = ref()
// ...(目的是获取dom元素)

全局引入

• cdn引入

<script src="https://cdn.jsdelivr.net/npm/web-loading"></script>

• 工程项目 import 引入

import 'web-loading'
// 全局引入initLoading挂载在window上
let webLoading = initLoading({
  // 自定义options
})

• 或者这样

import WL from 'web-loading'
let webLoading = WL.initLoading({
  // 自定义options
})

• 参数
  • options?:OptionsType
• 返回
  • webLoading:LoadingType

TypeScript项目引入

import initLoading from 'web-loading/src/loading'
import type { LoadingType } from 'web-loading/src/types.d'
let webLoading: LoadingType = initLoading({
  // 自定义options
})

• 参数
  • options?:OptionsType
• 返回
  • webLoading:LoadingType

启动

// 注意:在网页加载完成后在调用loading
window.onload = function () {
  webLoading.loading(dom)
}

参数

• dom:挂载的HtmlElement元素

• options?:OptionsType，每次启动支持覆盖options。

启动方式

DOM、FULL、MINI三种启动方式都需要基于HtmlElement，这里FULL、MINI是扩展的启动方式，参数中无须提供HtemlElment，是因为WebLoading已经处理的元素的创建到消失的流程。

• 修改type切换启动方式

import type { LoadingType } from 'web-loading/src/type.d'
let webLoading: LoadingType = initLoading({
  type: 'mini' // 或 full
})
// 启动
webLoading.loading()

• 函数修改

import { fullLoading, miniLoading } from 'web-loading/src/loading'
let webLoading: LoadingType = fullLoading() // miniLoading
// 启动
webLoading.loading()

• 全局引入，同理，函数都已经挂载window上。
• 函数修改WebLoading内部也是修改type实现。
• 扩展启动方式无需提供元素。