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

问题描述

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

提前致谢。

解决方法

Framer Motion supports spring animation 作为 their API 的一部分。

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>