1. 前言
本插件初衷专为 大数据可视化页面打造，提供UI的流光动效
插件提供了直线流光、曲线流光两种动效方式，并且内置有单帧渲染方法、自动动画方法等等
背景素材是用的网上找的资源
2. 效果展示
3. API
3.1 config
Object光线的相关配置，每条光线单独配置
3.1.1 config.moveType
String流光移动方式，可以选择
line或者curve，默认值为line
config: {
moveType: 'curve',
}
3.1.2 config.isBridgePattern
boolean是否开启桥接模式，如果移动轨迹为简单的单方向时，推荐开启，这样动画会更加的顺滑
可以选择
true或者false，默认值为false
3.1.3 config.length
number流光光线长度（单位px），默认值为40
config: {
length: 100, //如果不配置该参数，那么其值默认为40
}
1.4 config.shade
number流光两头渐变长度，
length包含了该长度，默认值是length的1/3不要将shade设置的过长，否则会出现一些无法预料的问题(一般情况下，不用设置，默认即可)
3.1.5 config.speedDistance
number流光单帧移动的距离（单位px），默认值是2
config: {
speedDistance: 2, //如果不配置该参数，那么其值默认为2
}
3.1.6 config.color
string流光主体颜色（仅支持rgb三元色），默认值为255,255,255，即白色
config: {
color: '0, 181, 253', //如果不配置该参数，那么其值默认为 255,255,255
}
3.1.7 config.lineWidth
number流光线条粗细度（单位px），默认值是1
3.1.8 config.shadowBlur
number流光阴影模糊度（单位px），默认值为0
3.1.9 config.shadowColor
string流光阴影颜色（仅支持rgb三颜色），默认值与color同步
3.1.10 config.interval
number流光循环动画间隔时间（单位s），默认值为0
如果希望流光播放完毕后，隔一段时间再继续，那么控制它即可
config: {
interval: 1, //如果不配置该参数，那么其值默认为0 也就是立即循环
}
3.1.11 config.delay
number动画起始的延迟时间（单位s），默认值为0
如果希望流光一开始等待一段时间才开始，那么控制它即可
3.2 points
Array光线移动轨迹的关键坐标点，可配置多个点位，以形成一条轨迹线
| 参数 | 说明 | 类型 |
|---|---|---|
| x | x轴坐标 | Number |
| y | y轴坐标 | Number |
| cp | 二次贝塞尔曲线控制点（曲线专用） | Number |
points: [
{
x: 772,
y: 115,
},
{
x: 582,
y: 272,
cp: [569,172],
},
{
x: 773,
y: 409,
cp: [602,368]
},
{
x: 1160,
y: 407,
cp: [960,455],
},
],
注意：
以上配置，均只针对于一条线，如果希望同时有多条线，那么每条线均需要单独配置，例如以下
options
let options = [
{
config: {
moveType: 'curve', //line 直线 curve曲线
shade: 40, //渐变长度
length: 100, //光线长度
speedDistance: 8, //每帧移动距离
color: '0, 181, 253', //线条颜色
lineWidth: 2, //线条粗细
shadowBlur: 5, //线条阴影模糊级别
shadowColor: '#0ccf67', //阴影颜色
interval: 1, //循环动画间隔时间
},
points: [
{
x: 772,
y: 115,
},
{
x: 582,
y: 272,
cp: [569,172],
},
{
x: 773,
y: 409,
cp: [602,368]
},
{
x: 1160,
y: 407,
cp: [960,455],
},
],
},
{
config: {
moveType: 'line', //line 直线 curve曲线
shade: 30, //渐变长度
length: 60, //光线长度
speedDistance: 5, //每帧移动距离
color: '0, 181, 253', //线条颜色
lineWidth: 5, //线条粗细
shadowBlur: 5, //线条阴影模糊级别
shadowColor: '#0ccf67', //阴影颜色
interval: 2, //循环动画间隔时间
},
points: [
{
x: 960,
y: 242,
},
{
x: 960,
y: 129,
},
],
},
{
config: {
moveType: 'line', //line 直线 curve曲线
shade: 30, //渐变长度
length: 60, //光线长度
speedDistance: 7, //每帧移动距离
color: '0, 181, 253', //线条颜色
lineWidth: 5, //线条粗细
shadowBlur: 5, //线条阴影模糊级别
shadowColor: '#0ccf67', //阴影颜色
interval: 2, //循环动画间隔时间
},
points: [
{
x: 960,
y: 242,
},
{
x: 1112,
y: 369,
},
],
},
{
config: {
moveType: 'line', //line 直线 curve曲线
length: 120, //光线长度
speedDistance: 7, //每帧移动距离
color: '0, 181, 253', //线条颜色
lineWidth: 2, //线条粗细
shadowBlur: 5, //线条阴影模糊级别
shadowColor: '#0ccf67', //阴影颜色
},
points: [
{
x: 100,
y: 100,
},
{
x: 100,
y: 300,
},
{
x: 300,
y: 300,
},
{
x: 300,
y: 100,
},
{
x: 100,
y: 100,
},
],
},
];
4. 使用方式
4.1 使用内嵌动画
本插件内嵌有开启动画的接口，我们通过配置初始化以后，直接调用，即可播放流光动画
... //options配置省略
window.onload = function() {
new FlowingLight(document.getElementById('light'),options).animate();
};
上述案例，我们通过
new FlowingLight，创建一个流光动画实例对象，同时我们需要传递两个参数，第一个参数是指定的canvasDOM对象，第二个参数是options配置参数，之后我们通过调用内嵌的animate接口，开始播放流光动画
4.2 单帧动画渲染
有时候，我们页面并不只是流光动画，还有其它的需要渲染，此时我们就可以使用单帧动画的方式，来进行兼容处理
let lightObj;
... //options配置省略
window.onload = function() {
lightObj = new FlowingLight(document.getElementById('light'),options);
heart();
};
function heart() {
requestAnimationFrame(heart); //心跳循环
lightObj.drawLight(); //执行流光动画实例，单帧渲染逻辑
}
