Framer Motion - 仅沿一个方向拖动（例如仅向下）

Question

我有几个使用 styled-components 创建的简单组件。一个是容器，一个是圆圈。

我正在使用 Framer Motion 为容器中的圆圈拖动设置动画。

有什么方法可以限制圆上的阻力，使其只能向下拖动（就像杠杆在顶部时只能向下拖动一样）？理想情况下，我希望它可以只向下拖动圆圈，然后在释放时，圆圈 returns 到零位置。这个想法是在老虎机的侧面复制杠杆的运动。

const component = ({ ...props }) => {

  return (
    <Container props={props}>
      <Circle
        drag={true}
        drag="y"
        dragConstraints={{ top: 0, bottom: 0 }}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 1.2, cursor: "grabbing" }}
        dragElastic={0.3}
        dragTransition={{ bounceStiffness: 10000, bounceDamping: 10 }}
      />
    </Container>
  );
};

const Circle = styled(motion.div)`
  height: 100px;
  width: 100px;
  border-style: solid;
  border-width: 5px;
  border-radius: 50%;
  border-color: black;
  cursor: grab;
`;
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 450px;
`;

Answer 1

答案就在这个拉取请求中： https://github.com/framer/motion/pull/984

您可以向 dragElastic 传递一个对象，并在您不希望用户能够向其拖动的一侧将值设置为 0：

dragElastic = {{top: 0, bottom: 0.3}}

Framer Motion - 仅沿一个方向拖动（例如仅向下）

Framer Motion - Drag in one direction only (eg only down)

javascript

reactjs

framer-motion