今天尝试了一下用SVG制作动画
实现效果如下:
此主题相关图片
实际效果比这个流畅,关键的动画代码如下:
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0" dur="8s" repeatCount="indefinite" rotate="auto" / |
但对于动画的学习我决定到此为止,因为没有强大工具的支持(我在AI中没有找到),完全用代码去写动画那简直是恶梦,目前来说SVG的矢量动画只能是当作辅助,其动画能力应该还是不错的,但由于没有FLASH这种工具的支持,恐怕难以流行。
全部代码见附件:
此主题相关文件 161417.zip
基本图形的使用
圆,椭圆,方,长方,线,不规则图形,以及文字,大杂烩在一起使用一下: 代码也很简单:
关于路径的使用也很简单:
此主题相关图片 OK,SVG的代码还是挺好理解,挺好掌握的,但是但是,特别复杂的图形,如果都用代码手工写,那会吐血的,所以我们的目标就是了解,然后用AI去制作图形,手工去优化生成的代码。 随便用AI制作几个基本图形: 生成的代码15.3kb,用记事本打开也会发现很乱,不过有了上面的学习基础,我们来进行一下优化。 其关键代码也不过如下几行:
和手工写基本一样。 OK,接下来就要学习AI制作图表了,也是SVG的强项所在。 |