微信小程序小组件基于Canvas实现直播点赞气泡效果

2024-10-09 08:54:31

先发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.通过绘制三条不同的三阶贝塞尔曲线，选取三张图片让其沿着各自的贝塞尔曲线运动，运动轨迹如下图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序 Canvas增强组件实例详解及源码分享

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("
微信小程序 wxapp画布 canvas详细介绍

微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名类型默认值说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String canvas组件的唯一标识符 binderror EventHandle 当发生错误时触发error事件,detail = { errMsg: 'something w
微信小程序二维码canvas绘制实例详解

微信小程序二维码canvas绘制 var canvas = { width: 100, height:36 }; function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ("00000" + ((Math.random() * 167772
微信小程序使用canvas制作K线实例详解

微信小程序使用canvas制作K线实现效果图: 前言: 我们目的是想要一条平滑的曲线来表示均线等,而不是一条转折点明显的折线.因此还得继续探索api.我们发现,在canvas API中,能够画出曲线的有2个 beZierCurveTo(num1, num2, num3, num4, x, y) quadraticCurveTo(num1, num2, x, y) 这两个api都是通过贝塞尔曲线来绘制路径.好在学习PS的时候,对贝塞尔曲线的具体表现也是有一定的熟练程度的,因此知道要确定一条由多
微信小程序 canvas开发实例及注意事项

微信小程序 wxcanvas 测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的
微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat
微信小程序 canvas API详解及实例代码

绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示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
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ...... </view> 最终效果图: 2.底端固定核心代码如下:  <view class="page__hd" style="position:fixed; bottom:0;width: 75
基于angular实现模拟微信小程序swiper组件

这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个
微信小程序基于canvas渐变实现的彩虹效果示例

本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果.分享给大家供大家参考,具体如下: 微信小程序提供了两种渐变的方式: createLinearGradient(x,y,x1,y1)创建一个线性的渐变. x,y 起点坐标 x1,y1 终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变. x,y 圆心坐标 r 半径创建了渐变对象之后,必须添加两个或者两个以上的
开源一个微信小程序仪表盘组件过程解析

前言最近开发了一个小程序动态仪表盘组件,并以第三方小程序组件的形式发布到npm,任意小程序项目都可以安装这个模块,从而获得仪表盘功能. 组件功能目前还非常简单,先来预览一下效果: 感兴趣的直接看源码: https://github.com/tower1229/weapp-plugin-dashboard 下面是踩坑过程. 如何开发微信小程序自定义组件官方提供了一个CLI工具专门用于开发小程序自定义组件,首先全局安装这个工具: npm install -g @wechat-miniprogra
微信小程序slider组件使用详解

本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange=&quo
微信小程序自定义组件实现环形进度条

本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果图创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva
微信小程序 MinUI组件库系列之badge徽章组件示例

MinUI是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件,其中 badge 徽章组件是一个很常用的基础元件, MinUI 中 badge 组件的效果图如下: 各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^).可以打开微信扫一扫下面的小程序二维码先一睹为快: 下面介绍 badge 组件的使用方式. 1.使用下列命令安装 Min-Cli,如
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
微信小程序 swiper组件详解及实例代码

微信小程序 swiper组件常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx

微信小程序小组件 基于Canvas实现直播点赞气泡效果

相关推荐

随机推荐

微信小程序小组件基于Canvas实现直播点赞气泡效果