有没有一种方法可以在框架运动中应用物理学？

Question

我目前正在试验react.js和framer-motion库，我在问自己是否有办法将物理应用到可拖动的组件上。我想实现一个球，当它被拉到空中时，它会掉下来。我已经实现了一个可以在屏幕上拖动的球，但没有物理特性。所以我在问自己，'framer-motion‘库对于这样的项目是不是正确的选择，如果是的话，有没有什么例子或文档可以这样做呢？

提前谢谢。

Answer 1

作为their API的一部分的帧运动supports spring animation。

useEffect(() => {
  const controls = animate(x, 100, {
    type: "spring",
    stiffness: 2000,
    onComplete: v => {}
  })

  return controls.stop
})

例如，可以定义弹簧动画选项：

export const spring = {
  ...
  gentle: {
    type: `spring`,
    mass: 1,
    damping: 50,
    stiffness: 100,
    velocity: 2,
  },
};

并在variants属性中使用它们。

const container = {
  expanded: {
    width: `100%`,
    transition: spring.gentle,
  },
  ...
};

// Usage example, animating `width` prop is not recommended
<motion.div animate="expanded" variants={container} ... > ... </motion.div>