如何用反应弹簧使 div 左右摇晃

Question

我已经开始玩react-spring，我喜欢这个概念，但我正在努力弄清楚如何构建我想要的动画。

我想向右移动div，然后回到开始，然后向右移动，但不是那么远，回到开始，向右，但不要再走那么远，最后回到起点。就像弹簧一样，它被拉动，当释放时，它会回到它的休息地。

我可以从文档中看到如何调整弹簧的感觉以及如何触发动画，但我以前从未制作过动画，所以知道要更改哪些属性以及如何使其正确循环是我正在寻找帮助的。

编辑：到目前为止，我有这个动画，它有效，但感觉非常脱节。

const shake = useSpring({ 
from: { "margin-left": 0 },
to: [
{ "margin-left": 30 },
{ "margin-left": 0 },
{ "margin-left": 20 },
{ "margin-left": 0 },
{ "margin-left": 10 },
{ "margin-left": 0 }
],
config: {
mass: 1,
tension: 500,
friction: 10
}
});

目前明明是三个机芯，我可以减少动作之间的延迟，让它看起来像一个机芯吗？

留边距是最好的 CSS 属性吗？

Answer 1

更新开始

我刚刚遇到了这个问题的简单解决方案。它比我试图通过配置实现的要好得多。它使用带范围的插值。它现在正在使用转换，但可以很容易地采用保证金。

export default function App() {
const { x } = useSpring({
from: { x: 0 },
to: { x: 1 }
});
return (
<div className="App">
<animated.div
style={{
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [180, 220, 180, 220, 180, 220, 180, 200]
})
.interpolate(x => `translate3d(${x}px, 0px, 0px)`)
}}
>
Shake
</animated.div>
</div>
);
}

https://codesandbox.io/s/awesome-framework-go5oh?file=/src/App.js:103-609

更新结束*

您可以达到弹性效果。有 3 个变量控制基于弹簧的动画：

• 质量
• 摩擦
• 张力

你可以在这里玩粉红色的方块：https://www.react-spring.io/docs/hooks/api 我建议低质量和摩擦以及高张力。您可以在每种动画类型中设置这些变量。例如：

useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });