AI+SVG的继续学习
来源:互联网 发布:粒子群算法参数 编辑:程序博客网 时间:2024/05/01 05:45
今天尝试了一下用SVG制作动画
实现效果如下:
此主题相关图片
实际效果比这个流畅,关键的动画代码如下:
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" /
但对于动画的学习我决定到此为止,因为没有强大工具的支持(我在AI中没有找到),完全用代码去写动画那简直是恶梦,目前来说SVG的矢量动画只能是当作辅助,其动画能力应该还是不错的,但由于没有FLASH这种工具的支持,恐怕难以流行。
全部代码见附件:
此主题相关文件 161417.zip
基本图形的使用
圆,椭圆,方,长方,线,不规则图形,以及文字,大杂烩在一起使用一下:
此主题相关图片
代码也很简单:
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />
<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />
<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>
<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200
345,175 321,175" />
<rect x="0" y="0" width="600" height="400"
fill="none" stroke="red" stroke-width="3" />
<text x="10" y="300" font-size="40" fill="yellow" stroke="red">清风 Breeze</text>
关于路径的使用也很简单:
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
此主题相关图片
OK,SVG的代码还是挺好理解,挺好掌握的,但是但是,特别复杂的图形,如果都用代码手工写,那会吐血的,所以我们的目标就是了解,然后用AI去制作图形,手工去优化生成的代码。
随便用AI制作几个基本图形:
此主题相关图片
生成的代码15.3kb,用记事本打开也会发现很乱,不过有了上面的学习基础,我们来进行一下优化。
仔细看你会发现,只要删除<metadata></metadata>中的数据,那么这个svg文件与手写的就没有太大区别了。删除后的大小仅1.33kb
其关键代码也不过如下几行:
<rect x="17.362" y="0.5" fill="#FFFFFF" stroke="#000000" width="92.667" height="48.667"/>
<circle fill="#BFC9FF" stroke="#000000" cx="197.695" cy="54.833" r="49.667"/>
<line fill="none" stroke="#000000" x1="28.695" y1="143.167" x2="288.696" y2="143.167"/>
<text transform="matrix(0.8988 0 0 1 81.3618219.8857)"><tspan x="0" y="0" fill="#FF843F"font-family="'SimSun'" a:adobe-font-script="chineseSimplified"font-size="35">清风 Breeze</tspan></text>
<ellipse fill="#BFC9FF" stroke="#000000" cx="308.029" cy="77.5" rx="32" ry="69"/>
<polyline fill="#BFC9FF" stroke="#000000" points="0.029,80.5 46.029,77.833 60.695,117.167 "/>
和手工写基本一样。
OK,接下来就要学习AI制作图表了,也是SVG的强项所在。
实现效果如下:
此主题相关图片
实际效果比这个流畅,关键的动画代码如下:
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" /
但对于动画的学习我决定到此为止,因为没有强大工具的支持(我在AI中没有找到),完全用代码去写动画那简直是恶梦,目前来说SVG的矢量动画只能是当作辅助,其动画能力应该还是不错的,但由于没有FLASH这种工具的支持,恐怕难以流行。
全部代码见附件:
此主题相关文件 161417.zip
基本图形的使用
圆,椭圆,方,长方,线,不规则图形,以及文字,大杂烩在一起使用一下:
此主题相关图片
代码也很简单:
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />
<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />
<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>
<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200
345,175 321,175" />
<rect x="0" y="0" width="600" height="400"
fill="none" stroke="red" stroke-width="3" />
<text x="10" y="300" font-size="40" fill="yellow" stroke="red">清风 Breeze</text>
关于路径的使用也很简单:
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
此主题相关图片
OK,SVG的代码还是挺好理解,挺好掌握的,但是但是,特别复杂的图形,如果都用代码手工写,那会吐血的,所以我们的目标就是了解,然后用AI去制作图形,手工去优化生成的代码。
随便用AI制作几个基本图形:
此主题相关图片
生成的代码15.3kb,用记事本打开也会发现很乱,不过有了上面的学习基础,我们来进行一下优化。
仔细看你会发现,只要删除<metadata></metadata>中的数据,那么这个svg文件与手写的就没有太大区别了。删除后的大小仅1.33kb
其关键代码也不过如下几行:
<rect x="17.362" y="0.5" fill="#FFFFFF" stroke="#000000" width="92.667" height="48.667"/>
<circle fill="#BFC9FF" stroke="#000000" cx="197.695" cy="54.833" r="49.667"/>
<line fill="none" stroke="#000000" x1="28.695" y1="143.167" x2="288.696" y2="143.167"/>
<text transform="matrix(0.8988 0 0 1 81.3618219.8857)"><tspan x="0" y="0" fill="#FF843F"font-family="'SimSun'" a:adobe-font-script="chineseSimplified"font-size="35">清风 Breeze</tspan></text>
<ellipse fill="#BFC9FF" stroke="#000000" cx="308.029" cy="77.5" rx="32" ry="69"/>
<polyline fill="#BFC9FF" stroke="#000000" points="0.029,80.5 46.029,77.833 60.695,117.167 "/>
和手工写基本一样。
OK,接下来就要学习AI制作图表了,也是SVG的强项所在。
- AI+SVG的继续学习
- AI图标另存为SVG的方法
- svg动画的学习
- 基于PS和AI软件的PSB转AI再转SVG流程
- 继续Java的学习
- jsp的继续学习
- svg动画的学习相关
- SVG学习--VectorDrawable的使用
- 学习SVG
- svg学习
- SVG 学习
- AI学习的一篇转载
- 继续进阶的学习自律
- 继续进阶的学习自律
- 继续进阶的学习自律
- Validator控件的继续学习
- 继续线程的学习12.01
- JDBC的MYSQL继续学习
- 如何用非递规来做二叉树的后序遍历
- 简单Huffman编码
- 程序员 做军官还是做特种兵?
- 有关串口的一个调试错误,真是狂昏!!!
- “多态性”是C++最关键和核心的一个特性,“动态绑定技术”是C++编译器最重要的一个技术!欢迎C++高手进来指正我的粗浅理解
- AI+SVG的继续学习
- 请教:BCB与Matlab的联接问题
- So what are inner classes good for anyway?(翻译 by Gee)
- 两个新玩意
- sd/mm常用术语
- BusinessObjects安装配置简要说明
- Java中的“数据集”
- 成为有钱人的25种方法
- 写给刚接触Web Service的朋友