微信小程序小组件 基于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模拟弹出效果代码修正版
Aug 07 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
js仿微信抢红包功能
Sep 25 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
详解ES6中class的实现原理
Oct 03 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 readfile()修改文件上传大小设置
2017/08/11 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Python开发的实用计算器完整实例
2017/05/10 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实时监控cpu小工具
2018/06/21 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
基于Python实现简单学生管理系统
2020/07/24 Python
django使用channels实现通信的示例
2020/10/19 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
求职教师自荐书
2014/06/19 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
教师三严三实心得体会
2014/10/11 职场文书
南湾猴岛导游词
2015/02/09 职场文书
python爬虫selenium模块详解
2021/03/30 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python