javascript – 旋转椭圆形SVG对象

发布时间：2020-12-14 22:56:44 所属栏目：资源来源：网络整理

导读：我试图动画我的椭圆形图像以固定角度旋转,以便轮廓围绕一个区域旋转而不改变区域的形状. 我怎么做？我可以只使用一个图像,还是需要一个椭圆形路径后的几个小图像？这就是我所做的(jsfiddle),因为你可以看到该区域正在根据旋转改变形状 Image for more clari

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

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

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

Image for more clarity


最佳答案
我不是一个图形天才,但我很确定这不能用你拥有的东西来完成.如果你带走动画并检查PNG本身,你会注意到齿轮已经以固定的two-point perspective方式扭曲了 – 齿轮正在向我们的观察者“拉开”.
但是图像本身就是2D,无论你如何在SVG或CSS或Canvas中旋转它,齿轮都会以相同的方式伸展.
如果有解决方案,则会在动画中的关键点处涉及一些严重的图像变形,并且在光栅化图像上执行变形将始终降低视觉保真度.
以下是一些替代方案：
>有一个很好的旧待机：GIF动画的齿轮执行完整旋转的3D动画.
>您可以将3D动画切割成一系列2D帧,然后将它们粉碎成精灵表,然后使用JavaScript对其进行动画处理.
>你可以使用Flash.
>您可以尝试使用WebGL.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!