Framer Motion - 让 div 在页面上随机移动

Question

我刚开始使用 Framer Motion，但我非常喜欢这个库。到目前为止太棒了。但是，当我尝试在整个页面上移动背景 div 时，我现在卡住了。

https://codesandbox.io/s/svg-background-60ht8?file=/src/App.js

这是我的codesandbox

我尝试了所有方法，阅读了所有文档，我确实得到了一个使用 Motionvalue 并计算边界的技巧，这样球就不会离开屏幕。但是我还想不通...

有谁知道如何使 SVG/ball/div 在整个页面上无限动画化？提前致谢！

编辑：

它现在随机移动，但在本地机器上，动画在屏幕外时中断并重复。

Answer 1

不完全确定这种效果是否是您想要的，但我尝试在一个更类似于 DVD bouncing logo 的示例中添加随机移动和屏幕约束。但是，我想 motionValue 应该在所有情况下使用，因为使用状态会产生渲染成本以及精度损失。

我无法使用运动值进行相同的演示，因此这可能值得进一步探索。

Answer 2

我用 MathRandom 做了类似的事情，有两个状态变量代表屏幕上的 x 和 y 位置，还有一个 setInterval() ，所以它会在几秒钟后改变。类似于：

const Test = () => {

    const { height, width } = getDimensions();
    const [Position, setPosition] = useState({ x: 150, y: 150 })

    useEffect(() => {
            let timer = setInterval(() => {
                setPosition({
                    ...Position,
                    x: width * (1 - Math.random()) - 250,
                    y: height * (1 - Math.random()) - 250,
                }, 1500)
                
            return () => {
                clearInterval(timer)
            }
        }, [Position])

    return (
            <div className="screen">
              <div className='Animate' style={{
                    top: Position.y,
                    left: Position.x,
                    borderRadius: 100,
                    height: 100,
                    width: 100,
                    ...
                }} 
              />
         </div>
    )
}

Framer Motion - 让 div 在页面上随机移动

Framer Motion - Making a div randomly move across the page

reactjs

animation

gatsby

framer-motion