关于前端:2022强力之作一款超精致的图片预览组件

我刚接触前端这个行业的时候就有一个想法，那就是写一个超炫酷的图片预览画廊。还记得过后用美图看看看，那轻快的速度和交互很是令人着迷。

该组件在几年前曾经公布不完全版，前面断断续续的保护，总感觉差了点什么。今年春节没劳动，全搭在下面进行开发，当初总算是完满实现！先看看成果：

缩略图完满突变：

指定地位放大：

加速滚动：

什么是 react-photo-view

react-photo-view 领有无可比拟的预览交互体验：从关上图像开始，每一帧的动画、细节和交互都通过了精心设计与重复调试，媲美原生图片预览的成果。

pnpm i react-photo-view

概览：

import {PhotoProvider, PhotoView} from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export default function MyComponent() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

为什么要独自开发它？

当然想实现它的执念也算一个方面，但根本原因是在 React 弱小的生态中基本找不到一个好用的图片预览计划。过后奉行拿来主义，在网上找了一圈基于 React 放大预览组件库，后果令我有点意外，图片放大预览的库的数量显著比不上轮播组件库。更令人窒息的是这些少得可怜的组件库中，其中一大半都是基于 PhotoSwipe 这个开源库进行的二次封装。除此之外，能用于理论生产的预览组件库……如同没有（也可能是我找不到），这种状况不仅体现在 React 库上，其余框架 Vue 乃至是原生的相干库都是如此。

当然 PhotoSwipe 也不是不能用，但原生操作 DOM 的写法在 React 中心心相印，其体积也是在 gzip 12KB 之上了，显得有点臃肿了，便有了这个大胆的想法。

它有多优良？

它领有十分欠缺的细节与个性：

• 反对触摸手势，拖动 / 平移 / 物理成果滑动，双指指定地位放大 / 放大
• 全方面动画连接，关上 / 敞开 / 回弹 / 触边，顺其自然的交互成果
• 图像自适应，以一个适合的最后出现大小，并依据调整自适应
• 反对自定义如 <video /> 或任意 HTML 元素的预览
• 键盘导航，完满适配桌面端
• 反对自定义节点扩大，轻松实现 全屏预览、旋转管制、图片介绍 以及更多功能
• 基于 typescript，7KB Gzipped，反对服务端渲染
• 简略易用的 API，上手零老本

还导出了反对 ES2017 以上的 JS，能够做到 6KB Gzipped。在如此的体积上加上十分多的体验细节实属不容易，更多的性能能够通过非常容易的自定义渲染来实现，这与 React 理念完满符合，从而能够防止内置一些非刚需的性能。

风行库比照

以下表格统计了大部分场景所需性能，展现 react-photo-view、PhotoSwipe 和 rc-image（ant-design）比照：

敌对的文档

还有什么比文档更重要了，为此，我还筹备了一个超丑陋的文档（目前只有中文，当前有工夫在翻译吧~）

https://react-photo-view.verc…

实现历程

图片追随手指滚动

在 onTouchStart 时记录以后触发地位状态，在 onTouchMove 时让其追随手指挪动，onTouchEnd 解除追随就能够简略实现。

触边地位反馈使图片切换都是须要缓缓推敲细节：在 onTouchStart 之后挪动如果立刻让图片追随手指挪动的话会带来许多误操作，比方本想让他切换图片却走了高低滑动的逻辑。这时候就须要一个 20px 的挪动缓冲来预判手指挪动方向。

指定图片地位进行放大

应用 transform: scale(value) 能够实现对图片的缩放，然而都是对图片核心进行放大，缩放的后果可能不是想要的。起初打算用 transform-origin 来实现，想法是美妙的，尽管第一次在指定的地位可能进行放大。假使放大的地位不是原来的地位就会产生凌乱跳动，很显然这个形式不行。

起初思来想去睡不着，在睡梦中发现了灵感：便于计算了解，咱们设图片中心点为 0，任何指定地位的放大放大，即扭转图片核心的地位。比方图片宽度 200，中心点地位为 100，基于最左侧地位放大一倍。当初图片宽度 400，那么中心点的地位应为 200。那么总结公式如下：

const centerClientX = innerWidth / 2;
// 坐标偏移转换
const lastPositionX = centerClientX + lastX;
// 缩放偏移
const offsetScale = nextScale / scale;
// 最终偏移地位
const originX =
  clientX - (clientX - lastPositionX) * offsetScale - centerClientX;

这种模式计算能承当各种地位响应，比方双指缩放、双指滚动 + 缩放、边缘计算等等。

双指之间的间隔

这里须要初中时直角三角勾股定理：

Math.sqrt((nextClientX - clientX) ** 2 + (nextClientY - clientY) ** 2);

模仿滚动操作

之前的版本应用 transition 实现，通过手指滑动开始完结的时间差，计算出初始速度，估摸着用 transition 模拟出一个间隔让眼睛看起来有滚动成果 😂。但这种形式体验始终差很多。前面联合高中物理公式模拟出滚动成果：

加速运动：

空气阻力：

CρS 都是常数，罗唆都搞成一个量好了。至于怎么出这个量大小……试出来的 😂 这样就只与 v 平方成正比了。

另外因为和静止方向相同，取个 v 的方向即 Math.sign(-v)

function scrollMove(
  initialSpeed: number,
  callback: (spatial: number) => boolean,
) {
  // 加速度
  const acceleration = -0.002;
  // 阻力
  const resistance = 0.0002;

  let v = initialSpeed;
  let s = 0;
  let lastTime: number | undefined = undefined;
  let frameId = 0;

  const calcMove = (now: number) => {if (!lastTime) {lastTime = now;}
    const dt = now - lastTime;
    const direction = Math.sign(initialSpeed);
    const a = direction * acceleration;
    const f = Math.sign(-v) * v ** 2 * resistance;
    const ds = v * dt + ((a + f) * dt ** 2) / 2;
    v = v + (a + f) * dt;

    s = s + ds;
    // move to s
    lastTime = now;

    if (direction * v <= 0) {cancelAnimationFrame(frameId);
      return;
    }

    if (callback(s)) {frameId = requestAnimationFrame(calcMove);
      return;
    }
    cancelAnimationFrame(frameId);
  };
  frameId = requestAnimationFrame(calcMove);
}

缩略图裁切

PhotoSwipe 反对缩略图裁切，不过须要手动指定图片宽高和 data-cropped，相当麻烦。react-photo-view 通过读取缩略图 getComputedStyle(element).objectFit 来获取以后裁切参数。实现主动裁切成果。

兼容性解决

因为每张图片都是一个合成层，这会耗费相当多的内存。IOS 上对于内存有相当大的限度，如果图片在放大的状况始终应用 scale，那么在 Safari 上会显得十分含糊。当初通过每次在静止实现后，都扭转图片的宽高为指定的值，而后重设 scale 为 1，这种形式应该自身须要达到的成果吧。

其余

PhotoSwipe 的作者是寓居在基辅的乌克兰人，他逃离了基辅，当初他和他家人在乌克兰西部很平安，也心愿在和平完结后他能从新振作起来。

结语

我在 react-photo-view 的细节下面破费了相当的精力，如果喜爱的话能够帮忙点个 Star

https://github.com/MinJieLiu/react-photo-view

谢谢！