Question

我正在尝试动画我的椭圆形图像以固定角度旋转，以便轮廓围绕一个区域旋转而不改变区域的形状。

我该怎么做？我可以只使用一个图像，还是需要一个椭圆形路径后的几个小图像？

这就是我所做的（jsfiddle），因为你可以看到该区域正在根据旋转改变形状

/media/admin/DATA/github/af-62/

Image for more clarity

Answer 1

我不是图形天才，但我很确定这不能用你拥有的东西来完成。如果你带走动画并检查PNG本身，你会注意到齿轮已经以固定的two-point perspective方式扭曲了 - 齿轮正在向我们的观察者“拉开”。

但是图像本身就是2D，无论你如何在SVG或CSS或Canvas中旋转它，齿轮都会以相同的方式伸展。

如果有解决方案，则会在动画中的关键点出现严重的图像变形，并且对光栅化图像执行变形将始终降低视觉保真度。

以下是一些替代方案：

有一个很好的旧待机：GIF动画的三维动画的齿轮执行一个完整的旋转。
您可以将3D动画切割成一系列2D帧，然后将它们粉碎成精灵表，然后使用JavaScript为其设置动画。
您可以使用Flash。
您可以尝试使用WebGL。

Answer 2

正如其他人所说，你的齿轮是以透视方式绘制的，所以你不能使用正常旋转并期望它看起来正确。

您需要做的是将SVG绘制为平面齿轮，然后您可以使用CSS 3D变换为旋转齿轮添加透视投影。

这是一个有效的例子：

svg
{
    margin: 100px;
    transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

<svg width="100" height="100" viewBox="0 0 100 100">
    <g stroke="black" fill="none" transform="translate(50,50)">
        <g>
            <circle r="38" stroke-width="8"/>
            <line x1="38" x2="49" stroke-width="16"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(45)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(90)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(135)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(180)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(225)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(270)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(315)"/>
            <animateTransform attributeType="xml" attributeName="transform"
                              type="rotate" from="0" to="360"
                              dur="4s" repeatCount="indefinite"/>
        </g>
    </g>
</svg>

旋转椭圆形SVG对象

2 个答案: