在小程序里实现手势缩放,你可以这样做 | 实战教程

文 | 严灏

上周,知晓程序向大家分享了「知了地铁」小程序的上手体验。同时,我们也在这篇文章中提过,会与大家讨论有关小程序中手势缩放功能的实现。

关注知晓程序(微信号 zxcx0101),回复「知了地铁」,看「知了地铁」小程序上手体验文章。

在开发「知了地铁」小程序的时候,我们发现:在几寸的手机屏幕上完整显示地铁线网图,用户就很难看清细节;而默认将线网图按照 1:1 模式显示出来,用户需要多次拖动才能看到线网图的概况。

很明显,两种实现方式的体验,都非常糟糕。

因此,如果要在小程序中展示带有细节信息的图片(例如地铁线网图),就需要为其加上缩放功能。而用双指张合手势进行缩放,是大部分智能手机用户都已经习惯了的缩放方法。

今天,知晓程序就为大家带来有关手势缩放功能的实现方法,以及手势缩放实现在小程序中的局限和问题。

手势动态检测

首先,我们需要获得用户的触摸事件。只有获得了这个事件,小程序才能得知用户希望缩放图片,同时确定图片的缩放倍数。

我们发现微信提供 touchmove 事件,在用户触摸屏幕并在屏幕上移动手指时,这个事件就会被触发。

手势缩放的核心思想是:根据两只手指相对距离的变化,对图片进行放大或缩小。因此,我们需要知道两只手指相对距离的变化值,才能让图片按预期缩放。

touchmove 事件可以实现的功能,大致可以总结为:

  • 手指在屏幕上进行移动时,touchmove 事件就会以 16 ms 一次的频率不断被触发;
  • 手指离开屏幕时,touchend 事件会被触发。

touchmove 事件所包含的事件对象中有一个 touches 属性,此属性为当前停留在屏幕中的触摸点信息的数组。触摸点的信息包括:

  • identifier:触摸点的标志符;
  • pageXpageY:距离文档左上角的距离;
  • clientXclientY:距离屏幕可显示区域左上角距离。

我们可以通过不断获取 clientXclientY 数据的方式,来确定手指在屏幕上的位置变化。

distance 变量即为两只手指之间的距离。在 touchmove 被触发的时候,小程序就会计算一次 distance

我们为新的 distance 变量定名为 newDistance,相应地,旧变量定名为 oldDistance

之后,我们设定一个新的变量 distanceDiff = newDistance - oldDistance,它反映两次 touchmove 触发瞬间,两根手指相对距离的变化值。

distanceDiff 为正数时,表示两指间距离在变大,图片需要被放大;反之,则代表两指间距缩小,图片需要被缩小。

图片动态缩放

到这里,我们已经可以探测用户的手指距离变化了。接下来,我们需要根据用户的手势,确定图片缩放倍数,然后根据倍数缩放图片。

首先,要确定 distance 的变化值与图片放大或缩小的变化率相关联的规则。

我们将图片正常显示时的尺寸定为基准值,存放于变量 baseWidthbaseHeight 中;将图片需要放大的倍数设置为变量 scale,它的初始值和最小值为 1,最大值可根据需要来设置。

经过多次试验,我们最后确定了一个公式:

此公式中的 0.005 为图片的缩放比例。在实测中,使用 0.005 这个值可获得比较良好的缩放体验。

现在,我们为图片对象绑定 touchmove 事件。在每次 touchmove 被触发后,我们都可以计算出新的图片需要被放大的倍数,我们将这个变量定名为 scale

具体方式是:在每次 touchmove 被触发后,通过探测手指距离变化而得到的数据,来得到图片按比例缩放后的高宽值。

接下来,我们在 WXML 中,将图片对象的高和宽绑定相应的动态值,我们就能实现手势缩放功能了:

scroll-view,还是用 view

实现了图片的缩放之后,我们还需要一个容器存放图片。微信为视图组件提供了 scroll-viewview 两种容器。但在目前阶段,两种容器都不能非常完美地实现手势缩放功能。

我们原本使用的方案是:利用 scroll-view,设置 scroll-xscroll-y 属性为 true。这可以在放大后滑动浏览图片时,拥有良好的浏览体验。

但是,我们发现 scroll-view 组件还存在缩放时出现界面闪动的现象的 bug。用双指手势缩放存在 scroll-view 容器中的图片,极易触发此 bug。

此问题只能等待微信官方进行修复。但在目前阶段,开发者也可以选择:

  • 放弃 scroll-view,转而使用不带有良好滑动体验的 view 组件;
  • 放弃使用手势缩放功能,转而开发「放大 - 缩小」按钮组件,或双击放大/缩小的功能。

以上就是知晓程序(微信号 zxcx0101)带来的手势缩放图片功能的实现教程。虽然目前手势缩放并不能完美实现,但也希望大家可以举一反三,通过这个思路,创造出体验更好的小程序。

如果你希望讨论有关小程序开发中的问题,关注知晓程序(微信号 zxcx0101)并点击菜单栏中的「加群交流」,就能获得加入知晓程序开发讨论群的方式,与大家一同讨论小程序开发。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2016-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第122天:移动端开发常见事件和流式布局

可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的...

2274
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

3627
来自专栏一个会写诗的程序员的博客

js 返回页面顶部的实现( layui)

需要注意的是, 你必须要确定好鼠标滚动所绑定的DOM元素到底是什么.例如, layui中的页面滚动绑定的是 document.getElementsByClas...

2312
来自专栏互联网杂技

移动端开发的一些技巧

开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕,ipad等。下面就分享一些技巧,让...

31610
来自专栏武军超python专栏

2018年9月3日初识HTML超文本标记语言

javascript原名livescript,简称(js),因为当时公司和sun公司合作,为了营销考虑,让它看起来更像当时 特别火热的java,所以更名为ja...

1341
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

1K11
来自专栏青玉伏案

iOS开发之虾米音乐频道选择切换效果分析与实现

今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现。之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果...

2563
来自专栏林焕彬的专栏

iPhone X 适配手Q H5 页面通用解决方案

对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

7K6
来自专栏coding

初识vue动画效果

关于vue.js的动画效果,在其文档中有很详细的说明,利用官方提供的api, 可以实现极为丰富酷炫的效果。惟一限制你的,是你的想象力!

1121
来自专栏Nian糕的私人厨房

CSS banner图响应式居中显示

在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响...

1043

扫码关注云+社区

领取腾讯云代金券