微信小程序小组件 基于Canvas实现直播点赞气泡效果


Posted in Javascript onMay 29, 2020

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

微信小程序小组件 基于Canvas实现直播点赞气泡效果

实现细节:

1.JS:

drawImage:function(data){[/align]
  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.通过绘制三条不同的三阶贝塞尔曲线,选取三张图片让其沿着各自的贝塞尔曲线运动,运动轨迹如下图:

微信小程序小组件 基于Canvas实现直播点赞气泡效果

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

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

利用多项式系数即可得到x(t),y(t)的数学表达式:

cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )  
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
x(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0
y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0

这里画了三条贝塞尔曲线,套用公式三次即可,这里没有采用循环,如果贝塞尔曲线条数比较多时,可采用循环调用 ctx.drawImage,其中factor.t为三阶贝塞尔曲线的参数,取值范围[0,1], 最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。

3.Tip:

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

项目地址:

github:https://github.com/jeffer0323/We-Canvas

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
vue实现通讯录功能
Jul 14 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
Bootstrap中data-target 到底是什么
Feb 14 #Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 #Javascript
如何快速上手Vuex
Feb 14 #Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 #Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
js select常用操作控制代码
2010/03/16 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Vue 请求传公共参数的操作
2020/07/31 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python中的多线程实例教程
2014/08/27 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
中学教师管理制度
2014/01/14 职场文书
主持人演讲稿
2014/05/13 职场文书
采购部长岗位职责
2014/06/13 职场文书
服务员岗位职责范本
2015/04/09 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
goland 恢复已更改文件的操作
2021/04/28 Golang
Python类方法总结讲解
2021/07/26 Python