实现效果动画分解1.灯光闪烁2.文字出现3.水流4.心电图知识点1.AI（想骚扰UI欧巴就随便骚扰）2.SVG（知道基础知识点）3.TweenMax（GreenSock）4.CSS动画在第一篇之前写过GreenSock（TweenMax）动画案例（一）回头一看，发现代码太多，没写请耐心阅读它们。所以这次尽量把每个动画效果都写的很详细，看的时候不会太乱。涉及到的知识点和我遇到的坑也尽量提到，让大家少走弯路。关于AI操作这里就不细说了。GreenSock（TweenMax）动画案例（一）中提到AI转svg文件。这里先提一个问题，关于SVG动画的移动，也就是路径动画怎么实现，怎么兼容IE，可以看看SVG动画在IE中不起作用的解决方法。1.设置灯光闪烁的初始不透明度为0varlight=$("#lightning");functionsceneOne(){vartl=newTimelineMax();//实现闪烁tl.to(light,0.5,{opacity:1,//闪电闪烁3次，这里repeat:2人认为varmaster=newTimelineMax({repeat:-1});//重复的时候为第一次，tl.to(light,0.5,{opacity:1,repeat:2,});重复两次，共三次repeat:2,//闪电闪烁三次});tl.to(light,0.25,{opacity:0});//闪烁消失}varmaster=newTimelineMax({repeat:-1});//重复整个场景的动画master.add(sceneOne()，“场景1”）;2。文字出现在Afterflickering，所以直接在上面加上tl.to(light,0.25,{opacity:0});//闪烁消失后就好了。初始状态透明度为0tl.to(text,2,{opacity:1});//显示tl.to(text,1,{opacity:0});//立即消失这里有个问题研究了很久，就是透明度0->1->0的过程，使用tl.fromTo()(text,2,{opacity:1},{不透明度:0});一输入文字就显示，三秒后不显示，即使CSS设置opacity:0，只能用两个to方法实现，希望得到帮助来自专家。3.水流水流动画涉及到CSS动画。水流之时，涉及四路。让我们先研究一条路径。该路径包括两个属性。stroke-dasharray:223的值表示水通过水管的长度，1000表示尽可能多的尝试一个长的空白，str??oke-dashoffset:223；这里表示一开始水的偏移量，动画这里就不解释了，to{stroke-dashoffset:-1000;}动画的结束位置是让整个水流向前1000，这里的负号跟水流的方向有关。四段水流都是这样运动的。随便画个图设置参数，画个恐怖图梳理一下思路。,#path{stroke-dasharray:223,1000;//虚实路径显示方式stroke-dashoffset:223;//初始偏移位置动画：dash10slinear5sinfinite;//执行动画，接下来的5s是延时执行，因为是右边的水管，需要延时5s}@keyframesdash{to{stroke-dashoffset:-1000;}}兼容其他浏览器代码svg#path{stroke-dasharray:223,1000;笔画偏移量：223；动画：破折号10s线性5s无限；-moz-动画：破折号10s线性5s无限；-webkit-animation:dash10slinear5sinfinite;}@keyframesdash{to{stroke-dashoffset:-1000;}}@-moz-keyframesdash{to{stroke-dashoffset:-1000;}}@-webkit-keyframesdash{to{stroke-dashoffset:-1000;}}@-o-keyframesdash{to{stroke-dashoffset:-1000;}}other三个水管也用同样的方法设置，设置后的效果如下。路径长度可以通过snap.svg-min.js的getTotalLength()方法获取。完整代码的js部分有详细的获取方法。完成效果水流效果基本完成。这个效果在IE中无法很好的发挥，是整个代码的薄弱环节。下一步是兼容所有版本的IE。动画路线（路径，457，-766，-1）；这里的参数457和-766是起始位置和结束位置的偏移量。这里为了让他有延时效果，在起始位置加了234。这个长度就是左边水管的距离。对应的结束位置为-1000+234=-766。-1的绝对值越大，速度越快。减号代表方向。相同的方法用于其他水流。这涉及到不同水管的流量起始位置，需要计算数值。IE效果这里对svg代码做了一个小改动。stroke-width="10"的值改为6，这样就可以流畅的显示动画了，基本实现了水流的效果varpath=document.querySelector('#path');animateRoute(path,457,-766,-1);/**ele//Route对象*offset//初始偏移位置*end//结束位置*speed//速度（正负表示方向）*/functionanimateRoute(ele,offset,end,speed){if(!isIE())return;var_offset=偏移量；varoffsetMe=function(){if(speed<0){if(offset
