时间戳

首页 > 解决方案 > 如何使用反应弹簧使 div 左右摇晃

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

问题描述

我已经开始使用 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 属性吗？

标签： reactjsreact-spring

解决方案

更新开始

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

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} });

推荐阅读