JS实现时间烟花特效

编辑
  • 文档创建者:Kevin-s
  • 浏览次数:882次
  • 编辑次数:3次
  • 最近更新:susie 于 2019-07-29
  • 1.描述

    有时候我们需要在决策报表集成一些特效,这篇文档主要是集成一个时间烟花效果,效果如下图:

    时间烟花.gif

    2. 实现思路

    利用 HTIML5 技术就可以实现,可以实现时间获取以及添加粒子烟花效果

    3. 操作步骤/示例

    首先新建决策报表,添加报表块,在报表看单元格输入以下代码,然后用 HTML 显示,效果如下图:

    1111.png

    <canvas id="canvas" height="800" width="1200"></canvas>

    其次点击报表块-事件-初始化后添加 JS 代码

    2222.jpg

    JS 代码如下:


    setTimeout(
    function(){
    let dt = 0.1;//每帧表示的时间间隔
    //球体
    class Ball{
        constructor(x,y,r,id){
            this.pos = new Vector2(x,y);//记录当前坐标
            this.id = id;
            this.color = '';
            this.r = r;
            this.velocity = null;
            this.life = true;
        }
        //更新粒子坐标
        update(){
            //重力加速度影响速度
            this.velocity = this.velocity.add(g.multiply(dt));
            //速度影响位移
            this.pos = this.pos.add(this.velocity.multiply(dt));
            //如果粒子已经出界则标记生命耗尽
            if(this.pos.y > 280){
                this.life = false;
            }
        }
        paint(){
            if(!this.life)return;
            context.beginPath();
            context.fillStyle = this.color;
            context.arc(this.pos.x ,this.pos.y, this.r, 0, Math.PI * 2 , false);
            context.fill();
        }
    }
    class Timer{
        constructor(){
            this.lastTime = Date.now();
            this.label = new Date(this.lastTime).Format('hh:mm:ss');
            this.step = 0;
            this.shouldAnim = 0;
        }
        update(){
           this.step = (this.step + 1) % 60;
           this.shouldAnim = (this.shouldAnim + 1) % 120;
           if (!this.step) {
              this.lastTime = Date.now();
              this.label = new Date(this.lastTime).Format('hh:mm:ss');
           }
        }
        paint(ctx){
            context.fillStyle = "#353535";
            ctx.fillText(this.label, 200, 100);
        }
    }
    //二维向量定义
    Vector2 = function(x, y) { this.x = x; this.y = y; };
    Vector2.prototype = {
        copy: function() { return new Vector2(this.x, this.y); },
        length: function() { return Math.sqrt(this.x * this.x + this.y * this.y); },
        sqrLength: function() { return this.x * this.x + this.y * this.y; },
        normalize: function() { var inv = 1 / this.length(); return new Vector2(this.x * inv, this.y * inv); },
        negate: function() { return new Vector2(-this.x, -this.y); },
        add: function(v) { return new Vector2(this.x + v.x, this.y + v.y); },
        subtract: function(v) { return new Vector2(this.x - v.x, this.y - v.y); },
        multiply: function(f) { return new Vector2(this.x * f, this.y * f); },
        divide: function(f) { var invf = 1 / f; return new Vector2(this.x * invf, this.y * invf); },
        dot: function(v) { return this.x * v.x + this.y * v.y; }
    };
        
       
         const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    // 日期格式化工具
    Date.prototype.Format = function(fmt)   
    { //author: meizz   
      var o = {   
        "M+" : this.getMonth()+1,                 //月份   
        "d+" : this.getDate(),                    //日   
        "h+" : this.getHours(),                   //小时   
        "m+" : this.getMinutes(),                 //分   
        "s+" : this.getSeconds(),                 //秒   
        "q+" : Math.floor((this.getMonth()+3)/3), //季度   
        "S"  : this.getMilliseconds()             //毫秒   
      };   
      if(/(y+)/.test(fmt))   
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
      for(var k in o)   
        if(new RegExp("("+ k +")").test(fmt))   
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
      return fmt;   
    }  
    var colorPalette = [
        "#2ec7c9",
        "#b6a2de",
        "#5ab1ef",
        "#ffb980",
        "#d87a80",
        "#8d98b3",
        "#e5cf0d",
        "#97b552",
        "#95706d",
        "#dc69aa",
        "#07a2a4",
        "#9a7fd1",
        "#588dd5",
        "#f5994e",
        "#c05050",
        "#59678c",
        "#c9ab00",
        "#7eb00a",
        "#6f5553",
        "#c14089"
    ];
    let balls = [];
    let timer = new Timer();
    let rightBorder = 800;
    let bottomBorder = 300;
    let gap = 5;
    let xs = 380; //文字所占区域宽度
    let ys = 120; //文字所占区域高度
    let imgData =[];//覆盖文字的矩形区域的像素点信息
    let checkPercent = 0.4;//检测区域中非白色像素点的比例小于限制时需要生成烟花
    let textLeft = 180; //文字距离画布左侧距离
    let textTop = 80;//文字距离画布上侧距离
    let g = new Vector2(0,9.8);//重力加速度
    start();
    function start() {
        init();
        requestAnimationFrame(startAnim);
    }
    //初始化设置
    function init(){
        // 设置字体
        context.font = "80px bold impact";
        // 设置颜色
        context.fillStyle = "black";
        // 设置水平对齐方式
        context.textAlign = "left";
        // 设置垂直对齐方式
        context.textBaseline = "top";
    }
    //绘制背景
    function paintBg() {
       context.strokeStyle = "#353535";
       context.lineWidth = 1;
       context.fillStyle = "white";
       context.fillRect(1,1,rightBorder - 1, bottomBorder - 1);
       context.strokeRect(0,0,rightBorder,bottomBorder);
    }
    //帧动画
    function startAnim() {
        //重绘背景
        paintBg();
        //更新计时器状态
        timer.update();
        timer.paint(context);
        //时间发生变化时,生成新的小球并推入数组
        handleTimerChange();
        //更新每个小球的状态
        balls = balls.map(ball=>{
          ball.update();
          ball.paint();//描线但不在画布上绘制
          return ball;
        }); 
        //绘制每个小球位置
    requestAnimationFrame(startAnim);
    }
    //时间变化时生成爆破
    function handleTimerChange() {
      let position;
      //如果时间变化,则生成新的爆破小球
      if (!timer.shouldAnim) {
          //过滤掉生命耗尽的粒子
          balls = balls.filter(ball=>ball.life);
          //生成新的文字烟花
          for(let y = 0; y < ys / gap; y++){
            for(let x= 0; x < xs / gap ; x++){
               position = shouldAddBall(x, y);
               if (position) {
                   addBall(position);
               }
            }
          }
      }
    }
    //检测指定区块是否需要生成烟花圆
    function shouldAddBall(x, y) {
       let pixels = context.getImageData(textLeft + x*gap, textTop + y*gap, 5, 5);
       if(!count(pixels)) return
       return {
          x:textLeft + x*gap,
          y:textTop + y*gap
       }
    }
    function count(pixels) {
       let data = pixels.data;
       let total = data.length;
       let num = data.filter(item=>item !== 255).length;
       return (num / total) > checkPercent;
    }
    //每隔一定时间增加一个新的球体
    function addBall(pos) {
       let {x,y} = pos;
       let r = Math.ceil(Math.random() * 4+1);
       let i = Math.ceil(Math.random() * 16);
       let left = pos.x < (textLeft + xs / 2) ? -1 : 1;
       let ball = new Ball(x,y,r,balls.length);
           ball.color = colorPalette[i];
           ball.velocity = new Vector2(left * 10 *Math.random(), -20 * Math.random());
           balls.push(ball);
    }
    },1000);


    4. 效果查看

    4.1 PC 端效果

    点击分页预览,效果如上图。

    4.2 移动端效果

    注:不支持移动端

    5.已完成模板(提交附件)

    已完成模板:

    时间烟花效果.frm


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]