實現效果

動畫分解

1.燈光閃爍
2.文字出現
3.水流
4.心電圖

知識點

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

寫在前面

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

1.燈光閃爍

設置初始透明度為0

<style> #lightning{opacity:0; } </style> 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

<style> #text{opacity:0; } </style> 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的絕對值越大速度越快，負號代表方向。其他幾個水流也是相同的方法，這里涉及到不同水管的流動起始位置，數值需要算一下。
IE效果
這里對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;elsereturn 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更新~
未編輯完~

總結

以上是生活随笔為你收集整理的GreenSock (TweenMax) 动画案例(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。