React Native 大图手势浏览技术分析

   <p>支持通用的手势缩放，手势跟随，多图翻页</p>    <h2><strong>手势系统</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f5330b384fc914f688d89387989f9abe.gif"></p>    <p style="text-align:center">1.gif</p>    <p>通过 PanResponder.create 创建手势响应者，分别在 onPanResponderMove 与 onPanResponderRelease 阶段进行处理实现上述功能。</p>    <h2><strong>手势阶段</strong></h2>    <p>大体介绍整体设计，在每个手势阶段需要做哪些事。</p>    <h3><strong>开始</strong></h3>    <p>onPanResponderGrant</p>    <pre>  <code class="language-javascript">// 开始手势操作  this.lastPositionX = null  this.lastPositionY = null  this.zoomLastDistance = null  this.lastTouchStartTime = new Date().getTime()</code></pre>    <p>开始时非常简单，初始化上一次的唯一、缩放距离、触摸时间，这些中间量分别会在计算增量位移、增量缩放、用户松手意图时使用。</p>    <h3><strong>移动</strong></h3>    <p>onPanResponderMove</p>    <pre>  <code class="language-javascript">if (evt.nativeEvent.changedTouches.length <= 1) {      // 单指移动 or 翻页  } else {      // 双指缩放  }</code></pre>    <p>在移动中，先根据手指数量区分用户操作意图。</p>    <p>当单个手指时，可能是移动或者翻页</p>    <p>先记录增量位移：</p>    <pre>  <code class="language-javascript">// x 位移  let diffX = gestureState.dx - this.lastPositionX  if (this.lastPositionX === null) {      diffX = 0  }  // y 位移  let diffY = gestureState.dy - this.lastPositionY  if (this.lastPositionY === null) {      diffY = 0  }    // 保留这一次位移作为下次的上一次位移  this.lastPositionX = gestureState.dx  this.lastPositionY = gestureState.dy</code></pre>    <p>获得了位移距离后，我们先不要移动图片，因为横向操作如果溢出了屏幕边界，我们要触发图片切换（如果滑动方向还有图），此时不能再增加图片的偏移量，而是要将其偏移量记录下来存储到 <strong>溢出量</strong> ，当这个 <strong>溢出量</strong> 没有用完时，只滑动整体容器，不移动图片，用完时再移动图片，就可以将移动图片与整体滑动连贯起来了。</p>    <pre>  <code class="language-javascript">// diffX > 0 表示手往右滑，图往左移动，反之同理  // horizontalWholeOuterCounter > 0 表示溢出在左侧，反之在右侧，绝对值越大溢出越多  if (this.props.imageWidth * this.scale > this.props.cropWidth) { // 如果图片宽度大图盒子宽度， 可以横向拖拽      // 没有溢出偏移量或者这次位移完全收回了偏移量才能拖拽      if (this.horizontalWholeOuterCounter > 0) { // 溢出在右侧          if (diffX < 0) { // 从右侧收紧              if (this.horizontalWholeOuterCounter > Math.abs(diffX)) {                  // 偏移量还没有用完                  this.horizontalWholeOuterCounter += diffX                  diffX = 0              } else {                  // 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动                  diffX += this.horizontalWholeOuterCounter                  this.horizontalWholeOuterCounter = 0                  this.props.horizontalOuterRangeOffset(0)              }          } else { // 向右侧扩增              this.horizontalWholeOuterCounter += diffX          }        } else if (this.horizontalWholeOuterCounter < 0) { // 溢出在左侧          if (diffX > 0) { // 从左侧收紧              if (Math.abs(this.horizontalWholeOuterCounter) > diffX) {                  // 偏移量还没有用完                  this.horizontalWholeOuterCounter += diffX                  diffX = 0              } else {                  // 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动                  diffX += this.horizontalWholeOuterCounter                  this.horizontalWholeOuterCounter = 0                  this.props.horizontalOuterRangeOffset(0)              }          } else { // 向左侧扩增              this.horizontalWholeOuterCounter += diffX          }      } else {          // 溢出偏移量为0，正常移动      }</code></pre>    <p>上述代码表示在溢出时，优先计算 <strong>溢出量</strong> ，并且当收缩时，用增量位移抵消 <strong>溢出量</strong> ，最后如果还有增量位移，就可以移动图片了：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/66cff34cc3538ad08dde3e29566f4ddd.gif"></p>    <p style="text-align:center">3.gif</p>    <pre>  <code class="language-javascript">// 产生位移  this.positionX += diffX / this.scale</code></pre>    <p>还有横向不能出现黑边，因此移动到边界时会把位移全部转换为偏移量：</p>    <pre>  <code class="language-javascript">// 但是横向不能出现黑边  // 横向能容忍的绝对值  const horizontalMax = (this.props.imageWidth * this.scale - this.props.cropWidth) / 2 / this.scale  if (this.positionX < -horizontalMax) { // 超越了左边临界点，还在继续向左移动      this.positionX = -horizontalMax      this.horizontalWholeOuterCounter += diffX  } else if (this.positionX > horizontalMax) { // 超越了右侧临界点，还在继续向右移动      this.positionX = horizontalMax      this.horizontalWholeOuterCounter += diffX  }  this.animatedPositionX.setValue(this.positionX)</code></pre>    <p>PS:如果图片长宽没有超过外部容器大小，那么所有位移都算做 <strong>溢出量</strong> ，也就是图片不能被移动，所有移动都会当做在切换图片：</p>    <pre>  <code class="language-javascript">// 不能横向拖拽，全部算做溢出偏移量  this.horizontalWholeOuterCounter += diffX</code></pre>    <p>我们在溢出量不为0的时候，执行切换图片的逻辑即可，由于本文主要介绍手势操作，切换图片的逻辑不再细说。最后再给Y轴限定低于盒子高度不能纵向移动：</p>    <pre>  <code class="language-javascript">if (this.props.imageHeight * this.scale > this.props.cropHeight) {      // 如果图片高度大图盒子高度， 可以纵向拖拽      this.positionY += diffY / this.scale      this.animatedPositionY.setValue(this.positionY)  }</code></pre>    <p>当两个手指时，希望缩放</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d81d051a51f36dcdfec557cf052315ce.gif"></p>    <p style="text-align:center">2.gif</p>    <p>先找到两手位置中 minX minY maxX maxY ，由此计算缩放距离：</p>    <pre>  <code class="language-javascript">const widthDistance = maxX - minX  const heightDistance = maxY - minY  const diagonalDistance = Math.sqrt(widthDistance * widthDistance + heightDistance * heightDistance)  this.zoomCurrentDistance = Number(diagonalDistance.toFixed(1))</code></pre>    <p>开始缩放：</p>    <pre>  <code class="language-javascript">let distanceDiff = (this.zoomCurrentDistance - this.zoomLastDistance) / 400  let zoom = this.scale + distanceDiff    if (zoom < 0.6) {      zoom = 0.6  }  if (zoom > 10) {      zoom = 10  }    // 记录之前缩放比例  const beforeScale = this.scale    // 开始缩放  this.scale = zoom  this.animatedScale.setValue(this.scale)</code></pre>    <p>此时需要注意的时，我们还要以双手中心点为固定点，保持这个点在屏幕的相对位置不变，这样才能放大到用户想看的部分，我们需要对图片进行位移：</p>    <pre>  <code class="language-javascript">// 图片要慢慢往两个手指的中心点移动  // 缩放 diff  const diffScale = this.scale - beforeScale  // 找到两手中心点距离页面中心的位移  const centerDiffX = (evt.nativeEvent.changedTouches[0].pageX + evt.nativeEvent.changedTouches[1].pageX) / 2 - this.props.cropWidth / 2  const centerDiffY = (evt.nativeEvent.changedTouches[0].pageY + evt.nativeEvent.changedTouches[1].pageY) / 2 - this.props.cropHeight / 2  // 移动位置  this.positionX -= centerDiffX * diffScale  this.positionY -= centerDiffY * diffScale  this.animatedPositionX.setValue(this.positionX)  this.animatedPositionY.setValue(this.positionY)</code></pre>    <p>其实是计算了这次的缩放增量，再计算出双手中心点距离屏幕正中心的距离， 用这个距离乘以缩放增量就是这次缩放造成的中心点位移值 ，我们再反向移动这个位移抵消掉，就会产生这个点的相对位置不变的效果。</p>    <h3>结束</h3>    <p>结束时主要做一些重置操作，和判断是否翻到下一页或者关闭看大图。比如图片被移出边界需要弹回来，缩放的过小需要恢复原大小。</p>    <pre>  <code class="language-javascript">// 手势完成,如果是单个手指、距离上次按住只有预设秒、滑动距离小于预设值,认为是退出  const stayTime = new Date().getTime() - this.lastTouchStartTime  const moveDistance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy)  if (evt.nativeEvent.changedTouches.length <= 1 && stayTime < this.props.leaveStayTime && moveDistance < this.props.leaveDistance) {      this.props.onCancle()      return  } else {      this.props.responderRelease(gestureState.vx)  }</code></pre>    <p>当单手指结束，并且移动距离小于某个值，并且移动时间过短，就会认为是退出，否则手势结束，再判断是否要切换图片，切换图片部分不再展开说明，下面罗列出结束时需要注意重置的要点，粗看即可：</p>    <pre>  <code class="language-javascript">if (this.scale < 1) {      // 如果缩放小于1，强制重置为 1      this.scale = 1      Animated.timing(this.animatedScale, {          toValue: this.scale,          duration: 100,      }).start()  }    if (this.props.imageWidth * this.scale <= this.props.cropWidth) {      // 如果图片宽度小于盒子宽度，横向位置重置      this.positionX = 0      Animated.timing(this.animatedPositionX, {          toValue: this.positionX,          duration: 100,      }).start()  }    if (this.props.imageHeight * this.scale <= this.props.cropHeight) {      // 如果图片高度小于盒子高度，纵向位置重置      this.positionY = 0      Animated.timing(this.animatedPositionY, {          toValue: this.positionY,          duration: 100,      }).start()  }    // 横向肯定不会超出范围，由拖拽时控制  // 如果图片高度大于盒子高度，纵向不能出现黑边  if (this.props.imageHeight * this.scale > this.props.cropHeight) {      // 纵向能容忍的绝对值      const verticalMax = (this.props.imageHeight * this.scale - this.props.cropHeight) / 2 / this.scale      if (this.positionY < -verticalMax) {          this.positionY = -verticalMax      } else if (this.positionY > verticalMax) {          this.positionY = verticalMax      }      Animated.timing(this.animatedPositionY, {          toValue: this.positionY,          duration: 100,      }).start()  }    // 拖拽正常结束后,如果没有缩放,直接回到0,0点  if (this.scale === 1) {      this.positionX = 0      this.positionY = 0      Animated.timing(this.animatedPositionX, {          toValue: this.positionX,          duration: 100,      }).start()      Animated.timing(this.animatedPositionY, {          toValue: this.positionY,          duration: 100,      }).start()  }</code></pre>    <p>如果结束时速度超过某个阈值，也要切换图片，这个判断就很方便了：</p>    <pre>  <code class="language-javascript">if (gestureState.vx > 0.7) {      // 上一张      this.goBack.call(this)  } else if (gestureState.vx < -0.7) {      // 下一张      this.goNext.call(this)  }    // 水平溢出量置空  this.horizontalWholeOuterCounter = 0</code></pre>    <p>最后重置水平溢出量，完成整套手势操作，可以进行周而复始的循环了。</p>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/7ca9aab94d5a</p>    <p> </p>