微信小程序小组件 基于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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
js数组实现权重概率分配
Sep 12 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
浅谈PHP进程管理
2019/03/08 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
Vue之Watcher源码解析(1)
2017/07/19 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python生成密码库功能示例
2017/05/23 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
个人担保书格式范文
2014/05/12 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
普通党员对照检查材料
2014/09/24 职场文书
整改落实自查报告
2014/11/05 职场文书
工程安全生产协议书
2014/11/21 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python