darkpoon 发表于 2019-2-21 07:02:45

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

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

  工具:

[*]  svgator(现为商业化的svg动画工具)
[*]  easyicon(图标的下载站点)
  结果:
  还是先看结果为好,看完就可以关贴了(滑稽)
http://s1.运维网.com/images/20180902/1535893800908167.gif
  制作过程:
http://s1.运维网.com/images/20180902/1535893864660010.png
http://s1.运维网.com/images/20180902/1535893876128689.png
  最后导出就好,这里是最简单的一个svg动画制作,用到了动画属性中的透明度变化,从而制造了一个个集装箱的堆积动画。


[*]  整理之前icon站点下载的docker图标,主要是为了能在 svgator中有明确的id区分,以及整体局部的这样一个分类好做局部动画,所以用了这样一个组标记来区分。目录如下:
[*]  设置动画时长,由于是想实现每一个集装箱的不断的装载,所以这里计算了集装箱的数量来做了一个时长为5秒。
[*]  设置关键帧(动画的状态转折点)每一秒都设置,特别要注意的是帧与帧之间的状态,这个可以看下我每一帧的每一个集装箱的状态,不过还是需自己动手才能体会到。



页: [1]
查看完整版本: 简单的 docker SVG 动画(无聊之作)