如何将多个反作用弹簧连接到单个组件上

Question

我正在学习如何使用react spring。假设我有三个div要制作动画。

<a.div style={trans1}>
<a.div style={trans2}>
<a.div style={trans3}>

trans1具有以下配置…

const [clicked, toggle] = useState(null)
const { x } = useSpring({
from: { x: 0 },
x: clicked ? 1 : 0,
config: { duration: 500 },
})
const trans1 = {
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1],
})
.interpolate((x) => `scale(${x})`),
}

在不复制所有代码的情况下，在第二个和第三个div上实现相同类型的动画的最佳方法是什么？如何使同一弹簧的多个实例用于多个Dom对象而不同时触发它们？我当然不想为每个项目重复一整套代码，对吧？

我是否需要创建一个接受参数的函数，该参数可以在配置中动态切换参数？‍♂️感谢您的帮助。

下面是一个活生生的例子：https://codesandbox.io/s/optimistic-bassi-brnle

我如何使左边&右侧一次制作一个动画而不创建重复代码？

Answer 1

第一种可能性是分离样式并将其赋予多个div。其缺点是，它们在同一时间的行为完全相同。

const style = {
opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
})
.interpolate(x => `scale(${x})`)
};
return (
<div onClick={() => toggle(!state)}>
<animated.div
style={style}>
click
</animated.div>
<animated.div
style={style}>
click
</animated.div>
</div>
)

第二个选项是，使用单击和弹簧逻辑创建一个新组件。通过这种方式，您只需编写一次逻辑，就可以多次使用它。我还引入了一个文本属性来为组件生成不同的文本。

const AnimText = ({text}) => {
const [state, toggle] = useState(true)
const { x } = useSpring({ from: { x: 0 }, x: state ? 1 : 0, config: { duration: 1000 } })
return (
<div onClick={() => toggle(!state)}>
<animated.div
style={{
opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
})
.interpolate(x => `scale(${x})`)
}}>
{text}
</animated.div>
</div>
)
}
function Demo() {
return (
<div>
<AnimText text={'click1'}/>
<AnimText text={'click2'}/>
<AnimText text={'click3'}/>
</div>
)
}

以下是示例：https://codesandbox.io/s/divine-water-n1b6x