[JavaScript] [原创]  使用Enlivenem 制作网站SVG动态LOGO SVG图标 SVG动画

Enlivenem 是Enliven 和 Them 的合体,意思是使它们动起来,他们当然就是指LOGO了。

官网中就布满了大量的动态SVG图标。

使用这个插件,可以制作动态的LOGO,让网站一下子变得高大上,动画是由JS来完成的,并不是使用SVG自带的动画。

不只是LOGO,所有SVG都可以动起来。

另外一点,SVG是矢量图,可以无限放大而不会失真,这也是用来制作LOGO的原因之一。


1、首先下载文末的三个压缩包,第一个包含了jQuery库和Enlivenem动画引擎。第二个是离线的动画编辑器。第三个则是文档


2、制作一个SVG的图标(SVG的制作不在本文讨论范围内),常用软件有AI。导出的时候勾选响应以便在后面的动画制作中图标能铺满编辑器。


3、复制SVG文件中的代码,打开动画编辑器(animator.html),粘贴并点击Proceed。来到编辑动画的界面


4、编辑器右边列出了SVG中的所有组成部分,可以看到,这个SVG全是由<path>组成的。点选其中一个<path>,就可以在上方工具栏选择动画类型,方向,延迟和持续时间和过渡类型。如下图。


5、选择完后,点击  可播放当前部分的动画,点击  播放所有动画。利用复制粘贴功能可以快速设置相同的动画, 复制,粘贴。给每个部分设置适当的延迟可以让动画依次播放而不是同时播放。其它的功能就不作介绍了。


6、最后点击上方导航栏Result即可得到加入动画的SVG代码,将其保存为SVG文件。


7、这时候直接用<img>标签显示SVG图标,还没有动画效果,需要引入动画引擎。在网页头部引入jquery.jsenlivenem.min.jssnap.svg-min.jsenlivenem.css,代码如下(路径请自行修改):

HTML

<link href="css/enlivenem.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/snap/snap.svg-min.js"></script>
<script src="js/enlivenem.min.js"></script>


8、在原本LOGO的地方,<img>标签引用改为做好的SVG,再加上类enlivenem,这样引擎就会自动在网页加载完成后自动播放动画。要是不能加类,也可以通过脚本的方式播放动画:

JavaScript

$( '#logo' ).enlivenEm( callback );


9、注意LOGO需要指定宽度。

10、更详细的参数及使用方法可以参考文档。


官网:http://enlivenem.com/


附件:

enlivenem-engine.zip

enlivenem-animator.zip

enlivenem-documentation.zip

发表您的留言