1. Introduction
This plug-in is designed for big data visualization page, providing the streamer dynamic effect of UI
The plug-in provides linear streamer, curve streamer two modes of motion, and built-in single frame rendering method, automatic animation method and so on
The background material was found on the Internet
2. Effect display
3. API
3.1 the config
ObjectLight configuration. Each light is configured separately
3.1.1 config. MoveType
StringThe streamer movement mode can be line or curve. The default value is line
config: {
moveType: 'curve',}Copy the code3.1.2 config. IsBridgePattern
booleanWhether to enable bridge mode, if the movement track is simple in one direction, it is recommended to enable, so that the animation will be more smooth
You can choose true or false. The default is false
3.1.3 config. Length
numberStreamer length (px). The default value is 40
config: {
length: 100.// If this parameter is not configured, the default value is 40
}
Copy the code1.4 the config. Shade
numberThe streamer ends with a gradient length. Length contains the length. The default value is 1/3 of length
Do not set the shade to be too long, otherwise unexpected problems will occur (in general, do not set it, the default is ok)
3.1.5 config. SpeedDistance
numberThe distance (px) the streamer moves in a single frame. Default is 2
config: {
speedDistance: 2.// If this parameter is not configured, the default value is 2
}
Copy the code3.1.6 config. Color
stringStreamer body color (only RGB ternary colors are supported). The default value is 255,255,255, that is, white
config: {
color: '0, 181, 253'.// If this parameter is not configured, the default value is 255,255,255
}
Copy the code3.1.7 config. Our lineWidth
numberStreamer line thickness (unit: px). Default value: 1
3.1.8 config. ShadowBlur
numberStreamer Shadow Blur (unit: px). Default value: 0
3.1.9 config. ShadowColor
stringStreamer shadow color (only RGB three colors are supported). The default value is synchronized with color
3.1.10 config. The interval
numberStreamer loop animation interval (in s), default value is 0
If you want the streamer to play after a period of time to continue, then you can control it
config: {
interval: 1.// If this parameter is not configured, the default value is 0
}
Copy the code3.1.11 config. Delay
numberThe delay time (in s) for the start of the animation. Default is 0
If you want to wait a while for the streamer to start, you can control it
3.2 points
ArrayThe key coordinate points of the light moving trajectory can be configured with multiple points to form a trajectory line
| parameter | instructions | type |
|---|---|---|
| x | The x coordinate | Number |
| y | Y coordinates | Number |
| cp | Quadratic Bezier curve control points (for curves) | 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],},],Copy the codeNote:
The preceding configurations apply to only one line. If you want to have multiple lines at the same time, configure each line separately, for example, options
let options = [
{
config: {
moveType: 'curve'.// Curve curve
shade: 40.// Change the length
length: 100.// Light length
speedDistance: 8.// Move distance per frame
color: '0, 181, 253'.// Line color
lineWidth: 2.// Line thickness
shadowBlur: 5.// Line shadow blur level
shadowColor: '#0ccf67'.// Shadow color
interval: 1.// Loop the animation interval time
},
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'.// Curve curve
shade: 30.// Change the length
length: 60.// Light length
speedDistance: 5.// Move distance per frame
color: '0, 181, 253'.// Line color
lineWidth: 5.// Line thickness
shadowBlur: 5.// Line shadow blur level
shadowColor: '#0ccf67'.// Shadow color
interval: 2.// Loop the animation interval time
},
points: [{x: 960.y: 242}, {x: 960.y: 129,},],}, {config: {
moveType: 'line'.// Curve curve
shade: 30.// Change the length
length: 60.// Light length
speedDistance: 7.// Move distance per frame
color: '0, 181, 253'.// Line color
lineWidth: 5.// Line thickness
shadowBlur: 5.// Line shadow blur level
shadowColor: '#0ccf67'.// Shadow color
interval: 2.// Loop the animation interval time
},
points: [{x: 960.y: 242}, {x: 1112.y: 369,},],}, {config: {
moveType: 'line'.// Curve curve
length: 120.// Light length
speedDistance: 7.// Move distance per frame
color: '0, 181, 253'.// Line color
lineWidth: 2.// Line thickness
shadowBlur: 5.// Line shadow blur level
shadowColor: '#0ccf67'.// Shadow color
},
points: [{x: 100.y: 100}, {x: 100.y: 300}, {x: 300.y: 300}, {x: 300.y: 100}, {x: 100.y: 100,},],},];Copy the code4. Usage
4.1 Using inline animation
This plug-in is embedded with open animation interface, we through the configuration initialization, directly call, you can play streamer animation
.// The options configuration is omitted
window.onload = function() {
new FlowingLight(document.getElementById('light'),options).animate();
};
Copy the codeIn this case, we create a streamer animation instance object using new FlowingLight. We pass two parameters. The first parameter is the specified canvasDOM object, and the second parameter is the Options configuration parameter
4.2 Single-frame animation rendering
Sometimes, our page is not only streamer animation, there are other need to render, at this time we can use a single frame animation, to handle compatible processing
letlightObj; .// The options configuration is omitted
window.onload = function() {
lightObj = new FlowingLight(document.getElementById('light'),options);
heart();
};
function heart() {
requestAnimationFrame(heart); // Heart cycle
lightObj.drawLight(); // Execute streamer animation instance, single frame render logic
}
Copy the code