微信小程序小组件 基于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 相关文章推荐
js 操作select与option(示例讲解)
Dec 20 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
图解JS原型和原型链实现原理
Sep 15 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
学习php笔记 字符串处理
2010/10/19 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php判断目录存在的简单方法
2019/09/26 PHP
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
轮播图组件js代码
2016/08/08 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
keras:model.compile损失函数的用法
2020/07/01 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
大学生学年自我鉴定
2014/02/10 职场文书
小学假期安全广播稿
2014/09/28 职场文书
表扬稿格式范文
2015/01/16 职场文书
六一儿童节致辞
2015/07/31 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
教师学习心得体会范文
2016/01/21 职场文书