Question

我正在实现一个“窗格”视图组件。类似于 IntelliJ 或 VSCode，其中每个窗格都可以重新排列为不同的行和列。拖放式重新排列操作需要一个预览动画：一个在屏幕周围动画的框，显示操作完成后新窗格的插入位置。

基本上，我需要一个绝对定位的圆角矩形，它可以在屏幕周围平滑地动画。理想情况下，这将是 GPU 加速的。

我的尝试：

尝试不。 1

我只是创建了一个 <div> 元素，并为 height、width、top 和 left 值设置动画。这有效，并允许所有其他 CSS 效果在矩形上工作，如边框和圆角边缘。然而，它并不是很快。建议不要直接为位置和大小设置动画，因为它会强制在每一帧上重排。

尝试不。 2

相反，我创建了 1px by 1px 彩色 <div>，并通过编辑它的 transform CSS 属性来设置其大小和位置。这是超级平滑的，因为它使用了 GPU 加速的变换属性。但是，它有一个缺点：我无法设置 <div> 的样式。我不能使用 border 或 border-radius，否则它们会被 scale 转换扭曲。

想法

由于矩形是一个简单的形状，我们可以生成一个 svg 并在不同位置之间进行插值吗？如果这发生在 viewBox 内，会顺利吗？我对此不确定，因为我对 SVG 没有太多经验。

我的问题 – 如何在屏幕周围平滑地设置 div 动画，其样式为 border 或 border-radius？

我可以没有 border，但强烈需要 border-radius。

Answer 1

我不确定我是否完全理解了这个问题，因为在这种情况下我无法重现它：

此代码段使用变换缩放和变换平移来为元素设置动画。 Evertyhing 以 vmin 作为基本单位进行计算，因此无论您使用何种设备/视口，您都会看到相同的纵横比。

在我的笔记本电脑上，GPU 使用率非常稳定，为 13%，转换很流畅，我看不到任何失真。那么，在原始代码中是否可能使用了一些绝对定义的单位，例如不能正确缩放？

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.container {
  --containerw: 80vmin;
  --containerh: 60vmin;
  width: var(--containerw);
  height: var(--containerh);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  background-color: pink;
}

.test {
  --startleft: 10;
  /* where it starts (within the container as a %) */
  --starttop: 10;
  --endleft: 70;
  /* where you want it to go to (within the container as a %) */
  --endtop: 70;
  --scalex: 4;
  /* how much you want it to grow */
  --scaley: 2;
  --w: 10%;
  /* its width */
  --h: 10%;
  /* its height */
  width: var(--w);
  height: var(--h);
  border-radius: 1vmin;
  border-width: 0.2vmin;
  border-style: solid;
  background-color: cyan;
  animation: move 10s infinite linear;
  position: absolute;
  box-sizing: border-box;
}

@keyframes move {
  0%,
  100% {
    transform: scale(1, 1) translate(calc(var(--startleft) * var(--containerw) / 100), calc(var(--starttop) * var(--containerh) / 100));
  }
  50% {
    transform: scale(var(--scalex), var(--scaley)) translate(calc(var(--endleft) * var(--containerw) / 100 / var(--scalex)), calc(var(--endtop) * var(--containerh) / 100 / var(--scaley)));
  }
}

<div class="container">
  <div class="test"></div>
</div>

Answer 2

我想出了一个解决办法！这可以为带有圆角和边框的 <div/> 提供流畅的动画（使用 GPU 加速转换），而无需任何拉伸。

它基于“边框图像”概念。我们可以为 9 个不同的 div 设置动画，而不是为一个 <div/> 设置动画，每个 div 代表矩形的一个切片。

左上角
顶部中心矩形
右上角
左中矩形
中间矩形
右中矩形
左下角
底部中心矩形
右下角

角不需要缩放，只需平移。这可以防止任何拉伸。矩形边缘根据边框进行缩放，因此它不会拉伸 solid 边框。

如何平滑地为圆角矩形的位置和大小设置动画？

2 个答案: