标签：动画效果 粒子 dem title 微软 push 信息 图片 utc
canvas粒子文字动画效果绚丽，实现的方法和难点主要是根据缓动函数来确定粒子的轨迹。
创建一个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
标签：动画效果 粒子 dem title 微软 push 信息 图片 utc
原文地址：http://www.cnblogs.com/yanphp/p/7271869.html
