js canvas 粒子动画 电子表

 前言

从我接触canvas的第一天就觉得canvas很有趣，想搞点事情，这几天终于忍不住了，于是他来了。 

先看效果

                     

这里我做了四个大家有兴趣可以看完文章，做一个自己喜欢的动画。

思路

开始做之前，我们先分析一下这种粒子动画实现的原理，绘制的内容是由许多个带有颜色像素点构成，每个像素点在画布上都有自己的坐标。首先获取到要绘制的内容的像素点信息的数组（目标数组）例如 

[
    {x:10, y:20, color: 'rgba(255, 122, 122)'},
    {x:11, y:20, color: 'rgba(255, 122, 122)'},
    {x:12, y:20, color: 'rgba(255, 122, 122)'},
]

 然后我们就可以让这些像素点从某些特定的位置，以某种特定的方式，移动到目标位置，动画就完成了。

实现

1.获取目标数组

我们先说一下 canvas 的 getImageData() ，该方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

• R - 红色 (0-255)
• G - 绿色 (0-255)
• B - 蓝色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

真实样子是这个样子的

0，1，2，3	4，5，6，7	8，9，10，11
12，13，14，15	16，17，18，19	20，21，22，23

每四个值为一组，用来表示一个像素点的信息，每一个单元格代表一个像素。

先在一个canvas中绘制想要的内容，通过getImageData()获得像素信息，我们发现ImageData 对象的信息和我们想象中的目标数组不大一样，我们要将ImageData对象处理一下，我们将其每四个划分为一组，重新定义索引，例如我们在一个12px宽的画布中,经过分析不难发现坐标与索引之间的关系，分两种情况 n<12(画布的宽度) 时坐标为((n+1)%12, n+1)，n>12时坐标为((n+1)%12, parseInt((n+1)/ 12))

0(0,0)	1(0,1)	..	n((n+1)%12, n+1)	11(0,11)
..	..	..	..	..
			n((n+1)%12, parseInt((n+1)/ 12))

到这里功能是实现了，但是如果操作的内容很大，像素点很多，后期操作的像素点越多性能就越差，有没有什么办法可以稀释一下这些像素呢，当然有！我们可以隔一个像素取一个像素，这样像素点瞬间就减少了一倍，同理我们隔两个隔三个隔n个，这样我们就可以定义一个参数用来控制像素的稀释度

下面的事情就简单了，用代码实来现这一步

/*
* @ ImageDataFormat
* @ param { pixels 需要格式化的ImageData对象, n 稀释度 }
* @ return { Array }
*/ 

 function ImageDataFormat(pixels, n){
　　　　n = n*4
      var arr = [], //目标数组
　　　　temPixel = {}, //目标数组中存放像素信息的对象
　　　　x = 0, //像素的x坐标
　　　　y = 0  //像素的y坐标
      for (var i=0;i<pixels.data.length;i+=n){  
　　　　　　//过滤纯色背景提高性能，如背景色不可去掉可省略判断
        if(pixels.data[i] !== 0 ||  pixels.data[i+1] !== 0 || pixels.data[i+2] !== 0 ){
          var index = (i+1) / 4 //每四个划分为一组，重新定义索引
          if(index > timeDom.width){
            x = index % timeDom.width
            y = parseInt(index / timeDom.width) 
          }else{
            x = index
            y = 0
          }
          temPixel = {
            R: pixels.data[i], 
            G: pixels.data[i+1], 
            B: pixels.data[i+2], 
            A: pixels.data[i+3], 
            I:i,
            X:x,
            Y:y
          }
          
          arr.push(temPixel)
        }

      }
　　　　return arr
      
  }

2.将目标数组绘制到画布上

2.1在画布的指定位置画一个圆（一个像素点）

  /**
 * @ drawArc
 * @ param{ ctx 画布,，x x坐标，y y坐标，color 颜色}
 */
function drawArc(ctx, x, y, color){
  x = x 
  y = y 
  ctx.beginPath();
  ctx.fillStyle = color
  ctx.strokeStyle = color
  ctx.arc(x,y,0.5,0,2*Math.PI);
  ctx.closePath()
  ctx.fill()
}

2.1将点连成线，线构成面

  /**
 * 画路径
 * @param { points 格式化好的目标数组， crx 画布}
 */
function draw_path(points, ctx){

　　for(var i=0;i < points.length-1;i++){

　　　　var color = 'rgba(' + points[i].R + ',' +  points[i].G + ','  + points[i].B + ')', x, y
      drawArc(ctx,points[i].X,points[i].Y, color)
    }
}

到此我们就画出了动画的其中一帧，下面我们就要让这一帧动起来

2.2动起来

我们的动画进行其实很简单

1.画第一帧

2.清空画布

3.画下一帧

4.在清空

....

但是想让这个动画流畅的进行起来我们还要在了解一下tween(缓动动画)， window.requestAnimationFrame()

tween 我们值列举一种其他 形式感兴趣的可以自己查一下

/*
* @ 参数描述
* @ t 动画执行到当前帧所经过的时间
* @ b 起始值
* @ c 总位移值
* @ d 持续时间
*/
function easeInOutExpon(t,b,c,d){
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

 window.requestAnimationFrame()

准备工作做好了可以开工了

我么只需要将前面的函数稍微改动一下他就动起来了

  function ShowTimeInit(pixels, n){
        n = 4*n
      var arr = [], temPixel = {}, x = 0, y = 0
      for (var i=0;i<pixels.data.length;i+=n){
        if(pixels.data[i] !== 0 ||  pixels.data[i+1] !== 0 || pixels.data[i+2] !== 0 ){
          var index = parseInt ((i+1) / 4)
          if(index > timeDom.width){
            x = index % timeDom.width
            y = parseInt(index / timeDom.width) 
          }else{
            x = index
            y = 0
          }
          temPixel = {
            R: pixels.data[i], 
            G: pixels.data[i+1], 
            B: pixels.data[i+2], 
            A: pixels.data[i+3], 
            I:i,
            X:x,
            Y:y
          }
          
          arr.push(temPixel)
        }

      }
      var step = requestAnimationFrame(function(){draw_path(arr, ShowTime, step)})
      
  }
  /**
 * 画路径
 * @param path 路径
 */
function draw_path(points, ctx, step){
    ShowTime.clearRect(0,0,ShowTimeDom.width,ShowTimeDom.height);
    var pointX, pointY, randomX, randomY
    for(var i=0;i < points.length-1;i++){
        switch (mode){
            case 'left':
                pointX = randomNum(0,0)
                pointY = randomNum(0,100)
                randomX = 0
                randomY = Math.random() + Math.random()*3000
                break;
            case 'center':
                pointX = 80
                pointY = 50
                randomX = Math.random() + Math.random()*3000
                randomY = Math.random() + Math.random()*3000
                break;
            case 'random':
                pointX = 0
                pointY = 0
                randomX = Math.random() + Math.random()*3000
                randomY = Math.random() + Math.random()*3000
                break;        
            case 'flow':
                pointX = 0
                pointY = 0
                randomX = i
                randomY = i
                break;
        }

      var color = 'rgba(' + points[i].R + ',' +  points[i].G + ','  + points[i].B + ')', x, y
       x = easeInOutExpon(nowDuration + randomX, pointX, points[i].X-pointX, duration)
       y = easeInOutExpon(nowDuration + randomY, pointY, points[i].Y-pointY, duration)
      drawArc(ctx,x, y, color)
      
    }
    nowDuration += 1000/60
        if(duration <= nowDuration){
        window.cancelAnimationFrame(step);
    }else{
        requestAnimationFrame(function(){draw_path(points, ctx, step)})
    }
    
}

附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
  
  </style>
  <title>电子时钟</title>
</head>
<body>
  <canvas id="HidenTime" width="300" height="100" style="display: none"> </canvas>
  <canvas id="ShowTime" width="300" height="100"> </canvas>
</body>
<script>
  function GetTime(){
    this._Hours = ''
    this._Minutes = ''    
    this._Seconds = ''
  }
  GetTime.prototype = {
    constructor: GetTime,
    get Hours(){
      this._Hours = new Date().getHours()
      if(this._Hours > 9){
        return this._Hours
      }else{
        return "0" + this._Hours
      }
    },
    get Minutes(){
      this._Minutes = new Date().getMinutes()
      if(this._Minutes > 9){
        return this._Minutes
      }else{
        return "0" + this._Minutes
      }
    },
    get Seconds(){
      this._Seconds = new Date().getSeconds()
      if(this._Seconds > 9){
        return this._Seconds
      }else{
        return "0" + this._Seconds
      }
    },
    formTime:function(){
        return this.Hours + ':' + this.Minutes + ':' + this.Seconds
    }
  }
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
  var duration = 3000, nowDuration = 0
  var timeDom = document.getElementById("HidenTime")
  var time = timeDom.getContext('2d')
  var ShowTimeDom = document.getElementById("ShowTime")
  var ShowTime = ShowTimeDom.getContext('2d')
  time.clearRect(0,0,timeDom.width,timeDom.height);
  var nowTime = new GetTime()
  var showTime = nowTime.formTime()
  var modes = ['left', 'random', 'center', 'flow']
  var mode = modes[0]
  time.font="50px Verdana";
  // 创建渐变
  var gradient=time.createLinearGradient(0,0,timeDom.width,0);
  gradient.addColorStop("0","magenta");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  // 用渐变填色
  time.fillStyle=gradient;
  time.fillText(showTime,10,60);
  var pixels = time.getImageData(0,0,300,100)
  ShowTimeInit(pixels, 2)
  setInterval(function(){
    
    mode = modes[randomNum(0,3)]
    //mode = modes[3]
    time.clearRect(0,0,timeDom.width,timeDom.height);
    nowDuration = 0
    showTime = nowTime.formTime()
    time.fillText(showTime,10,60);
    pixels = time.getImageData(0,0,300,100)
    ShowTimeInit(pixels, 2)
  }, 5000)
  function ShowTimeInit(pixels, n){
        n = 4*n
      var arr = [], temPixel = {}, x = 0, y = 0
      for (var i=0;i<pixels.data.length;i+=n){
        if(pixels.data[i] !== 0 ||  pixels.data[i+1] !== 0 || pixels.data[i+2] !== 0 ){
          var index = parseInt ((i+1) / 4)
          if(index > timeDom.width){
            x = index % timeDom.width
            y = parseInt(index / timeDom.width) 
          }else{
            x = index
            y = 0
          }
          temPixel = {
            R: pixels.data[i], 
            G: pixels.data[i+1], 
            B: pixels.data[i+2], 
            A: pixels.data[i+3], 
            I:i,
            X:x,
            Y:y
          }
          
          arr.push(temPixel)
        }

      }
      var step = requestAnimationFrame(function(){draw_path(arr, ShowTime, step)})
      
  }
  /**
 * 画路径
 * @param path 路径
 */
function draw_path(points, ctx, step){
    ShowTime.clearRect(0,0,ShowTimeDom.width,ShowTimeDom.height);
    var pointX, pointY, randomX, randomY
    for(var i=0;i < points.length-1;i++){
        switch (mode){
            case 'left':
                pointX = randomNum(0,0)
                pointY = randomNum(0,100)
                randomX = 0
                randomY = Math.random() + Math.random()*3000
                break;
            case 'center':
                pointX = 80
                pointY = 50
                randomX = Math.random() + Math.random()*3000
                randomY = Math.random() + Math.random()*3000
                break;
            case 'random':
                pointX = 0
                pointY = 0
                randomX = Math.random() + Math.random()*3000
                randomY = Math.random() + Math.random()*3000
                break;        
            case 'flow':
                pointX = 0
                pointY = 0
                randomX = i
                randomY = i
                break;
        }

      var color = 'rgba(' + points[i].R + ',' +  points[i].G + ','  + points[i].B + ')', x, y
       x = easeInOutExpon(nowDuration + randomX, pointX, points[i].X-pointX, duration)
       y = easeInOutExpon(nowDuration + randomY, pointY, points[i].Y-pointY, duration)
      drawArc(ctx,x, y, color)
      
    }
    nowDuration += 1000/60
        if(duration <= nowDuration){
        window.cancelAnimationFrame(step);
    }else{
        requestAnimationFrame(function(){draw_path(points, ctx, step)})
    }
    
}
  /**
 * 画圆
 */
function drawArc(ctx, x, y, color){
  x = x 
  y = y 
  ctx.beginPath();
  ctx.fillStyle = color
  ctx.strokeStyle = color
  ctx.arc(x,y,0.5,0,2*Math.PI);
  ctx.closePath()
  ctx.fill()
}






/*
* 参数描述
* t 动画执行到当前帧所经过的时间
* b 起始值
* c 总位移值
* d 持续时间
*/
function easeInOutExpon(t,b,c,d){
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
  switch (arguments.length) {
    case 1:
      return parseInt(Math.random() * minNum + 1, 10);
      break;
    case 2:
      return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
      break;
    default:
      return 0;
      break;
  }
}
</script>
</html>

 总结

当一个新想法出现时，先去github和博客上找一找，看看有没有大佬做过，大佬们的的思路是什么，有什么自己没想到的细节，感觉差不多了在动手去做。