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

版权声明 » 自媒体人·陈帅华原创内容,转载请注明出处

巧用Illustrator与CSS3制作SVG动画

记得帅华君上初二那会儿,号称网页三剑客的Dreamweaver、Flash和Fireworks那是相当流行,而如今Adobe Flash更名为Adobe Animate,Fireworks也已风光不再,很少再有人用,Dreamweaver也是半死不活的僵持着,被更加轻便的代码编辑器,如:sublimeText、atom等蹂躏的体无完肤,不过作为Adobe粉龄10年的忠实铁粉,还是喜欢用他们家族的产品。使用率从到高低依次是Photoshop > Illustrator > After effects > Dreamweaver > Premiere > Animate。不管怎样,Adobe在数字创意领域的地位一时难以撼动,永远(❤ ω ❤),这次写一篇Illustrator的教程,致敬。

废话不多说,上图上教程。


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

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

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

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


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

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

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


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


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


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

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


MY GOD!!!

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

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

为类名为**.cls-8circle**元素添加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个。

噔噔噔…噔!!