Backstage, people always ask Lao Li why the big screen he made is uglier than others, and then give Lao Li a picture. Lao Li took a look at it and said, "Hey guys, the whole big screen is just a static picture with no animation at all. Who can see this and not say it's ugly? Let's not talk about color matching. The animation alone is inferior to others." A lot.
Lao Li will not talk about the color matching issue this time. He has already shared how to choose colors for large screens in previous articles. This time Lao Li will focus on talking about the issue of large screen dynamic effects. Good dynamic effects can directly improve the performance of large screens. It’s very stylish with a big screen, so without further ado, just go ahead and take the picture:
This is the particle vortex background. In a large screen scenario, adding a dynamic particle vortex background to a decision-making report will have such an effect. Isn’t it very cool and amazes the viewer? It's like visiting an astronomical exhibition and being in the universe.
This motion effect production is not difficult. Lao Li will explain it to you below!
First, taking FineReport as an example, set the body background to "Custom > No Background".
Then, add a post-initialization event to the body.
The JavaScript code is as follows:
$(“body”).prepend(‘’);
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var w = canvas.width;
var h = canvas.height;
var part_count = 600;
var P = [];
was X, Y;
var angle = 0.01;
var centerX = w * 0.5,
centerY = h * 0.5;
var part = function(x,y,ix,iy,vx,vy,a,dist) {
this.x = x;
this.y = y;
this.ix = ix;
this.iy = iy;
this.vx = vx;
this.vy = vy;
this.a = a;
this.dist = dist;
}
function init(){
var x,y,ix,iy,vx,vy,a,dist;
for(var i=0; i<part_count;i++){
ix = x;
iy = y;
vx = random(-1,1);
vy = random(-1,1);
rand = random(-80,100);
dist = part_count/10+i;
a = 1;
P.push(new part(x,y,ix,iy,vx,vy,a,dist));
}
}
init();
function bg(){
ctx.fillStyle = ‘#000000’;
ctx.globalAlpha=0.9;
ctx.fillRect(0,0,canvas.width,canvas.height,1);
}
function distance(dx,dy){
return Math.sqrt(dx * dx + dy * dy);
}
function draw(){
for(var i=0; i<P.length;i++){
var p = P[i];
p.a += 0.008;
p.x = centerX + Math.cos(i+p.a) * (p.dist*i*0.1);
p.y = centerY + Math.sin(i+p.a) * (p.dist);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(p.x, p.y,2, 2);
}
}
function loop(){
bg();
draw();
window.requestAnimationFrame(loop);
}
loop();
function resize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
centerX = window.innerWidth * 0.5;
centerY = window.innerHeight * 0.5;
}
function random(min, max) {
return Math.random() * (max - min) + min;
}
window.onresize = resize;
Finally, save the decision report and click "PC Preview" to create a particle vortex background.
But in fact, in actual operation, you can apply these dynamic effects to your big screen by directly applying the template without typing any code. Lao Li has already done all the work of typing the code in advance, so everyone can apply it directly. template!
Abstract animated background
Particle shuttle background
Rotating starry sky background
Dynamic wave background
The templates shared by Lao Li are all added with these cool special effects, and the colors are also carefully selected. You are guaranteed to become the most handsome among your colleagues as soon as you use it, and your boss will be stunned. Don’t miss it when you pass by!
Bank deposit and loan data analysis
Retail business analysis,
real estate decontamination analysis,
workshop production monitoring signboard,
highway port comprehensive signage,
and backend reply template are available for free!