发布日期 » 2017年9月1日 星期五

版权声明 » 帅华君原创文章,未经允许不得转载。

巧用Illustrator与CSS3制作SVG动画

  1. 绘制一个翅膀
    使用矩形工具绘制一个矩形,然后使用钢笔工具在矩形的左侧添加一个锚点,之后使用直接选择工具选中刚刚添加的锚点并向左移动适当距离。

  2. 复制更多
    使用选择工具,选中绘制的第一个翅膀,按住alt键拖拽翅膀便可以复制一个翅膀的形状,一共从上到下复制三个。

  3. 微调大小
    使用钢笔工具或者直接选择工具微微调整翅膀宽度,大致呈现从上到下依次变短的趋势。

  4. 考虑另一边
    一侧的三根翅膀调整好之后,使用选择工具将其全选,使用alt+RMB拖拽如法炮制复制出来另一边的三根翅膀,之后右键快捷键选择变换->对称->垂直,点击确定,即可将形状水平翻转(没错就是水平翻转,垂直指的是垂直轴线镜像翻转,其实就是二维平面水平方向上的反转。)

  1. 绘制主体
    使用矩形工具如下图绘制矩形,微调其形状。

  2. 增加细节
    为了增加更多细节,我是用钢笔工具在矩形的上下变中心点各添加了一个锚点,并微调出一个合适的尖角。

  3. 一直微调
    继续调整整个造型。设计就是永远在调整,尝试你能想到的各种情况,没有最好只有更好。

  1. 指示器
    继续增加细节,在翅膀的底部增加一个位置指示器,稍后的动画主要在这个指示器上产生,所以我只需要绘制一个圆形,剩余的在代码中复制编辑即可。

  1. 资源导出
    CC 2017新版的Ai有资源导出功能,只需将需要导出的形状拖拽到待导出列表内,我选择导出类型为SVG,点击导出按钮,选择导出目录,即可一键导出。

我是用sublimeText新建一个HTML文档,并将刚刚导出的SVG文件以图片资源的形式链接到页面内。

由于我刚才绘制的图形填充色为白色或白色渐变,所以需要把背景暂时设置为深色才能看到。

Illustrator直接导出的SVG文件是阅读不友好的,要想编辑就需要先把这些代码们格式化,需要格式的代码不算多,就手工来喽。

最后找到了那个圆形,我们需要在这个圆形上添加动画。

为类名为.cls-8的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个。

噔噔噔…噔!!

本篇完。