reactjs - 您将如何设计围绕网格移动的动画瓷砖？

Question

想象一下这个视频聊天应用程序：你有 6 列网络摄像头在页面下方，形成一个网格。

如果一个用户断开连接，让该用户的网络摄像头缩小到 0（退出动画），然后该列中剩余的网络摄像头向上动画以填充现在的空白空间。

如果我们想将用户的网络摄像头从第 1 列移动到第 2 列，我们会在网络摄像头的 (x, y) 坐标从其原始位置移动到网格上的新位置时对其进行动画处理。同时，网格上的其他网络摄像头将移动以腾出空间或填补此迁移造成的空白。

我试图弄清楚如何在 React 中设计它。现在我正在查看 Framer-Motion 动画库。该库允许您在卸载 React 组件时自动播放动画（这称为“Animate Presence”）。理想情况下，我希望拥有包含每列内容的简单数组（如 [0, 1, 2, 3]）。然后我可以在这些数组中添加、删除或随机播放项目，将其留给动画库来确定如何在用户浏览器中显示和动画化这些更改。

我正在寻找任何能让这成为可能的动画库或 CSS，但我什至不知道从哪里开始。我们目前正在使用 React 组件构建一切。谢谢！

标签： reactjscss-griduser-experienceframer-motion