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
,创建一个流光动画实例对象,同时我们需要传递两个参数,第一个参数是指定的canvas
DOM对象,第二个参数是options
配置参数,之后我们通过调用内嵌的animate
接口,开始播放流光动画
4.2 单帧动画渲染
有时候,我们页面并不只是流光动画,还有其它的需要渲染,此时我们就可以使用单帧动画的方式,来进行兼容处理
let lightObj;
... //options配置省略
window.onload = function() {
lightObj = new FlowingLight(document.getElementById('light'),options);
heart();
};
function heart() {
requestAnimationFrame(heart); //心跳循环
lightObj.drawLight(); //执行流光动画实例,单帧渲染逻辑
}