有没有办法在成帧器运动中应用物理学？

Question

我目前正在试验 react.js 和 framer-motion 库，我问自己是否有办法将物理应用到可拖动组件。 我想实现一个落下的球，当它被拉到空中时。 我已经实现了一个可以在屏幕上拖动的球，但没有物理。 所以我问自己“framer-motion”库是否是这样一个项目的正确选择，如果是的话，是否有任何示例或文档？

提前致谢。

Answer 1

Framer Motion 支持 spring animation作为其 API的一部分。

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

  return controls.stop
})

例如，您可以定义 spring animation 选项：

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>