微信小程序小组件 基于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.通过绘制三条不同的三阶贝塞尔曲线,选取三张图片让其沿着各自的贝塞尔曲线运动,运动轨迹如下图:

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

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

(0)

相关推荐

  • 微信小程序canvas写字板效果及实例

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

  • 微信小程序 使用canvas制作K线实例详解

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

  • 微信小程序 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 API详解及实例代码

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

  • 微信小程序 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增强组件实例详解及源码分享

    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("

  • 微信小程序小组件 基于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 <!--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

随机推荐