动态水管流动监测流量分享

刚刚接到这个设计图的时候我脑子里想着，是不是要什么d3.js还是three.js做呢？我脑子里一片的混乱，在网上搜索了一波后，心里更加的慌，因为没有人做这样的案例，有的也是要收费。后面看到有一个类似于这个的叫gojs，然后就将就着用。然后自己就按着gojs写了一下。然后就做成了

然后这个开发的时候发现就有水印，还要去百度搜索了一下，确实要改源码里的某一行代码才行，但是这个东西和设计的差距很大，真的当时就已经尽力了。然后这东西的每一条线的颜色就是一个动画，也就是说每一条线的颜色就是一个定时动画，如果要做水不流动的话就要清除相应的定时，当时如果这样做的话，也考虑到这性能肯定不好，因为同时开启多个定时器在页面上是很不好的，可能会影响到页面的崩溃之类的，但是项目又比较紧急，没办法！

做这个有一个多月后，老板看了就极为不满意。唉，一切都以老板为主，谁叫我们是个打工的呢。然后就要修改咯，最后就用svg里的动画就可以了，后面我又想了一下，这动画应该封装一下，不能老开那么多的定时器，刚刚开始我是以水管为背景图，然后颜色上的就以每个div传过来的值做，至于水流停止的话我就用透明度把它弄为0，也就是看不见。虽然这个做是大部分是可以的，有几个管子就是隐藏不掉，找了大半天也不知道是什么原因。很无奈，改方案为display:none就可以了！