微信小程序小组件 基于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多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
js实现加载更多功能实例
Oct 27 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
JS实现扫雷项目总结
May 19 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 验证图片生成函数
2009/05/21 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
Prototype框架详解
2015/11/25 Javascript
详解JS面向对象编程
2016/01/24 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
详解Python中__new__方法的作用
2022/03/31 Python