微信小程序小组件 基于Canvas实现直播点赞气泡效果
发布时间:2020-12-14 20:20:49 所属栏目:资源 来源:网络整理
导读:先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: 1){ factor.t=0; cancelAnimationFrame(timer); that.startTimer(); }else{ timer =requestAnimationFrame(function(){ that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:3
先发Canvas实现直播点赞气泡效果图: 实现细节:1.JS: 1){
factor.t=0;
cancelAnimationFrame(timer);
that.startTimer();
}else{
timer =requestAnimationFrame(function(){
that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,{x:80,{x:0,y:90},y:100},y:0}]])
})
}}
2.原理: a.通过绘制三条不同的三阶贝塞尔曲线,选取三张图片让其沿着各自的贝塞尔曲线运动,运动轨迹如下图: b.计算三阶贝塞尔曲线x(t),y(t)的数学表达式。 三阶贝塞尔曲线是通过四个点来形成一条曲线,两个控制点,一个起点一个终点。 利用多项式系数即可得到x(t),y(t)的数学表达式: 这里画了三条贝塞尔曲线,套用公式三次即可,这里没有采用循环,如果贝塞尔曲线条数比较多时,可采用循环调用 ctx.drawImage,其中factor.t为三阶贝塞尔曲线的参数,取值范围[0,1],最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。 3.Tip: 这里采用的定时器是通过requestAnimationFrame()函数实现的, 弃用setInterval的原因是实际测试中有卡帧现象并且动画显示有细微的不连续。 项目地址: github: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |