如何使用 framer-motion 以编程方式为列表滚动设置动画？

Question

#1。问题

我正在尝试从 react-spring 迁移到成帧器运动。我需要以编程方式滚动虚拟化列表。

#2。错误重现

这是一个带有 react-spring 的工作沙箱。该列表通过 scrollTop 属性更新。我尝试通过 useSpring 或 useMotionValue 状态更新它的值，但这些没有逐步更新，它们直接呈现正确的数字，因此没有弹簧滚动。

如何使用 Framer motion？

https://codesandbox.io/s/spring-vs-motion-7ojlx?file=/src/VirtualizedList.tsx:791-1375

#3。重现步骤

基本上，带有弹簧的动画看起来是这样的：

<Spring from={{ top: 0 }} to={{ top: lineHeight * (page.from - 1) }}>
          {(props) => (
            <List
              height={lineHeight * limit}
              rowCount={data.length}
              rowHeight={lineHeight}
              width={1}
              rowRenderer={row}
              containerStyle={{
                width: "100%",
                maxWidth: "100%"
              }}
              style={{
                width: "100%",
                overflow: "hidden"
              }}
              scrollTop={props.top}
            />
          )}
        </Spring>

#4。预期行为

点击新页面时平滑滚动。