6

实现效果

clipboard.png

动画分解

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,这里的负号涉及到了水流的方向。四段水流都是这种方式来移动。画个图就好设置参数了,画了个惨不忍睹的图来理一下思路。

clipboard.png

 #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;
    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更新~
未编辑完~
获取更多技术相关文章,关注公众号”前端女塾“。
回复加群,即可加入”前端仙女群“
qrcode_for_gh_9a5f66169516_258.jpg


程序媛花花
1.7k 声望172 粉丝

玩的转前端,搞的定产品,骑车能上三十五,努力跑个马拉松