摘要：實(shí)現(xiàn)效果動(dòng)畫分解燈光閃爍文字出現(xiàn)水流心電圖知識(shí)點(diǎn)可盡情騷擾歐巴了解基本的知識(shí)點(diǎn)寫在前面寫過第一篇文章后動(dòng)畫案例一再回頭看發(fā)現(xiàn)代碼太多，根本沒耐心去看完。操作這里就不再贅述了，在動(dòng)畫案例一中有說到轉(zhuǎn)文件。四段水流都是這種方式來移動(dòng)。

1.燈光閃爍
2.文字出現(xiàn)
3.水流
4.心電圖

1.AI(可盡情騷擾UI歐巴)
2.SVG(了解基本的知識(shí)點(diǎn))
3.TweenMax(GreenSock)
4.CSS animation

寫過第一篇文章后GreenSock (TweenMax) 動(dòng)畫案例(一)再回頭看發(fā)現(xiàn)代碼太多，根本沒耐心去看完。所以每一個(gè)動(dòng)畫效果這次都盡量分開詳細(xì)的寫出來，看的時(shí)候不會(huì)太亂。涉及到的知識(shí)點(diǎn)和自己遇到的坑也盡量提出來，能夠讓大家不走彎路。AI操作這里就不再贅述了，在GreenSock (TweenMax) 動(dòng)畫案例(一)中有說到AI轉(zhuǎn)svg文件。這里先拋出一個(gè)問題，關(guān)于SVG animation運(yùn)動(dòng)，也就是路徑動(dòng)畫如何實(shí)現(xiàn)，以及如何兼容IE，可以看一下解決SVG animation 在IE中不起作用。

設(shè)置初始透明度為0

  var light = $("#lightning");
    function sceneOne() {
       var tl = new TimelineMax();
       //實(shí)現(xiàn)閃爍
        tl.to(light, 0.5, {
            opacity: 1,
            //閃電閃三次，這里repeat:2個(gè)人認(rèn)為var master = new TimelineMax({repeat: -1});
            //重復(fù)第一次的時(shí)候，tl.to(light, 0.5, { opacity: 1,repeat: 2,});里重復(fù)兩遍，共三遍 
            repeat: 2, //閃電閃三次
        });
        tl.to(light, 0.25, {opacity: 0});//閃爍消失
    
        
    }
    var master = new TimelineMax({repeat: -1});//重復(fù)整個(gè)場(chǎng)景動(dòng)畫
    master.add(sceneOne(), "scene1");

文字顯示在閃爍之后，所以直接添加到上文的tl.to(light, 0.25, {opacity: 0});//閃爍消失之后就可以了。初始狀態(tài)透明度為0

   tl.to(text, 2, {opacity: 1});//閃爍完成后顯示
   tl.to(text, 1, {opacity: 0});//隨即消失

這里有個(gè)問題研究了很久，就是透明度0->1->0的過程，使用tl.fromTo()(text, 2, {opacity: 1},{opacity: 0});畫面一進(jìn)入text就顯示,沒有在三秒后才顯示即使CSS設(shè)置了opacity:0。只能使用兩個(gè)to方法實(shí)現(xiàn)，希望能得到高手的幫助。

水流動(dòng)畫涉及到了CSS animation,水流動(dòng)的時(shí)候涉及到了四條路徑，我們先研究一條路徑，路徑包括兩個(gè)屬性，stroke-dasharray的值:223表示穿過水管的水的長度，1000表示盡量長的一段空白,stroke-dashoffset: 223;在這里表示水一開始的偏移量，animation就不在講解了， to{stroke-dashoffset: -1000; }動(dòng)畫移動(dòng)到的終點(diǎn)位置，就是讓整個(gè)水流向前進(jìn)了1000，這里的負(fù)號(hào)涉及到了水流的方向。四段水流都是這種方式來移動(dòng)。畫個(gè)圖就好設(shè)置參數(shù)了，畫了個(gè)慘不忍睹的圖來理一下思路。

，

 #path {
  stroke-dasharray: 223,1000;//路徑虛實(shí)顯示方式
  stroke-dashoffset: 223;  //初始偏移位置
  animation: dash 10s linear  5s  infinite; //執(zhí)行動(dòng)畫，后面的5s是延遲執(zhí)行，因?yàn)槭怯覀?cè)水管，所以要延遲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;
    }
}

其他三個(gè)水管也是相同的方法進(jìn)行設(shè)置，都設(shè)置完畢效果如下，路徑長度可以使用snap.svg-min.js的getTotalLength()方法獲取長度，完整代碼js部分有詳細(xì)的獲取方式。
完整效果
水流效果基本完成，這個(gè)效果沒辦法在IE里好好運(yùn)動(dòng)，是整個(gè)代碼的雞肋。接下來就是兼容IE所有版本了。
animateRoute(path, 457, -766, -1);
這里的參數(shù)457和-766是開始，結(jié)束位置的偏移量。這里為了讓他有延遲的效果，起始位置加了234，這個(gè)長度是左側(cè)水管流過來的距離，相應(yīng)的終點(diǎn)位置-1000+234=-766，-1的絕對(duì)值越大速度越快，負(fù)號(hào)代表方向。其他幾個(gè)水流也是相同的方法，這里涉及到不同水管的流動(dòng)起始位置，數(shù)值需要算一下。
IE效果
這里對(duì)svg代碼做了小的改動(dòng)。stroke-width="10"的值改成了6，讓動(dòng)畫能流暢顯示出來，到此水流的效果基本實(shí)現(xiàn)

 var path = document.querySelector("#path");
 animateRoute(path, 457, -766, -1);

/*
* ele  //路徑對(duì)象
* offset //初始偏移位置
* end    //結(jié)束位置
* speed  //速度(正負(fù)表示方向)
*/
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更新~
未編輯完~