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

Question

我正在为动画使用帧器运动，我想使用x.set移动一个框。它确实会移动，但并不平滑。

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>

我用错了吗？

Answer 1

终于得到了它。

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

// 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>
);