反馈已提交

网络繁忙

JS实现抽象动画背景

  • 文档创建者:L大大
  • 编辑次数:7次
  • 最近更新:RosieY 于 2021-01-26
  •  1. 概述

    1.1 预期效果

    大屏场景下,给决策报表添加一个酷炫的抽象动画背景,效果如下图所示:

    抽象动画背景.gif

    1.2 实现思路

    插入 JS 代码,引用外部 CSS 文件,生成动态抽象背景。

    2. 示例

    2.1 报表设计

    新建决策报表,选中 body 组件,添加初始化后事件,如下图所示:

    121.png

    JavaScript 代码如下:

    $("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
    var smoothTrail = function(c, cw, ch){
      this.init = function(){
        this.loop();
      };

      var _this = this;
      this.c = c;
      this.ctx = c.getContext('2d');
      this.cw = cw;
      this.ch = ch;
      this.mx = 0;
      this.my = 0;
      
      //trail
      this.trail = [];
      this.maxTrail = 200;
      this.mouseDown = false;
      
      this.ctx.lineWidth = .1;
      this.ctx.lineJoin = 'round';
      
      this.radius = 1;
      this.speed = 0.4;
      this.angle = 0;
      this.arcx = 0;
      this.arcy = 0;
      this.growRadius = true;
      this.seconds = 0;
      this.milliseconds = 0;
      

      this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
      this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
      

      this.createPoint = function(x, y){
        this.trail.push({
          x: x,
          y: y
        });
      };

      this.updateTrail = function(){
        
        if(this.trail.length < this.maxTrail){
          this.createPoint(this.arcx, this.arcy);
        }
        
        if(this.trail.length >= this.maxTrail){
          this.trail.splice(0, 1);
        }
      };
      
      this.updateArc = function(){
        this.arcx = (this.cw/2) + Math.sin(this.angle) * this.radius;
        this.arcy = (this.ch/2) + Math.cos(this.angle) * this.radius;
        var d = new Date();
        this.seconds = d.getSeconds();
        this.milliseconds = d.getMilliseconds();
        this.angle += this.speed*(this.seconds+1+(this.milliseconds/1000));
        
        if(this.radius <= 1){
          this.growRadius = true;
        } 
        if(this.radius >= 200){
          this.growRadius = false;
        }
        
        if(this.growRadius){
          this.radius += 1;
        } else {
          this.radius -= 1;
        }
      };
      

      this.renderTrail = function(){
        var i = this.trail.length;
        
        this.ctx.beginPath();
        while(i--){
          var point = this.trail[i];
          var nextPoint = (i == this.trail.length) ? this.trail[i+1] : this.trail[i];
          
          var c = (point.x + nextPoint.x) / 2;
          var d = (point.y + nextPoint.y) / 2;
          this.ctx.quadraticCurveTo(Math.round(this.arcx), Math.round(this.arcy), c, d);
          
          
          
        };
        this.ctx.strokeStyle = 'hsla('+this.rand(170,300)+', 100%, '+this.rand(50, 75)+'%, 1)';
        this.ctx.stroke();
        this.ctx.closePath();
        
      };
     

      this.clearCanvas = function(){
        //this.ctx.globalCompositeOperation = 'source-over';
        //this.ctx.clearRect(0,0,this.cw,this.ch);
        
        this.ctx.globalCompositeOperation = 'destination-out';
        this.ctx.fillStyle = 'rgba(0,0,0,.1)';
        this.ctx.fillRect(0,0,this.cw,this.ch);
        this.ctx.globalCompositeOperation = 'lighter';
      };
      

      this.loop = function(){
        var loopIt = function(){
          requestAnimationFrame(loopIt, _this.c);
          _this.clearCanvas();
          _this.updateArc();
          _this.updateTrail();
          _this.renderTrail();
        };
        loopIt();
      };
      
    };

    var isCanvasSupported = function(){
      var elem = document.createElement('canvas');
      return !!(elem.getContext && elem.getContext('2d'));
    };

    var setupRAF = function(){
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
      };
      
      if(!window.requestAnimationFrame){
        window.requestAnimationFrame = function(callback, element){
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
          lastTime = currTime + timeToCall;
          return id;
        };
      };
      
      if (!window.cancelAnimationFrame){
        window.cancelAnimationFrame = function(id){
          clearTimeout(id);
        };
      };
    };

      if(isCanvasSupported){
        var c = document.createElement('canvas');
        c.width = 400;
        c.height = 400;
        var cw = c.width;
        var ch = c.height;
        document.body.appendChild(c);
        var cl = new smoothTrail(c, cw, ch);
        
        setupRAF();
        cl.init();
      }

    2.2 引用CSS

    1)将 sty.css 拷贝到目录%FR_HOME%\webapps\webroot\help\css下,如下图所示:

    1592538065121761.png

    2)选中 body,再次添加一个初始化事件,引用上述 CSS 文件,如下图所示:

    Snag_1dffb6f5.png

    JavaScript 代码如下:

    var link = '<link rel="stylesheet" href="' + FR.server + '/help/css/sty.css">';
    $("head").append(link);

    2.3 效果预览

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

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现抽象动画背景.frm

    点击下载模板:JS实现抽象动画背景.frm

    点击下载 CSS 文件:sty.css

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭