Typescript 如何使用键盘输入平滑地更新成帧器运动位置？

我正在为动画使用帧运动，我想使用x移动一个长方体。设置它确实移动，但不平滑

     window.addEventListener("keydown", (event) => {
    const key = event.key; // "ArrowRight", "ArrowLeft"
    const value = x.get();
    const factor = 100;

    event.preventDefault();
    if (key === "ArrowLeft") {
      x.set(value - factor);
      xPos.set(value - factor);
    }

    if (key === "ArrowRight") {
      x.set(value + factor);
      xPos.set(value + factor);
    }
  });
    <motion.div className="example-container" style={{ background }}>
      <motion.div
        className="box"
        style={{ x }}
        drag="x"
        dragConstraints={{ left: 0, right: 0 }}
        onDragEnd={(event, info) => OnEndDrag(x.get())}
      ></motion.div>
    </motion.div>

window.addEventListener（“按键按下”，“事件）=>{
const key=event.key；/“ArrowRight”、“ArrowLeft”
常量值=x.get（）；
常数系数=100；
event.preventDefault（）；
如果（键==“箭头左”）{
x、 set（值-因子）；
xPos.set（值-因子）；
}
如果（键==“箭头右键”）{
x、 设置（值+系数）；
xPos.set（值+因子）；
}
});
onendrag（x.get（））}
>

---

我用错了吗？

终于找到了

我缺少设置状态和一些需要变量。现在看起来像这样 我唯一的问题是它要么从左边开始，要么从右边开始

   // set possible positions
          const Variants = {
          left: {
            x: "-500px",
          },
          middle: {
            x: "0",
          },
          right: {
            x: "500px",
          },
        };

      const [isLeft, SetDir] = useState(false);


 // update position using keyboard inputs
      window.addEventListener("keydown", (event) => {
        const key = event.key; // "ArrowRight", "ArrowLeft"
    
        event.preventDefault();
        if (key === "ArrowLeft") {
          //animateSetFalse = true;
          SetDir(true);
        }
    
        if (key === "ArrowRight") {
          //animateSetFalse = true;
          SetDir(false);
        }
      });


      return (
        <motion.div className="example-container" style={{ background }}>
          <motion.div
            className="box"
            style={{ x }}
            drag="x"
            dragConstraints={{ left: 0, right: 0 }}
            //onDragEnd={(event, info) => OnEndDrag(x.get())}
            animate={testString}
            variants={Variants}
          ></motion.div>
        </motion.div>
      );

//设置可能的位置
常量变量={
左：{
x:“-500px”，
},
中间：{
x:“0”，
},
对:{
x:“500px”，
},
};
const[isLeft，SetDir]=useState（false）；
//使用键盘输入更新位置
window.addEventListener（“向下键”，（事件）=>{
const key=event.key；/“ArrowRight”、“ArrowLeft”
event.preventDefault（）；
如果（键==“箭头左”）{
//animateSetFalse=true；
SetDir（真）；
}
如果（键==“箭头右键”）{
//animateSetFalse=true；
SetDir（假）；
}
});
返回(
onendrag（x.get（））}
动画={testString}
变体={variants}
>
);