搜索
首页微信小程序小程序开发利用Canvas实现直播时点赞冒气泡的效果

先发Canvas实现直播点赞气泡效果图:

实现细节:

1.JS:

drawImage:function(data){
var that = this 
    var p10= data[0][0];  /* 三阶贝塞尔曲线起点坐标值*/ 
    var p11= data[0][1];  /* 三阶贝塞尔曲线第一个控制点坐标值*/ 
    var p12= data[0][2];  /* 三阶贝塞尔曲线第二个控制点坐标值*/ 
    var p13= data[0][3];  /* 三阶贝塞尔曲线终点坐标值*/ 
    var p20= data[1][0]; 
    var p21= data[1][1]; 
    var p22= data[1][2]; 
    var p23= data[1][3]; 
    var p30= data[2][0]; 
    var p31= data[2][1]; 
    var p32= data[2][2]; 
    var p33= data[2][3]; 
    var t = factor.t; 
    /*计算多项式系数 (下同)*/   
    var cx1 = 3*(p11.x-p10.x); 
    var bx1 = 3*(p12.x-p11.x)-cx1; 
    var ax1 = p13.x-p10.x-cx1-bx1; 
    var cy1 = 3*(p11.y-p10.y); 
    var by1 = 3*(p12.y-p11.y)-cy1; 
    var ay1 = p13.y-p10.y-cy1-by1; 
    var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x; 
    var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y; 
    var cx2 = 3*(p21.x-p20.x); 
    var bx2 = 3*(p22.x-p21.x)-cx2; 
    var ax2 = p23.x-p20.x-cx2-bx2; 
    var cy2 = 3*(p21.y-p20.y); 
    var by2 = 3*(p22.y-p21.y)-cy2; 
    var ay2 = p23.y-p20.y-cy2-by2; 
    var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x; 
    var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y; 
    var cx3 = 3*(p31.x-p30.x); 
    var bx3 = 3*(p32.x-p31.x)-cx3; 
    var ax3 = p33.x-p30.x-cx3-bx3; 
    var cy3 = 3*(p31.y-p30.y); 
    var by3 = 3*(p32.y-p31.y)-cy3; 
    var ay3 = p33.y-p30.y-cy3-by3; 
    /*计算xt yt的值 */ 
    var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x; 
    var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y; 
    factor.t +=factor.speed; 
    ctx.drawImage("../../images/heart1.png",xt1,yt1,30,30); 
    ctx.drawImage("../../images/heart2.png",xt2,yt2,30,30); 
    ctx.drawImage("../../images/heart3.png",xt3,yt3,30,30); 
    ctx.draw(); 
    if(factor.t>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,y:400},{x:30,y:300},{x:80,y:150},{x:30,y:0}],[{x:30,y:400},{x:0,y:90},{x:80,y:100},{x:30,y:0}]]) 
     }) 
    }}

2.原理:

a.通过绘制三条不同的三阶贝塞尔曲线,选取三张图片让其沿着各自的贝塞尔曲线运动,运动轨迹如下图:

b.计算三阶贝塞尔曲线x(t),y(t)的数学表达式。

三阶贝塞尔曲线是通过四个点来形成一条曲线,两个控制点,一个起点一个终点。

利用多项式系数即可得到x(t),y(t)的数学表达式:
cx = 3 * ( x1 - x0 )bx = 3 * ( x2 - x1 ) - cxax = x3 - x0 - cx - bxcy = 3 * ( y1 - y0 )    by = 3 * ( y2 - y1 ) - cyay = y3 - y0 - cy - byx(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0
这里画了三条贝塞尔曲线,套用公式三次即可,这里没有采用循环,如果贝塞尔曲线条数比较多时,可采用循环调用 ctx.drawImage,其中factor.t为三阶贝塞尔曲线的参数,取值范围[0,1], 最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。
3.Tip:

这里采用的定时器是通过requestAnimationFrame()函数实现的, 弃用setInterval的原因是实际测试中有卡帧现象并且动画显示有细微的不连续。

以上是利用Canvas实现直播时点赞冒气泡的效果的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)