咨询一个react-spring useSprings的问题？

Question

这是一个关于实现翻卡片的一个动画效果，我使用useSpring分别写多个可以实现针对单个的动画效果，但是如果使用useSprings则会导致所有的卡片一起运动了，不知道有什么可以进行标识，让他内部单个卡片自己动？
可行的多个useSpring方案，代码大致如下。每个卡片移动上去都会有单独的动画效果

const trans = (x: number, y: number, s: number) =>
  `perspective(60vw) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`
 const [props, set] = useSpring(() => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
  const [props2, set2] = useSpring(() => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
  const [props3, set3] = useSpring(() => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
return (
    <div className="card-content flex flex-1 justify-center gap-[0.6vw]">
      {cardsProps.map((animation, index) => (
        <animated.div
          key={index}
          onMouseMove={({ clientX: x, clientY: y }) => api({ xys: calc(x, y) })}
          onMouseLeave={() => api({ xys: [0, 0, 1] })}
          style={{ transform: animation.xys.to(trans) }}
          className="h-[24.06vw] w-[16.875vw] cursor-pointer bg-module_card_large bg-100%"
        ></animated.div>
      ))}
      <animated.div
        onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
        onMouseLeave={() => set({ xys: [0, 0, 1] })}
        style={{ transform: props.xys.to(trans) }}
        className="h-[24.06vw] w-[16.875vw] cursor-pointer bg-module_card_large bg-100%"
      ></animated.div>
      <animated.div
        onMouseMove={({ clientX: x, clientY: y }) => set2({ xys: calc(x, y) })}
        onMouseLeave={() => set2({ xys: [0, 0, 1] })}
        style={{ transform: props2.xys.to(trans) }}
        className="h-[24.06vw] w-[16.875vw] cursor-pointer bg-module_card_large bg-100%"
      ></animated.div>
      <animated.div
        onMouseMove={({ clientX: x, clientY: y }) => set3({ xys: calc(x, y) })}
        onMouseLeave={() => set3({ xys: [0, 0, 1] })}
        style={{ transform: props3.xys.to(trans) }}
        className="h-[24.06vw] w-[16.875vw] cursor-pointer bg-module_card_large bg-100%"
      ></animated.div>
    </div>
  );

不可行的单个useSprings方案：一个移动全部都移动了，如果对单个动画进行标识？

const trans = (x: number, y: number, s: number) =>
  `perspective(60vw) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`
  // const transList = [trans, trans, trans]
  const [cardsProps, api] = useSprings(3, (item) => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
return (
    <div className="card-content flex flex-1 justify-center gap-[0.6vw]">
      {cardsProps.map((animation, index) => (
        <animated.div
          key={index}
          onMouseMove={({ clientX: x, clientY: y }) => api({ xys: calc(x, y) })}
          onMouseLeave={() => api({ xys: [0, 0, 1] })}
          style={{ transform: animation.xys.to(trans) }}
          className="h-[24.06vw] w-[16.875vw] cursor-pointer bg-module_card_large bg-100%"
        ></animated.div>
      ))}
    </div>
  );

Answer 1

mousemove调用api的时候，要判断index是否为当前移入的卡片，不是的话直接return，不返回动画配置。

官网这个例子是差不多的。
https://codesandbox.io/s/gith...