微信小程序小组件 基于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模板实现方法
Apr 27 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue实现五子棋游戏
May 28 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
js实现点击按钮随机生成背景颜色
Sep 05 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的变量总结 新手推荐
2011/04/18 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php短址转换实现方法
2015/02/25 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python 查看文件的读写权限方法
2018/01/23 Python
django+mysql的使用示例
2018/11/23 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
幼儿园中班评语大全
2014/04/17 职场文书
撤诉状格式范本
2015/05/19 职场文书
优质护理心得体会
2016/01/22 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js