码迷,mamicode.com
首页 > 移动开发 > 详细

用原生JS写移动动画案例及实际应用

时间:2016-05-04 01:16:27      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:

js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围。

我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的左边或右边会有个分享的框,鼠标放上去就还移出一个列表,里面是要分享的地址。鼠标移开,就会移进去。

要实现这个效果要怎么做呢?

可以想一想,鼠标经过和鼠标离开很好理解 用onmousemove事件和onmouseout事件就能完成。

那移动动画呢?我们可以一步一步思考,

首先,一开始是这样的

技术分享

完成移动完成后是这样的(只是案例 里面的内容可以自己随便写)

技术分享

那么怎么样做到一开始的样子呢?我们先用绝对定位,然后对left值写负数。这样就完成了初始。

position: absolute;
            left: -200px;
            top: 0px;

然后怎么让他移动呢?在Flash中的动画是由帧组成的,每帧移动一点就组成一幅完整连续的动画。

同理,我们知道在JS中有 setInterval  它是每隔多少秒执行一次函数。setInterval (a,2000);每个2秒执行一次a函数。

然后我们每隔40毫秒向右移动10像素。这样看起来就是连续不断的移动了。

 window.onload=function(){
            var left_yd =document.getElementById("left_yidong");
            left_yd.onmousemove=function(){     //鼠标经过事件
                donghua(0,10,40); //(lefts为多少像素时停止,40为每40毫秒执行一次,10为每次移动10像素,控制速度)注意此处lefts的值为0
            }
            left_yd.onmouseout=function(){  //鼠标离开事件
                donghua(-200,-10,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
            }
        };
        //以下函数请勿随意改动,以免出现错误。
        var times=null;
        function donghua(lefts,speen,time){    //(lefts为多少像素时停止,每隔time毫秒执行一次用了控制速度)
            clearInterval(times);//停止times
            var left_yd =document.getElementById("left_yidong");
            times=setInterval(function(){

                if(left_yd.offsetLeft==lefts)
                {
                    clearInterval(times);
                }else {
                    left_yd.style.left=left_yd.offsetLeft+speen+‘px‘;
                }
            },time);
        }

这样的话动画就完成了,注意id名称改为自己的。

但是这样的动画是匀速的,我个人不是很喜欢,我想做一个运动速度越来越慢的动画怎么做?

很简单嘛,就是每次移动的像素的值减小 就是上面代码的speen的值

 1 window.onload=function(){
 2             var left_yd =document.getElementById("left_yidong");
 3             left_yd.onmousemove=function(){     //鼠标经过事件
 4                 donghua(0,40); //(lefts为多少像素时停止,40为每40毫秒执行一次,控制速度)注意此处lefts的值为0
 5             }
 6             left_yd.onmouseout=function(){  //鼠标离开事件
 7                 donghua(-200,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
 8             }
 9         };
10         //以下函数请勿随意改动,以免出现错误。
11         var times=null;
12         function donghua(lefts,time){    //(lefts为多少像素时停止,每隔time毫秒执行一次用了控制速度)
13             clearInterval(times);
14             var left_yd =document.getElementById("left_yidong");
15             times=setInterval(function(){
16                 var speen=(lefts-left_yd.offsetLeft)/20; //目标值减去当前值再除20,控制速度先快后慢
17                 speen=speen>0?Math.ceil(speen):Math.floor(speen);//speen的判断并向上或向下取整
18                 if(left_yd.offsetLeft==lefts)
19                 {
20                     clearInterval(times);
21                 }else {
22                     left_yd.style.left=left_yd.offsetLeft+speen+‘px‘;
23                 }
24             },time);
25         }

新加入第16,17行代码就完成了,第16行是用来改变speen的值的,而第17行是用来取整的 不然会出现小数,从而出现位置不正确的错误。

以一下是全部代码:(样式不好看,别介意)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #left_yidong{
 8             width: 200px;
 9             height: 500px;
10             background-color:#a6e1ec;
11             border-radius: 5px;
12             position: absolute;
13             left: -200px;
14             top: 0px;
15         }
16         #left_function{
17             width: 30px;
18             height: 50px;
19             background-color: #46b8da;
20             border-radius: 2px;
21             text-align: center;
22             line-height: 25px;
23             position: absolute;
24             left: 200px;
25             top: 200px;
26         }
27     </style>
28     <script>
29         window.onload=function(){
30             var left_yd =document.getElementById("left_yidong");
31             left_yd.onmousemove=function(){     //鼠标经过事件
32                 donghua(0,40); //(lefts为多少像素时停止,40为每40毫秒执行一次,控制速度)注意此处lefts的值为0
33             }
34             left_yd.onmouseout=function(){  //鼠标离开事件
35                 donghua(-200,40);//注意此处lefts的值为left_yidong盒子的left的值。此处为-200px
36             }
37         };
38         //以下函数请勿随意改动,以免出现错误。
39         var times=null;
40         function donghua(lefts,time){    //(lefts为多少像素时停止,每隔time毫秒执行一次用了控制速度)
41             clearInterval(times);
42             var left_yd =document.getElementById("left_yidong");
43             times=setInterval(function(){
44                 var speen=(lefts-left_yd.offsetLeft)/20;//目标值减去当前值再除20,控制速度先快后慢
45                 speen=speen>0?Math.ceil(speen):Math.floor(speen);//speen的判断并向上或向下取整
46                 if(left_yd.offsetLeft==lefts)
47                 {
48                     clearInterval(times);
49                 }else {
50                     left_yd.style.left=left_yd.offsetLeft+speen+‘px‘;
51                 }
52             },time);
53         }
54     </script>
55 </head>
56 <body>
57 <div id="left_yidong">
58     <p>在这里插入你想要的内容</p>
59     <p>在这里插入你想要的内容</p>
60     <p>在这里插入你想要的内容</p>
61     <p>在这里插入你想要的内容</p>
62     <p>在这里插入你想要的内容</p>
63     <div id="left_function">分享</div>
64 </div>
65 </body>
66 </html>

 

 

实际应用:

下面我们将上面的技术运用到实际案例中:

技术分享技术分享

一开始登录框在整个页面最上面,打开界面后登录框慢慢向下移除。就是把上面的从左到右改成从上到下。

 1 window.onload=function(){
 2         var onld =document.getElementById("onld");
 3         lod(70);
 4         var times=null;
 5         function lod(top){
 6             clearInterval(times);
 7             var onld =document.getElementById("onld");
 8             times=setInterval(function(){
 9                 var speen=(top-onld.offsetTop)/20;
10                 speen=speen>0?Math.ceil(speen):Math.floor(speen);
11                 if(onld.offsetTop==top)
12                 {
13                     clearInterval(times);
14                 }else {
15                     onld.style.top=onld.offsetTop+speen+‘px‘;
16                 }
17             },50)
18         }
19     }
20 }

在实际应用中我为了方便 就直接把时间写死在函数中了,因为在我这个项目中这个函数就只用到一次,不存在代码复用的问题,为了减少代码就直接写死在函数中了。

这个实际应用和上面的案例做的最重要的改动是将offsetLeft改成offsetTop。至于offsetLeft与offsetTop是什么意思看下面这张图就知道了。(此图来自百度知道)技术分享

 

如果有什么疑问或者建议或者漏洞及错误欢迎指正,与我联系。

                                                                        ——冷小包著

———————————————————————————————————————————————————————————————————————————————

转载请注明出处及作者。谢谢合作

                                                                        ——冷小包著

 

用原生JS写移动动画案例及实际应用

标签:

原文地址:http://www.cnblogs.com/lengxiaobao/p/5456996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!