update

src/PhotoView.tsx

@@ -6,7 +6,7 @@ import throttle from './utils/throttle';
 import isMobile from './utils/isMobile';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
 import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
-import slideToSuitableOffset from './utils/slideToSuitableOffset';
+import slideToPosition from './utils/slideToPosition';
 import { getClosedHorizontal, getClosedVertical } from './utils/getCloseEdge';
 import withContinuousTap from './utils/withContinuousTap';
 import { maxScale, minReachOffset, minScale, scaleBuffer } from './variables';
@@ -337,7 +337,7 @@ export default class PhotoView extends React.Component<
         ),
         reachState: ReachTypeEnum.Normal, // 重置触发状态
         ...hasMove
-          ? slideToSuitableOffset({
+          ? slideToPosition({
             x,
             y,
             lastX,

src/utils/slideToPosition.ts

@@ -1,32 +1,57 @@
-import { maxTouchTime } from '../variables';
+import {
+  maxTouchTime,
+  slideAcceleration,
+} from '../variables';
 
 /**
- * 根据速度滑动至目标位置
+ * 适应到合适的图片偏移量
  */
 const slideToPosition = ({
   x,
   y,
   lastX,
   lastY,
+  width,
+  height,
+  scale,
   touchedTime,
 }: {
   x: number;
   y: number;
   lastX: number;
   lastY: number;
+  width: number;
+  height: number;
+  scale: number;
   touchedTime: number;
 }): {
-  endX: number;
-  endY: number;
+  x: number;
+  y: number;
+
 } => {
   const moveTime = Date.now() - touchedTime;
+  // 时间过长
+  if (moveTime >= maxTouchTime) {
+    return {
+      x,
+      y,
+    };
+  }
+  // 初始速度
   const speedX = (x - lastX) / moveTime;
   const speedY = (y - lastY) / moveTime;
-  const maxSpeed = Math.max(speedX, speedY);
-  const slideTime = moveTime < maxTouchTime ? Math.abs(maxSpeed) * 20 + maxTouchTime : 0;
+
+  // 停下所消耗时间
+  const slideTimeX = speedX / slideAcceleration;
+  const slideTimeY = speedY / slideAcceleration;
+
+  // 计划滑动位置
+  const planX = Math.floor(x + speedX * slideTimeX);
+  const planY = Math.floor(y + speedY * slideTimeY);
+
   return {
-    endX: Math.floor(x + speedX * slideTime),
-    endY: Math.floor(y + speedY * slideTime),
+    x: planX,
+    y: planY,
   };
 };
 

src/utils/slideToSuitableOffset.ts

@@ -1,73 +0,0 @@
-import slideToPosition from './slideToPosition';
-import { getClosedHorizontal, getClosedVertical } from './getCloseEdge';
-import { CloseEdgeEnum } from '../types';
-
-/**
- * 适应到合适的图片偏移量
- */
-const slideToSuitableOffset = ({
-  x,
-  y,
-  lastX,
-  lastY,
-  width,
-  height,
-  scale,
-  touchedTime,
-}: {
-  x: number;
-  y: number;
-  lastX: number;
-  lastY: number;
-  width: number;
-  height: number;
-  scale: number;
-  touchedTime: number;
-}): {
-  x: number;
-  y: number;
-} => {
-  // 滑动到结果的位置
-  const { endX, endY } = slideToPosition({
-    x,
-    y,
-    lastX,
-    lastY,
-    touchedTime,
-  });
-
-  let currentX = endX;
-  let currentY = endY;
-
-  const { innerWidth, innerHeight } = window;
-  // 图片超出的长度
-  const outOffsetX = (width * scale - innerWidth) / 2;
-  const outOffsetY = (height * scale - innerHeight) / 2;
-
-  const horizontalType = getClosedHorizontal(endX, scale, width);
-  const verticalType = getClosedVertical(endY, scale, height);
-
-  // x
-  if (horizontalType === CloseEdgeEnum.Small) {
-    currentX = 0;
-  } else if (horizontalType === CloseEdgeEnum.Before) {
-    currentX = outOffsetX;
-  } else if (horizontalType === CloseEdgeEnum.After) {
-    currentX = -outOffsetX;
-  }
-  // y
-  if (verticalType === CloseEdgeEnum.Small) {
-    currentY = 0;
-  } else if (verticalType === CloseEdgeEnum.Before) {
-    currentY = outOffsetY;
-  } else if (verticalType === CloseEdgeEnum.After) {
-    currentY = -outOffsetY;
-  }
-
-  return {
-    x: currentX,
-    y: currentY,
-  };
-};
-
-export default slideToSuitableOffset;

src/variables.ts

@@ -34,6 +34,11 @@ export const minScale: number = 1;
 export const maxScale: number = 6;
 
 /**
+ * 滑动加速度
+ */
+export const slideAcceleration: number = 0.8;
+
+/**
  * 缩放弹性缓冲
  */
 export const scaleBuffer: number = 0.2;