支持通用的手勢縮放洲拇，手勢跟隨感论，多圖翻頁
手勢系統(tǒng)
1.gif
通過 PanResponder.create 創(chuàng)建手勢響應(yīng)者绅项，分別在 onPanResponderMove 與 onPanResponderRelease 階段進(jìn)行處理實(shí)現(xiàn)上述功能。
手勢階段
大體介紹整體設(shè)計比肄，在每個手勢階段需要做哪些事快耿。
開始
onPanResponderGrant
// 開始手勢操作
this.lastPositionX = null
this.lastPositionY = null
this.zoomLastDistance = null
this.lastTouchStartTime = new Date().getTime()
開始時非常簡單，初始化上一次的唯一芳绩、縮放距離掀亥、觸摸時間，這些中間量分別會在計算增量位移妥色、增量縮放搪花、用戶松手意圖時使用。
移動
onPanResponderMove
if (evt.nativeEvent.changedTouches.length <= 1) {
// 單指移動 or 翻頁
} else {
// 雙指縮放
}
在移動中嘹害，先根據(jù)手指數(shù)量區(qū)分用戶操作意圖鳍侣。
當(dāng)單個手指時，可能是移動或者翻頁
先記錄增量位移：
// 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
獲得了位移距離后吼拥，我們先不要移動圖片，因?yàn)闄M向操作如果溢出了屏幕邊界线衫，我們要觸發(fā)圖片切換（如果滑動方向還有圖）凿可，此時不能再增加圖片的偏移量，而是要將其偏移量記錄下來存儲到溢出量，當(dāng)這個溢出量沒有用完時枯跑，只滑動整體容器惨驶，不移動圖片，用完時再移動圖片敛助，就可以將移動圖片與整體滑動連貫起來了粗卜。
// diffX > 0 表示手往右滑，圖往左移動纳击，反之同理
// horizontalWholeOuterCounter > 0 表示溢出在左側(cè)续扔，反之在右側(cè)，絕對值越大溢出越多
if (this.props.imageWidth * this.scale > this.props.cropWidth) { // 如果圖片寬度大圖盒子寬度焕数， 可以橫向拖拽
// 沒有溢出偏移量或者這次位移完全收回了偏移量才能拖拽
if (this.horizontalWholeOuterCounter > 0) { // 溢出在右側(cè)
if (diffX < 0) { // 從右側(cè)收緊
if (this.horizontalWholeOuterCounter > Math.abs(diffX)) {
// 偏移量還沒有用完
this.horizontalWholeOuterCounter += diffX
diffX = 0
} else {
// 溢出量置為0纱昧，偏移量減去剩余溢出量，并且可以被拖動
diffX += this.horizontalWholeOuterCounter
this.horizontalWholeOuterCounter = 0
this.props.horizontalOuterRangeOffset(0)
}
} else { // 向右側(cè)擴(kuò)增
this.horizontalWholeOuterCounter += diffX
}
} else if (this.horizontalWholeOuterCounter < 0) { // 溢出在左側(cè)
if (diffX > 0) { // 從左側(cè)收緊
if (Math.abs(this.horizontalWholeOuterCounter) > diffX) {
// 偏移量還沒有用完
this.horizontalWholeOuterCounter += diffX
diffX = 0
} else {
// 溢出量置為0堡赔，偏移量減去剩余溢出量识脆，并且可以被拖動
diffX += this.horizontalWholeOuterCounter
this.horizontalWholeOuterCounter = 0
this.props.horizontalOuterRangeOffset(0)
}
} else { // 向左側(cè)擴(kuò)增
this.horizontalWholeOuterCounter += diffX
}
} else {
// 溢出偏移量為0，正常移動
}
上述代碼表示在溢出時善已，優(yōu)先計算溢出量灼捂，并且當(dāng)收縮時，用增量位移抵消溢出量换团，最后如果還有增量位移悉稠，就可以移動圖片了：
3.gif
// 產(chǎn)生位移
this.positionX += diffX / this.scale
還有橫向不能出現(xiàn)黑邊，因此移動到邊界時會把位移全部轉(zhuǎn)換為偏移量：
// 但是橫向不能出現(xiàn)黑邊
// 橫向能容忍的絕對值
const horizontalMax = (this.props.imageWidth * this.scale - this.props.cropWidth) / 2 / this.scale
if (this.positionX < -horizontalMax) { // 超越了左邊臨界點(diǎn)啥寇，還在繼續(xù)向左移動
this.positionX = -horizontalMax
this.horizontalWholeOuterCounter += diffX
} else if (this.positionX > horizontalMax) { // 超越了右側(cè)臨界點(diǎn)偎球，還在繼續(xù)向右移動
this.positionX = horizontalMax
this.horizontalWholeOuterCounter += diffX
}
this.animatedPositionX.setValue(this.positionX)
PS:如果圖片長寬沒有超過外部容器大小，那么所有位移都算做溢出量辑甜，也就是圖片不能被移動衰絮，所有移動都會當(dāng)做在切換圖片：
// 不能橫向拖拽，全部算做溢出偏移量
this.horizontalWholeOuterCounter += diffX
我們在溢出量不為0的時候磷醋，執(zhí)行切換圖片的邏輯即可猫牡，由于本文主要介紹手勢操作，切換圖片的邏輯不再細(xì)說邓线。最后再給Y軸限定低于盒子高度不能縱向移動：
if (this.props.imageHeight * this.scale > this.props.cropHeight) {
// 如果圖片高度大圖盒子高度淌友， 可以縱向拖拽
this.positionY += diffY / this.scale
this.animatedPositionY.setValue(this.positionY)
}
當(dāng)兩個手指時，希望縮放
2.gif
先找到兩手位置中 minX minY maxX maxY骇陈，由此計算縮放距離：
const widthDistance = maxX - minX
const heightDistance = maxY - minY
const diagonalDistance = Math.sqrt(widthDistance * widthDistance + heightDistance * heightDistance)
this.zoomCurrentDistance = Number(diagonalDistance.toFixed(1))
開始縮放：
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)
此時需要注意的時震庭，我們還要以雙手中心點(diǎn)為固定點(diǎn)，保持這個點(diǎn)在屏幕的相對位置不變你雌，這樣才能放大到用戶想看的部分器联，我們需要對圖片進(jìn)行位移：
// 圖片要慢慢往兩個手指的中心點(diǎn)移動
// 縮放 diff
const diffScale = this.scale - beforeScale
// 找到兩手中心點(diǎn)距離頁面中心的位移
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)
其實(shí)是計算了這次的縮放增量二汛，再計算出雙手中心點(diǎn)距離屏幕正中心的距離，用這個距離乘以縮放增量就是這次縮放造成的中心點(diǎn)位移值拨拓，我們再反向移動這個位移抵消掉肴颊，就會產(chǎn)生這個點(diǎn)的相對位置不變的效果。
結(jié)束
結(jié)束時主要做一些重置操作渣磷，和判斷是否翻到下一頁或者關(guān)閉看大圖婿着。比如圖片被移出邊界需要彈回來，縮放的過小需要恢復(fù)原大小醋界。
// 手勢完成,如果是單個手指竟宋、距離上次按住只有預(yù)設(shè)秒、滑動距離小于預(yù)設(shè)值,認(rèn)為是退出
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)
}
當(dāng)單手指結(jié)束物独，并且移動距離小于某個值袜硫，并且移動時間過短，就會認(rèn)為是退出挡篓，否則手勢結(jié)束婉陷，再判斷是否要切換圖片，切換圖片部分不再展開說明官研，下面羅列出結(jié)束時需要注意重置的要點(diǎn)秽澳，粗看即可：
if (this.scale < 1) {
// 如果縮放小于1，強(qiáng)制重置為 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()
}
// 橫向肯定不會超出范圍，由拖拽時控制
// 如果圖片高度大于盒子高度始花，縱向不能出現(xiàn)黑邊
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()
}
// 拖拽正常結(jié)束后,如果沒有縮放,直接回到0,0點(diǎn)
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()
}
如果結(jié)束時速度超過某個閾值妄讯，也要切換圖片，這個判斷就很方便了：
if (gestureState.vx > 0.7) {
// 上一張
this.goBack.call(this)
} else if (gestureState.vx < -0.7) {
// 下一張
this.goNext.call(this)
}
// 水平溢出量置空
this.horizontalWholeOuterCounter = 0
最后重置水平溢出量酷宵，完成整套手勢操作亥贸，可以進(jìn)行周而復(fù)始的循環(huán)了。
一種實(shí)現(xiàn)
應(yīng)大家要求浇垦，加上上述理論實(shí)現(xiàn)的代碼倉庫地址：
