创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2017年3月20日 周一

Ai绘制SVG矢量图CSS3做动画

全篇共 1873 字。按500字/分钟阅读,预计用时 3.7 分钟。总访问 972 次,日访问 3 次。

Ai 的全称是 Adobe Illustrator。就像 Ps 的全称是 Photoshop 一样。他们都是 Adobe 公司旗下优秀的图形图像创意产品。Ps 面向摄影师,Ai 面向矢量图形设计师。Ai 和前端的结合点在于 SVG。在 Ai 中制作的矢量图形能导出成 SVG 格式的文件。SVG 又能通过 CSS 控制其部分样式。CSS3 新增了 transform 属性和 keyframe 特性,所以 SVG 配合 CSS3 就能制作出有意思的动效出来。

准备开始

本教程由三部分组成:

  • 使用 Ai 绘制矢量图形。
  • 从 Ai 导出 SVG 格式文件。
  • 编写 CSS3 样式代码为 SVG 添加动画。

你需要准备一个代码编辑器。这里我使用的代码编辑器是 Sublime Text 3。你的电脑上还要安装最新版的 Adobe Illustrator CC 软件。从这个地址打开的页面中找到下载链接 Adobe apps download

下面我录制了很多小的 GIF 动图,用他们分步骤演示我绘制矢量图的过程。我尽量让每一个 GIF 动图仅包含一个主要的操作步骤,方便你查看每一步骤所使用的工具和最后产生的效果。

Adobe Illustrator 绘制矢量图

  • 使用矩形工具在画布上绘制一个矩形。
    使用矩形工具在 Ai 画布上绘制一个矩形

  • 使用钢笔工具,在矩形左侧边的中间添加一个锚地点。然后用直接选择工具微调该形状各个锚点,到合适的位置。后续还可以继续调整。
    使用钢笔工具,在矩形左侧边的中间添加一个锚地点

  • 再复制出来两个形状。继续微调。

  • 使用直接选择工具,将三个形状微调成下图中的样子,错落有致的。这样一只翅膀就做好了。

  • 使用选择工具,将一边的翅膀框选起来。复制出另一边的翅膀。右键菜单中找到水平翻转的指令。这样一对翅膀就做好了。

  • 继续绘制一个矩形出来,作为“身体”,可以用来显示信息。然后继续微调,用钢笔工具给他上下两边各加一个锚点,让他看起来更具科技感。

  • 使用椭圆工具在画布上绘制一个正圆形。

导出 SVG 格式

打开“资源导出”面板。使用选择工具把全部形状拖拽到“资源面板”内。设置导出格式为“SVG”。点击“导出”。选择要输出的目录位置。

Ai 导出 SVG 格式文件

CSS3 控制动画

打开 Sublime Text 3 代码编辑器,创建一个 HTML 文件。将导出的SVG文件以图片资源的形式到页面内。由于我刚才绘制的图形填充色为白色或白色渐变,所以需要把背景暂时设置为深色才能看到。

Illustrator直接导出的SVG文件是阅读不友好的,要想编辑就需要先把这些代码们格式化成便于我们阅读的,需要格式的代码不算多,就手工来喽。如果需要格式化的代码很多,可以选择在线格式化工具,很容易。

找到在最后绘制的那个正圆形,我们需要在这个正圆上添加动画。为类名为 .cls-8(这个是 Ai 自动添加的类名,也许会不同)的 circle 元素添加CSS动画。

.cls-8{
  animation: circle-scale 1s infinite linear;
  transform: scale(1, 0.5) translate(0px, 100px);
}
@keyframes circle-scale{
  0%{ opacity:0; r: 0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ opacity:0; r: 35; }
}

只有一个位置指示器略显单调,我们再来添加3个。噔噔噔噔!这就是最终的效果。这里我使用的红色,你可以调整成任何颜色。

:)记录下你此刻的想法~
来自笔友的留言
JavaScript核心
微信公众平台开发
翻译计划
Node.js实战
数据可视化
UI与动画
网站运维
生活趣味
帅华君的书单
效率脚手架
CSS样式经验之谈
硬件编程