微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于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.通过绘制三条不同的三阶贝塞尔曲线,选取三张图片让其沿着各自的贝塞尔曲线运动,运动轨迹如下图:
利用多项式系数即可得到x(t),y(t)的数学表达式:
cx = 3 * ( x1 - x0 )bx = 3 * ( x2 - x1 ) - cxax = x3 - x0 - cx - bxcy = 3 * ( y1 - y0 ) by = 3 * ( y2 - y1 ) - cyay = y3 - y0 - cy - byx(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0
这里画了三条贝塞尔曲线,套用公式三次即可,这里没有采用循环,如果贝塞尔曲线条数比较多时,可采用循环调用 ctx.drawImage,其中factor.t为三阶贝塞尔曲线的参数,取值范围[0,1], 最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。
3.Tip:
这里采用的定时器是通过requestAnimationFrame()函数实现的, 弃用setInterval的原因是实际测试中有卡帧现象并且动画显示有细微的不连续。
项目地址:
github:
更多微信小程序小组件 基于Canvas实现直播点赞气泡效果相关文章请关注PHP中文网!
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果相关推荐
- 微信小程序动态点赞php,微信小程序小组件 基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...
- php微信支付参数动态配置,支付,微信开发_微信支付动态如何获取$jsApiParameters参数,支付,微信开发 - phpStudy...
微信支付动态如何获取$jsApiParameters参数 现在我们在做一个需要动态变换价格的微信支付页面,就是用户购买商品后,跳转到支付页面,但是可以选择几个不同的价格当中一个进行支付. 当跳到这个页 ...
- 51单片机八位数码管1到F动态滚动显示仿真及程序
51单片机八位数码管1到F动态滚动显示仿真及程序 动态滚动显示仿真及程序 #include<reg51.h> #define uchar unsigned char #define uin ...
- 微信小程序动态点赞php,在微信小程序中如何实现点赞功能
这篇文章主要介绍了微信小程序基于本地缓存实现点赞功能的方法,涉及微信小程序界面布局.事件响应及缓存操作等相关实现技巧,需要的朋友可以参考下 本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享 ...
- 微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
- 微信小程序:开心锤锤超火动态表情包微信小程序源码下载自动采集
这是一款表情包小程序源码 大家刷抖音的时候应该都刷过开心锤锤这个网红卡通短视频吧 现在这一款小程序就是和它有关的 里面的表情包呢大部分都是动态表情包(斗图的时候是不是更炫) 至于里面的表情包人物的就都 ...
- 微信小程序-动态验证码
微信小程序-动态验证码 一.创建自定义组件verification-code 二.在index页面使用 一.创建自定义组件verification-code verification-code.js ...
- 学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
- 微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
最新文章
- 自然语言处理课程(二):Jieba分词的原理及实例操作
- asp.net Web API 身份验证 不记名令牌验证 Bearer Token Authentication 简单实现
- spoj2 Prime Generator
- Java虚拟机2:Java内存区域及对象
- go语言中fallthrough与break的使用
- 排序---对二维数组的排序
- PHP环境搭建:Windows 7下安装配置PHP+Apache+Mysql环境教程
- halconC++类:HDevWindowStack
- 每隔10秒执行一次_(立下flag)每日10道前端面试题12 关于BOM十问
- ds18b20温度转换指令_学习心得 | 温度检测工程模块划分总结与案例分析
- Leetcode刷题修炼手册
- 充值150日赚1000多,一篇AI打扑克的论文竟登上科学杂志
- 分享软件测试计划模板
- 关于Java中double类型的变量保留指定位数的方法
- IPA安装的几种方法
- python爬取今日头条图片
- 2021-2027年全球与中国滴流咖啡壶行业市场前瞻与投资战略规划分析报告
- DMM6500+Keithley6517B/6514纳米发电机测试软件
- Java的反射机制?
- Codeforces Round #655 (Div. 2) A
热门文章
- 本地搭建自己的电影网站,并发布公网访问 3-3
- 【校招Verilog快速入门】基础语法篇:VL1、四选一多路器
- 设备电容老化危害大,出厂测试可别轻视它!
- 备份路由器配置文件到服务器,教你如何备份路由器配置文件
- java socket / IM / Message / chat / liaotian / xmpp
- 搜狗拼音输入法,披着紫皮的狗
- 这次把怎么做好一个PPT讲清-其他技巧篇
- 惠普电脑BIOS设置图文详细介绍
- 关于for循环的一些题目(二)
- 计算机考研怎么给老师发邮件,怎么发邮件-考研重要一环,如何给心仪的导师发邮件!内附邮件格式...