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;in){  
　　　　　　//过滤纯色背景提高性能，如背景色不可去掉可省略判断
        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;in){
        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)})
    }
    
}

 

附上完整代码

 

View Code

 

 

 总结

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