javascript – 旋转椭圆形SVG对象

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

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

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

Image for more clarity

最佳答案

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

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

如果有解决方案,则会在动画中的关键点处涉及一些严重的图像变形,并且在光栅化图像上执行变形将始终降低视觉保真度.

以下是一些替代方案：

>有一个很好的旧待机：GIF动画的齿轮执行完整旋转的3D动画.
>您可以将3D动画切割成一系列2D帧,然后将它们粉碎成精灵表,然后使用JavaScript对其进行动画处理.
>你可以使用Flash.
>您可以尝试使用WebGL.

原文地址：https://www.jb51.cc/html/426157.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。