javascript – 旋转椭圆形SVG对象

前端之家收集整理的这篇文章主要介绍了javascript – 旋转椭圆形SVG对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

Image for more clarity

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

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

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

以下是一些替代方案:

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

原文链接:https://www.f2er.com/html/426157.html

猜你在找的HTML相关文章