如何使用反应弹簧使 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
    }
});

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

margin left 是最好的 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} });