首页 > 代码库 > canvas粒子文字动画教程

canvas粒子文字动画教程

2024-11-14 15:48:02   203人阅读

1,什么是canvas粒子动画

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

2.主要实现步骤

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

var imageData = http://www.mamicode.com/ctx.getImageData(0,0,canvas.width,canvas.height);>

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

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

canvas粒子文字动画教程


联系
我们