canvas粒子文字动画教程

1,什么是canvas粒子动画

canvas粒子文字动画效果绚丽，实现的方法和难点主要是根据缓动函数来确定粒子的轨迹。

2.主要实现步骤

创建一个canvas，在canva上绘制文字或图片，然后获取像素的信息并生成一个粒子数组

var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
...
var dotList = [];
 
for(var x=0; x<imageData.width; x+=mass) {
    for(var y=0; y<imageData.height; y+=mass) {
        var i = (y*imageData.width + x) * 4;
        if(imageData.data[i+3] > 128 && imageData.data[i] < 100){
            var dot = new <em>Dot</em>(x, y, dotRadius);
            dotList.push(dot);
        }
    

 使用缓动函数,所谓缓动函数，简单一句话就是“根据起点和终点，获取同时间所处的位置”

var effectFunc = {
    easeInOutCubic: function (t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    },
    easeInCirc: function (t, b, c, d) {
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
    },
    easeOutQuad: function (t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
    }
}
...
...
 
curX = effectFunc[effect](this.currentFrame, this.startX, this.x-this.startX, this.frameCount);
curY = effectFunc[effect](this.currentFrame, this.startY, this.y-this.startY, this.frameCount);

 在插件中我设置了很多参数，我们可以方便的调出我们想要的效果，具体的参数选项可以参考代码更容易理解哦

text:{
    text:'default',
    font:'bold 200px 微软雅黑',
    mass:6,
    doRadius:2,
    yOffset:50,
    start:'centerBottom' //.动画开始位置
}

 在线demo