用canvas写了一个流光特效插件

4,915 阅读5分钟

1. 前言

本插件初衷专为 大数据可视化页面打造,提供UI的流光动效

插件提供了直线流光、曲线流光两种动效方式,并且内置有单帧渲染方法、自动动画方法等等

背景素材是用的网上找的资源

2. 效果展示

1.gif

2.gif

3.gif

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

光线移动轨迹的关键坐标点,可配置多个点位,以形成一条轨迹线

参数说明类型
xx轴坐标Number
yy轴坐标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();   //执行流光动画实例,单帧渲染逻辑
}