微信小程序小组件 基于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 相关文章推荐
表单提交验证类
Jul 14 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jquery禁用右键示例
Apr 28 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
原生JS实现的雪花飘落动画效果
May 03 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
js实现随机抽奖
2020/03/19 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
小学亲子活动总结
2014/07/01 职场文书
如何写早恋检讨书
2014/09/10 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
MySQL数据库之存储过程 procedure
2022/06/16 MySQL