实现效果
动画分解
1.灯光闪烁
2.文字出现3.水流4.心电图知识点
1.AI(可尽情骚扰UI欧巴)
2.SVG(了解基本的知识点)3.TweenMax(GreenSock)4.CSS animation写在前面
写过第一篇文章后再回头看发现代码太多，根本没耐心去看完。所以每一个动画效果这次都尽量分开详细的写出来，看的时候不会太乱。涉及到的知识点和自己遇到的坑也尽量提出来，能够让大家不走弯路。AI操作这里就不再赘述了，在中有说到AI转svg文件。这里先抛出一个问题，关于SVG animation运动，也就是路径动画如何实现，以及如何兼容IE，可以看一下。
1.灯光闪烁
设置初始透明度为0
var light = $("#lightning"); function sceneOne() { var tl = new TimelineMax(); //实现闪烁 tl.to(light, 0.5, { opacity: 1, //闪电闪三次，这里repeat:2个人认为var master = new TimelineMax({repeat: -1}); //重复第一次的时候，tl.to(light, 0.5, { opacity: 1,repeat: 2,});里重复两遍，共三遍 repeat: 2, //闪电闪三次 }); tl.to(light, 0.25, {opacity: 0});//闪烁消失 } var master = new TimelineMax({repeat: -1});//重复整个场景动画 master.add(sceneOne(), "scene1"); 2.文字出现
文字显示在闪烁之后，所以直接添加到上文的tl.to(light, 0.25, {opacity: 0});//闪烁消失之后就可以了。初始状态透明度为0
tl.to(text, 2, {opacity: 1});//闪烁完成后显示 tl.to(text, 1, {opacity: 0});//随即消失 这里有个问题研究了很久，就是透明度0->1->0的过程，使用tl.fromTo()(text, 2, {opacity: 1},{opacity: 0});画面一进入text就显示,没有在三秒后才显示即使CSS设置了opacity:0。只能使用两个to方法实现，希望能得到高手的帮助。
3.水流
水流动画涉及到了CSS animation,水流动的时候涉及到了四条路径，我们先研究一条路径，路径包括两个属性，stroke-dasharray的值:223表示穿过水管的水的长度，1000表示尽量长的一段空白,stroke-dashoffset: 223;在这里表示水一开始的偏移量，animation就不在讲解了， to{stroke-dashoffset: -1000; }动画移动到的终点位置，就是让整个水流向前进了1000，这里的负号涉及到了水流的方向。四段水流都是这种方式来移动。画个图就好设置参数了，画了个惨不忍睹的图来理一下思路。
，
#path { stroke-dasharray: 223,1000;//路径虚实显示方式 stroke-dashoffset: 223; //初始偏移位置 animation: dash 10s linear 5s infinite; //执行动画，后面的5s是延迟执行，因为是右侧水管，所以要延迟5s } @keyframes dash { to{ stroke-dashoffset: -1000; }} 兼容其他浏览器代码
svg #path { stroke-dasharray: 223, 1000; stroke-dashoffset: 223; animation: dash 10s linear 5s infinite; -moz-animation: dash 10s linear 5s infinite; -webkit-animation: dash 10s linear 5s infinite;}@keyframes dash { to { stroke-dashoffset: -1000; }}@-moz-keyframes dash { to { stroke-dashoffset: -1000; }}@-webkit-keyframes dash { to { stroke-dashoffset: -1000; }}@-o-keyframes dash { to { stroke-dashoffset: -1000; }} 其他三个水管也是相同的方法进行设置，都设置完毕效果如下，路径长度可以使用snap.svg-min.js的getTotalLength()方法获取长度，完整代码js部分有详细的获取方式。
水流效果基本完成，这个效果没办法在IE里好好运动，是整个代码的鸡肋。接下来就是兼容IE所有版本了。 animateRoute(path, 457, -766, -1);这里的参数457和-766是开始，结束位置的偏移量。这里为了让他有延迟的效果，起始位置加了234，这个长度是左侧水管流过来的距离，相应的终点位置-1000+234=-766，-1的绝对值越大速度越快，负号代表方向。其他几个水流也是相同的方法，这里涉及到不同水管的流动起始位置，数值需要算一下。这里对svg代码做了小的改动。stroke-width="10"的值改成了6，让动画能流畅显示出来，到此水流的效果基本实现var path = document.querySelector('#path'); animateRoute(path, 457, -766, -1);/** ele //路径对象* offset //初始偏移位置* end //结束位置* speed //速度(正负表示方向)*/function animateRoute(ele, offset, end, speed) { if (!isIE())return; var _offset = offset; var offsetMe = function () { if (speed < 0) { if (offset < end) offset = _offset; } else { if (offset > end) offset = _offset; } ele.style.strokeDashoffset = offset; offset = offset + speed; requestAnimationFrame(offsetMe); } offsetMe();}function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false;} var path = document.querySelector('#path'); var path1 = document.querySelector('#path1'); var path2 = document.querySelector('#path2'); var path3 = document.querySelector('#path3'); animateRoute(path, 457, -766, -1); animateRoute(path1, 457, -766, -1); animateRoute(path2, -234, 1000, 1); animateRoute(path3, -234, 1000, 1); 2017.09.07更新~
未编辑完~