用原生JS寫移動動畫案例及實際應用

時間 2019-12-05

標籤原生移動動畫案例實際應用欄目 JavaScript 简体版

原文原文鏈接

js很強大相信不少人都知道，那麼它有哪些強大之處呢？有興趣的人能夠去查查，這裏就不贅述了，由於不在本片文章討論的範圍。html

咱們要講的是怎麼用原生JS寫移動動畫？咱們先舉一個最簡單的動畫例子，不少網站的左邊或右邊會有個分享的框，鼠標放上去就還移出一個列表，裏面是要分享的地址。鼠標移開，就會移進去。函數

要實現這個效果要怎麼作呢？動畫

能夠想想，鼠標通過和鼠標離開很好理解用onmousemove事件和onmouseout事件就能完成。網站

那移動動畫呢？咱們能夠一步一步思考，spa

首先，一開始是這樣的code

完成移動完成後是這樣的（只是案例裏面的內容能夠本身隨便寫）htm

那麼怎麼樣作到一開始的樣子呢？咱們先用絕對定位，而後對left值寫負數。這樣就完成了初始。blog

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

而後怎麼讓他移動呢？在Flash中的動畫是由幀組成的，每幀移動一點就組成一幅完整連續的動畫。seo

同理，咱們知道在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 }