框架运动拖动不考虑先前更新的道具

Question

一个简单的用例是允许用户单击按钮在滑块中分页，或者拖动。两个事件都调用相同的paginate函数，并带有一个前进或后退的参数——很简单。

然而，拖动触发似乎会导致奇怪的行为，滑块希望从几张幻灯片开始动画，就好像它忽略了更新的道具一样。使用按钮时不会发生这种情况，并且两者都使用相同的简单paginate调用。

任何提示都将不胜感激。

最小示例：

export default function App() {
const [position, setPosition] = useState<number>(0);
const paginate = (direction: Direction) => {
setPosition((prev) => {
return direction === Direction.Forward
? Math.max(-800, prev - 200)
: Math.min(0, prev + 200);
});
};
return (
<div className="App">
<Slider>
<Wrapper
animate={{ x: position }}
transition={{
x: { duration: 1, type: "tween" }
}}
drag="x"
dragConstraints={{
top: 0,
left: 0,
right: 0,
bottom: 0
}}
onDragEnd={(e, { offset, velocity }) => {
const swipe = swipePower(offset.x, velocity.x);
if (swipe < -swipeConfidenceThreshold) {
paginate(Direction.Forward);
} else if (swipe > swipeConfidenceThreshold) {
paginate(Direction.Back);
}
}}
>
<Slide>1</Slide>
<Slide className="alt">2</Slide>
<Slide>3</Slide>
<Slide className="alt">4</Slide>
<Slide>5</Slide>
</Wrapper>
</Slider>
<button onClick={() => paginate(Direction.Back)}>prev</button>
<button onClick={() => paginate(Direction.Forward)}>next</button>
</div>
);
}

Codesandbox演示

Answer 1

我不得不说，这个问题很有趣。然而，我想我已经为你找到了一个处理这个问题的方法。我注意到的一件事是，如果你评论

onDragEnd={(e, { offset, velocity }) => {
// const swipe = swipePower(offset.x, velocity.x);
// if (swipe < -swipeConfidenceThreshold) {
// paginate(Direction.Forward);
// } else if (swipe > swipeConfidenceThreshold) {
// paginate(Direction.Back);
// }
}}

整个onDragEnd道具函数，这个例子仍然不起作用，因为从外观上看，可拖动组件不考虑您的偏移。

我意识到，在这一点上，问题是组件的内部状态与您的状态不同步。你会看到吗，Framer Motion API实际上提供了一种检查这种情况的方法。https://www.framer.com/api/motion/motionvalue/#usemotionvalue

钩子useMotionValue()让我们能够看到实际发生了什么。事实证明，当用户开始拖动时，我们的值设置错误：

useEffect(
() =>
motionX.onChange((latest) => {
console.log("LATEST: ", latest);
}),
[]
);

我们可以看到这一点，因为；跳跃"；我们一开始拖就拖到200。

因此，在理论上修复是很容易的，我们只需要确保让这个值"；知道"；关于我们的偏移量，这样我们就可以从正确的偏移量开始！

不管怎样，这是我的思考过程，这是解决方案，你所需要做的就是设置左约束，使其发挥作用：

dragConstraints={{
top: 0,
left: position,
right: 0,
bottom: 0
}}

还有塔达！这使它发挥作用。以下是我的工作解决方案：https://codesandbox.io/s/lingering-waterfall-2tsfi?file=/src/App.tsx