这个动画是什么以及如何创建它？

Question

我访问了lofavor网站，我看到了一个非常可爱的动画。谁能告诉我这个动画是什么？很明显它不是flash或JavaScript动画。元素是SVG。但是如何使用SVG创建类似的动画呢？

这是一个比简单的旋转，翻译或缩放更复杂的动画。请给我任何提示或关键字进行研究。我是否必须对所有转换进行编码，或者是否有任何WYSIWYG方法来执行此操作？

Answer 1

这是SVG Transform动画，是的，你必须编码它。有关详细信息，请查看SVG Transform。

如果你检查我认为你做过的DOM元素，你会看到g元素带有transform属性，矩阵定义了Rotation，Translation或Scale。

这条红丝带还有一种遮盖技术，它首先会滚动。使用SVG的良好开端是SVG Essential本书。