优化动图

2025-10-23 10:30:43 +08:00
parent 77bc2c5775
commit 590b26c420
10 changed files with 254 additions and 49 deletions
@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import type { ImageData } from "../types";

 interface ImageCarouselProps {
@@ -9,29 +9,134 @@ interface ImageCarouselProps {

 export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
  ({ images, currentIndex, onTogglePlay }, ref) => {
+    const [offset, setOffset] = useState(0);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());
+    const playedVideos = useRef<Set<string>>(new Set());
+
+    // 虚拟滚动：只渲染当前图片和前后各一张
+    const visibleIndices = (() => {
+      const indices: number[] = [];
+      if (currentIndex > 0) indices.push(currentIndex - 1);
+      indices.push(currentIndex);
+      if (currentIndex < images.length - 1) indices.push(currentIndex + 1);
+      return indices;
+    })();
+
+    // 当 currentIndex 变化时，触发滚动动画
+    useEffect(() => {
+      setIsTransitioning(true);
+      setOffset(-currentIndex * 100);
+
+      const timer = setTimeout(() => {
+        setIsTransitioning(false);
+      }, 300); // 与 CSS transition 时间匹配
+
+      return () => clearTimeout(timer);
+    }, [currentIndex]);
+
+    // 管理动图播放：进入视口时播放一次
+    useEffect(() => {
+      const currentImage = images[currentIndex];
+      if (!currentImage?.animated) return;
+
+      const videoKey = currentImage.id;
+      const videoEl = videoRefs.current.get(videoKey);
+      
+      if (videoEl) {
+        // 检查是否已经播放过
+        if (!playedVideos.current.has(videoKey)) {
+          // 重置并播放
+          videoEl.currentTime = 0;
+          videoEl.play().catch(() => {});
+          playedVideos.current.add(videoKey);
+        } else {
+          // 已播放过，重置到开头但不自动播放
+          videoEl.currentTime = 0;
+          videoEl.play().catch(() => {});
+        }
+      }
+    }, [currentIndex, images]);
+
+    // 当切换到其他图片时，清除已播放标记（切回来会重新播放）
+    useEffect(() => {
+      const currentImage = images[currentIndex];
+      if (currentImage?.animated) {
+        const videoKey = currentImage.id;
+        
+        // 清除其他视频的播放记录
+        playedVideos.current.forEach(key => {
+          if (key !== videoKey) {
+            playedVideos.current.delete(key);
+          }
+        });
+      }
+    }, [currentIndex, images]);
+
+    const handleVideoRef = (el: HTMLVideoElement | null, imageId: string) => {
+      if (el) {
+        videoRefs.current.set(imageId, el);
+      } else {
+        videoRefs.current.delete(imageId);
+      }
+    };
+
    return (
      <div
        ref={ref}
-        className="flex h-full w-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+        className="relative h-full w-full overflow-hidden"
      >
-        {images.map((img, i) => (
-          <div
-            key={img.id}
-            className="relative h-full min-w-full snap-center flex items-center justify-center bg-black/70 cursor-pointer"
-            onClick={onTogglePlay}
-          >{
-              img.animated ? <video src={img.animated} autoPlay muted playsInline className="max-w-full max-h-full object-contain" /> : <img
-                src={img.url}
-                alt={`image-${i + 1}`}
-                className="max-w-full max-h-full object-contain"
+        <div
+          ref={containerRef}
+          className="flex h-full w-full"
+          style={{
+            transform: `translateX(${offset}%)`,
+            transition: isTransitioning ? 'transform 300ms ease-out' : 'none',
+          }}
+        >
+          {visibleIndices.map((i) => {
+            const img = images[i];
+            return (
+              <div
+                key={img.id}
+                className="relative h-full min-w-full flex items-center justify-center bg-black/70 cursor-pointer"
                style={{
-                  width: img.width ? `${img.width}px` : undefined,
-                  height: img.height ? `${img.height}px` : undefined,
+                  transform: `translateX(${i * 100}%)`,
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  width: '100%',
                }}
-              />
-            }
-          </div>
-        ))}
+                onClick={onTogglePlay}
+              >
+                {img.animated ? (
+                  <video
+                    ref={(el) => handleVideoRef(el, img.id)}
+                    src={img.animated}
+                    muted
+                    playsInline
+                    className="max-w-full max-h-full object-contain"
+                    onEnded={(e) => {
+                      // 播放结束后停留在最后一帧
+                      e.currentTarget.pause();
+                    }}
+                  />
+                ) : (
+                  <img
+                    src={img.url}
+                    alt={`image-${i + 1}`}
+                    className="max-w-full max-h-full object-contain"
+                    style={{
+                      width: img.width ? `${img.width}px` : undefined,
+                      height: img.height ? `${img.height}px` : undefined,
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
      </div>
    );
  }