ReactNative 大图手势浏览技术分析

支持通用的手势缩放,手势跟随,多图翻页

手势系统

1.gif

通过 PanResponder.create 创建手势响应者,分别在 onPanResponderMoveonPanResponderRelease 阶段进行处理实现上述功能。

手势阶段

大体介绍整体设计,在每个手势阶段需要做哪些事。

开始

onPanResponderGrant

开始时非常简单,初始化上一次的唯一、缩放距离、触摸时间,这些中间量分别会在计算增量位移、增量缩放、用户松手意图时使用。

移动

onPanResponderMove

在移动中,先根据手指数量区分用户操作意图。

当单个手指时,可能是移动或者翻页

先记录增量位移:

获得了位移距离后,我们先不要移动图片,因为横向操作如果溢出了屏幕边界,我们要触发图片切换(如果滑动方向还有图),此时不能再增加图片的偏移量,而是要将其偏移量记录下来存储到溢出量,当这个溢出量没有用完时,只滑动整体容器,不移动图片,用完时再移动图片,就可以将移动图片与整体滑动连贯起来了。

上述代码表示在溢出时,优先计算溢出量,并且当收缩时,用增量位移抵消溢出量,最后如果还有增量位移,就可以移动图片了:

3.gif

还有横向不能出现黑边,因此移动到边界时会把位移全部转换为偏移量:

PS:如果图片长宽没有超过外部容器大小,那么所有位移都算做溢出量,也就是图片不能被移动,所有移动都会当做在切换图片:

我们在溢出量不为0的时候,执行切换图片的逻辑即可,由于本文主要介绍手势操作,切换图片的逻辑不再细说。最后再给Y轴限定低于盒子高度不能纵向移动:

当两个手指时,希望缩放

2.gif

先找到两手位置中 minX minY maxX maxY,由此计算缩放距离:

开始缩放:

此时需要注意的时,我们还要以双手中心点为固定点,保持这个点在屏幕的相对位置不变,这样才能放大到用户想看的部分,我们需要对图片进行位移:

其实是计算了这次的缩放增量,再计算出双手中心点距离屏幕正中心的距离,用这个距离乘以缩放增量就是这次缩放造成的中心点位移值,我们再反向移动这个位移抵消掉,就会产生这个点的相对位置不变的效果。

结束

结束时主要做一些重置操作,和判断是否翻到下一页或者关闭看大图。比如图片被移出边界需要弹回来,缩放的过小需要恢复原大小。

当单手指结束,并且移动距离小于某个值,并且移动时间过短,就会认为是退出,否则手势结束,再判断是否要切换图片,切换图片部分不再展开说明,下面罗列出结束时需要注意重置的要点,粗看即可:

如果结束时速度超过某个阈值,也要切换图片,这个判断就很方便了:

最后重置水平溢出量,完成整套手势操作,可以进行周而复始的循环了。

一种实现

应大家要求,加上上述理论实现的代码仓库地址:

https://github.com/ascoders/react-native-image-viewer

 

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:ascoders

前端小魔法师 个人主页 · 我的文章 · 7

可能感兴趣的话题



直接登录
跳到底部
返回顶部