Question

因此，我对svg css动画还很陌生，我正尝试将三个路径（都非常弯曲，因此立方贝塞尔曲线）变形为三个矩形。我已经使它工作了，但是在过渡过程中，它的一部分以一种怪异的方式向内倾斜（请参阅下面的CodePen）。右上方，中间和左下方是我希望看到的内容，但左上方和右下方是wtf区域。有没有一种方法可以设置曲线，使这种效果不会发生，或者仅仅是所选择方法的副作用。如果是，是否有更好的方法来做我正在做的事情，以使过渡看起来很顺利？

<!DOCTYPE html>
<html>
  <body>
    <svg viewBox="0 0 2560 2560">
      <path class="top" d="
        M 1280,0
        C 1986.92447978368,0 2489.165,505 2553.665,1152
        C 2553.665,1152 2041.665,1152 2041.665,1152
        C 1976.434,789.00439808 1704.154687870208,512 1280,512
        C 855.8453121297921,512 583.566,789.00439808 518.335,1152
        C 518.335,1152 6.335,1152 6.335,1152
        C 70.835,505 573.07552021632,0 1280,0
      " />
      <path class="middle" d="
        M 1280,768
        C 1562.769791913472,768 1792,997.230208086528 1792,1280
        C 1792,1280 1792,1280 1792,1280
        C 1792,1562.769791913472 1562.769791913472,1792 1280,1792
        C 1280,1792 1280,1792 1280,1792
        C 997.230208086528,1792 768,1562.769791913472 768,1280
        C 768,1280 768,1280 768,1280
        C 768,997.230208086528 997.230208086528,768 1280,768
        C 1280,768 1280,768 1280,768
      " />
      <path class="bottom" d="
        M 1280,2048
        C 1704.154687870208,2048 1976.434,1770.99560192 2041.665,1408
        C 2041.665,1408 2553.665,1408 2553.665,1408
        C 2489.165,2055 1986.92447978368,2560 1280,2560
        C 573.07552021632,2560 70.835,2055 6.335,1408
        C 6.335,1408 518.335,1408 518.335,1408
        C 583.566,1770.99560192 855.8453121297921,2048 1280,2048
      " />
    </svg>
  </body>
</html>

{{1}}

CodePen（在Chrome中测试。）

Answer 1

我很确定这只是以下各项的组合：

形状弯曲的方式
正在使用线性插值
您选择使用贝塞尔曲线创建直线的方式（即控制点的选择）

您已选择将两个控制点设置为与曲线端点相同

C    ...      ...   1280,256 
C 2560,256 2560,256 2560,256

由于曲线是线性插值的，因此会导致一些曲线向外凸出，而某些向内凸出。取决于路径方向以及您是在曲线的内部还是外部。

通过以其他方式设置控制点，您将获得更好的结果。要么：

将控制点设置在直线的1/3和2/3点，或者
在每一端放置一个控制点。

在下面的示例中，我选择了第二种方法（因为在此方法更快捷，更容易）。效果会更好。

C    ...      ...   1280,256 
C 1280,256 2560,256 2560,256

svg {
  height: 150px;
  cursor: pointer;
}

svg path {
  transition: d 1s ease;
}

svg:hover .top {
  d: path('M 1280,256 C 1280,256 2560,256 2560,256 C 2560,256 2560,768 2560,768 C 2560,768 1280,768 1280,768 C 1280,768 0,768 0,768 C 0,768 0,256 0,256 C 0,256 1280,256 1280,256');
}

<svg viewBox="0 0 2560 2560">
  <path class="top" d="
        M 1280,0
        C 1986.92447978368,0 2489.165,505 2553.665,1152
        C 2553.665,1152 2041.665,1152 2041.665,1152
        C 1976.434,789.00439808 1704.154687870208,512 1280,512
        C 855.8453121297921,512 583.566,789.00439808 518.335,1152
        C 518.335,1152 6.335,1152 6.335,1152
        C 70.835,505 573.07552021632,0 1280,0
      " />
</svg>

PS。请注意，并非所有浏览器都支持d属性的CSS动画。现在只是基于Webkit的浏览器，例如Chrome。

奇数SVG三次贝塞尔曲线动画（曲线到点/线）

1 个答案: