简单的 docker SVG 动画(无聊之作)

最近有点心血来潮,想做一个关于docker的一个中间层,以便更好的实现热部署以及docker容器的周期监控,当然本章不是这个内容,只是因为这个而做的一个小的加载动画。                                                                   

工具:

  1. svgator(现为商业化的svg动画工具)

  2. easyicon(图标的下载站点) 

结果:

      还是先看结果为好,看完就可以关贴了(滑稽)

20180804235202156.gif

制作过程:

20180805113916152.png

20180805132934653.png

 最后导出就好,这里是最简单的一个svg动画制作,用到了动画属性中的透明度变化,从而制造了一个个集装箱的堆积动画。

  1. 整理之前icon站点下载的docker图标,主要是为了能在 svgator中有明确的id区分,以及整体局部的这样一个分类好做局部动画,所以用了<g></g>这样一个组标记来区分。目录如下:

  2. 设置动画时长,由于是想实现每一个集装箱的不断的装载,所以这里计算了集装箱的数量来做了一个时长为5秒。

  3. 设置关键帧(动画的状态转折点)每一秒都设置,特别要注意的是帧与帧之间的状态,这个可以看下我每一帧的每一个集装箱的状态,不过还是需自己动手才能体会到。


猜你喜欢

转载自blog.51cto.com/13950217/2169179
今日推荐