React Spring - useTrail 延迟问题

Question

目前在我们的应用中使用 react-spring 来做动画；不幸的是，动画不是我擅长的东西，我们的设计师为我们的新标志提供的设计让我在实施上感到困惑。使用普通的旧 JS 非常容易，但在 react-spring 中实现它已证明是一个我无法克服的挑战。

动画的最终目标是如下所示：

https://codepen.io/darylginn/pen/GRqZxBZ

目前，我已经到了这个阶段：

import React from "react";
import { useTrail, animated } from "react-spring";

const Loader: React.FC = () => {
    // Animations
    const paths = [
        {
            id: 1,
            color: "#466FB5",
            d: "M90.6672 33H16L53.3336 96.4409L90.6672 33Z",
        },
        {
            id: 2,
            color: "#0093D3",
            d: "M53.3347 96.4443H128.002L90.6683 33.0034L53.3347 96.4443Z",
        },
        {
            id: 3,
            color: "#53BFA2",
            d: "M128.001 96.3701H53.3336L90.6672 159.811L128.001 96.3701Z",
        },
        {
            id: 4,
            color: "#93C83F",
            d: "M90.6675 159.892H165.335L128.001 96.4417L90.6675 159.892Z",
        },
        {
            id: 5,
            color: "#58B647",
            d: "M165.334 159.892H90.6664L128 223.333L165.334 159.892Z",
        },
        {
            id: 6,
            color: "#F2E90B",
            d: "M202.667 96.4436H128L165.334 159.894L202.667 96.4436Z",
        },
        {
            id: 7,
            color: "#FBB12C",
            d: "M128.001 96.4443H202.668L165.335 33.0034L128.001 96.4443Z",
        },
        {
            id: 8,
            color: "#FF5E8D",
            d: "M240 33H165.333L202.666 96.4409L240 33Z",
        },
    ];

    const trail = useTrail(paths.length, {
        from: {
            scale: 1,
        },
        to: async (next: any) => {
            while (1) {
                await next({ scale: 1.5 });
                await next({ scale: 1 });
            }
        },
    });

    return (
        <div style={{ width: "200px", height: "200px" }}>
            <svg
                width="72"
                height="72"
                viewBox="0 0 256 256"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                style={{ overflow: "visible" }}>
                {trail.map(({ scale }, index) => {
                    const path = paths[index];
                    return (
                        <animated.path
                            key={path.id}
                            fill={path.color}
                            d={path.d}
                            style={{
                                transformOrigin: "center",
                                transform: scale.interpolate((s: any) => `scale(${s})`),
                            }}
                        />
                    );
                })}
            </svg>
        </div>
    );
};

我现在的主要问题是 SVG 中每个三角形的比例需要一个接一个地发生，但我对 useTrail 所做的一切都无法实现。

我确实尝试在 useTrail 中添加这样的延迟

delay: (key: any) => key * 200

但延迟似乎没有任何影响。如果有人可以帮助确保每个三角形在下一个三角形开始之前完成它的排序，那就太好了。

如果您还可以帮助我添加原始设计中所见的颜色变化（请参阅链接），则奖励。

我曾尝试在 react-spring 社区发帖，但没有得到回复

Answer 1

我会将所有三角形的 useTrail 更改为一个 useSpring。如果将 x 值从 0 更改为 8，则可以使用 interpolate 和每个三角形的范围来更改。例如，对于第二个三角形，您可以使用 range:[0,1,1.5,2,8],output:[1,1,1.5,1,1]。这意味着当 x 在 1 和 2 之间时，它会将比例从 1 更改为 1.5 到 1，而所有其他地方都将保持 1。

  const props = useSpring({
    from: {
      x: 0
    },
    config: {
      duration: 4000
    },
    to: async (next: any) => {
      while (1) {
        await next({ x: 8 });
        await next({ reset: true });
      }
    }
  });

我还添加了颜色插值。

    {paths.map((path, index) => {
      const colors = [];
      for (let i = 0; i < 8; i++) {
        colors.push(paths[(i + index) % 8].color);
      }

      return (
        <animated.path
          key={path.id}
          fill={path.color}
          d={path.d}
          style={{
            transformOrigin: "center",
            transform: props.x
              .interpolate({
                range: [0, index, index + 0.5, index + 1, 8],
                output: [1, 1, 1.5, 1, 1]
              })
              .interpolate((x) => `scale(${x})`),
            fill: props.x.interpolate({
              range: [0, 1, 2, 3, 4, 5, 6, 7, 8],
              output: colors
            })
          }}
        />
      );
    })}

我有一个例子。中心三角形有一些故障。但我想你明白了。

示例：https://codesandbox.io/s/animate-triangles-sequentially-with-interpolating-and-range-oer84