在反应中链接关键帧-spring

Question

我正在尝试为 cta 按钮制作微动类型的动画，在指定的延迟后运行s 以吸引观众的注意力。
但它并没有像预期的那样工作，因为如果你看到 spring 对象

useSpring({
    loop: true,
    delay: 1000,
    config: { tension: 200, friction: 5 },
    from: { scaleX: 1, scaleY: 1, y: 0 },
    to: [
      { scaleX: 1.1, scaleY: 0.9, y: 3 },
      { scaleX: 1, scaleY: 1, y: 0 }
    ]
  });

我在 to 属性中有两个关键帧，因此我希望它在跳回其原始大小之前缩小一点。
但问题是它在两个关键帧之间添加了 delay，正如您在我的 codesandbox 示例中看到的那样。相反，我希望关键帧立即运行没有延迟，同时保持每个完整抖动的延迟。
说实话，这个库的文档对我没什么帮助。

Answer 1

感觉像是延迟，但实际上，它只是第一个动画关键帧在下一个开始之前完成。

尝试将持续时间添加到您的配置中 config: { tension: 200, friction: 5, duration: 200 }, 或者尝试将 clamp 添加到您的配置 config: { tension: 200, friction: 5, clamp: true },

React-Spring 使用物理动画，我刚开始的时候也被这个绊倒了。插值发生在小范围内，因此您不会注意到它们仍然是运行.

import { animated, useSpring, config } from "react-spring";
import styled from "styled-components";

export default function App() {
  const jiggleSpring = useSpring({
    loop: true,
    delay: 2000,
    config: config.stiff,
    from: { scaleX: 1, scaleY: 1, y: 0 },
    to: [
      { scaleX: 1.1, scaleY: 0.9, y: 3 },
      // I don't want the delay between these keyframes
      { scaleX: 1, scaleY: 1, y: 0 }
    ]
  });

我也会尝试单独导入配置并尝试不同的配置。

在反应中链接关键帧-spring

Chaining keyframes in react-spring

reactjs

react-spring