在 React Spring 中为插值添加延迟答案

【问题标题】：Add delay to interpolated value in React Spring在 React Spring 中为插值添加延迟
【发布时间】：2022-09-26 17:43:34
【问题描述】：

我想知道是否可以在 react-spring 中为插值添加延迟。我想要一个弹簧驱动多个动画，所以我认为useChain 或useTransition 不会在这里工作。

我有一个这样的春天：

// This spring will drive multiple animations
const spring = useSpring({x: isActive ? 1 : 0})

// In my component
const opacity = spring.x.to([0, 0.5, 1, [0, 1, 1]) // want to add a delay here
const scale = spring.x.to([0, 0.5, 1, [0, 1, 1])
<animated.div style={{opacity, scale}} />

在上面的示例中，我希望在驱动弹簧值达到 0.5 时结束缩放动画。但是，我希望不透明动画延迟 200 毫秒，但仍附加到同一个弹簧。这可能吗，还是我需要使用多个弹簧？

标签： javascript reactjs animation react-spring

【解决方案1】：

我相信您需要为此创建一个单独的 SpringValue（通过在您的 useSpring 钩子中添加一个额外的 key 很容易完成）。这是因为插值只是转换值，它们不与值的动画交互。

【讨论】：