反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现粒子穿梭背景

  • 文档创建者:L大大
  • 历史版本:4
  • 最近更新:Alicehyy 于 2022-08-22
  • 1. 概述

    1.1 预期效果

    大屏场景下,给决策报表添加一个酷炫的粒子穿梭背景,效果如下图所示:

    1592266198418337.gif

    1.2 实现思路

    设置初始化 JS 事件来生成动态背景。

    2. 示例

    2.1 设计报表

    注:需先将 body 属性中的背景设置为「没有背景」。

    点击 body 组件,添加初始化后事件,如下图所示:

    121.png

    JavaScript 代码如下:

    $("body").prepend('<canvas id="mycanvas" style="position:absolute;z-index:-2; background-color:black;"></canvas>');
    var canvas = mycanvas; 
    var w = window.innerWidth;
    var h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
    canvas.backgroundColor = "#000";
    var ctx = canvas.getContext('2d');
     
    function Build() {
        this.ctx = ctx;
        this.counts = 3000;  
        this.maxSize = 4;  
        this.halfWidth = w / 2,
            this.halfHeight = h / 2;
        this.arr = [];  
    }
    Build.prototype.add = function(coor) {
        var grd = this.ctx.createRadialGradient(coor.x, coor.y, coor.size / 2, coor.x, coor.y, coor.size);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, coor.color);
        this.ctx.fillStyle = grd;
        this.ctx.beginPath();
        this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true);
        this.ctx.transform(1, 0, 0, 1, 0, coor.z);
        this.ctx.closePath();
        this.ctx.fill();
    }
    Build.prototype.init = function() {
        this.run();
        this.render();
        this.animate();
    }
    Build.prototype.run = function() {
        var nums = 0;
        while (nums < this.counts) {
            var coor = {
                x: Math.ceil(Math.random() * w),
                y: Math.ceil(Math.random() * h),
                posx: Math.random() * w - this.halfWidth,
                posy: Math.random() * h - this.halfHeight,
                fl: 100,
                speed: Math.random() * 2,
                posz: Math.random() * 250,
                r: Math.ceil(Math.random() * this.maxSize),
                color: "rgba(" + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.random() + ")"
            };
            this.arr.push(coor);
            nums++;
        }
    }
    Build.prototype.clear = function() {
        ctx.clearRect(0, 0, w, h);
    }
    Build.prototype.render = function() {
        this.clear();
        for (var item of this.arr) {
            this.draw(item);
        }
    }
    Build.prototype.animate = function() {
            var _this = this;
            this.render(); 
            window.requestAnimationFrame(function() {
                _this.animate();
            });
        },
        Build.prototype.draw = function(item) {
            if (item.posz > -item.fl) { 
                var scale = item.fl / (item.fl + item.posz); 
                item.x = this.halfWidth + item.posx * scale;
                item.y = this.halfHeight + item.posy * scale;
                item.size = item.r * scale;
                item.posz -= item.speed;
            } else { 
                item.posz = Math.random() * 250;
            }
            this.add(item);
        }
    var app = new Build();
    app.init();
    window.addEventListener('resize', function() {
        canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;
    }, false); 

    2.2 效果预览

    保存模板,点击「PC端预览」,效果如 1.1 预期效果 中所示。

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现粒子穿梭.frm

    点击下载模板:JS实现粒子穿梭.frm

    附件列表


    主题: 场景应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526