求助：如何在Framer中持续检测鼠标按压状态以控制矩形旋转

你的问题在于onMouseDown和onMouseUp事件只会在状态切换的瞬间触发一次，所以代码只会执行一次旋转增减操作，不会持续运行。要实现持续旋转，我们需要用循环动画或者帧更新循环来跟踪鼠标状态并持续更新图层角度。下面提供两种常用的解决方案：

方案1：使用Framer内置的Animation组件（推荐） #

这种方式更贴合Framer的动画系统，代码简洁且易于维护：

// 创建居中的矩形图层
const layer = new Layer({
  x: Align.center,
  y: Align.center,
  width: 100,
  height: 100,
  backgroundColor: "#2196F3"
});

// 定义顺时针循环动画：每2秒旋转360度，无限重复
const rotateRight = new Animation({
  layer: layer,
  rotation: "+=360",
  duration: 2000,
  repeat: Infinity
});

// 定义逆时针循环动画
const rotateLeft = new Animation({
  layer: layer,
  rotation: "-=360",
  duration: 2000,
  repeat: Infinity
});

// 鼠标按压时：停止逆时针动画，启动顺时针
layer.onMouseDown(() => {
  rotateLeft.stop();
  rotateRight.start();
});

// 鼠标松开时：停止顺时针动画，启动逆时针
layer.onMouseUp(() => {
  rotateRight.stop();
  rotateLeft.start();
});

// 初始状态默认播放逆时针旋转
rotateLeft.start();

方案2：使用requestAnimationFrame自定义帧更新 #

如果你需要更精细的控制（比如自定义每帧旋转的角度），可以用原生的requestAnimationFrame来实现持续更新：

const layer = new Layer({
  x: Align.center,
  y: Align.center,
  width: 100,
  height: 100,
  backgroundColor: "#2196F3"
});

// 跟踪鼠标按压状态
let isMouseDown = false;
// 存储动画帧ID，用于后续取消
let animationId = null;

// 每帧更新旋转角度的函数
function updateRotation() {
  if (isMouseDown) {
    layer.rotation += 1; // 每帧顺时针转1度
  } else {
    layer.rotation -= 1; // 每帧逆时针转1度
  }
  // 持续请求下一帧更新
  animationId = requestAnimationFrame(updateRotation);
}

// 绑定鼠标事件切换状态
layer.onMouseDown(() => {
  isMouseDown = true;
});

layer.onMouseUp(() => {
  isMouseDown = false;
});

// 启动帧更新循环
updateRotation();

// 可选：图层销毁时取消动画，避免内存泄漏
layer.onDestroy(() => {
  cancelAnimationFrame(animationId);
});

原理说明 #

• 原代码的问题：onMouseDown/onMouseUp是一次性触发的事件，只会在鼠标按下/松开的瞬间执行一次旋转操作，无法持续运行。
• 两种方案的核心：通过持续运行的循环（Framer的循环动画或原生帧更新）来实时检测鼠标状态，从而持续调整图层的旋转角度。

内容的提问来源于stack exchange，提问作者sln