動畫函數封裝

時間  2019-11-21
標籤 動畫 函數 封裝 欄目 軟件設計 简体版
原文   原文鏈接

1、動畫函數第一版：左右勻速移動目標距離

<script>
        //封裝移動元素函數:任意一個元素(element)左右勻速移動目標距離(target)
        function animate(element,target){
            //先清理定時器
            clearInterval(element.timeId);
            element.timeId=setInterval(function(){
                //獲取div的當前位置--數字類型,沒有px
                var current=element.offsetLeft;
                //div每次移動多少像素
                var step=10;
                //判斷當前位置和目標位置的大小
                step=current<target?step:-step;
                //每次移動後的距離
                current+=step;
                //判斷當前移動後的位置是否到達目標位置
                if(Math.abs(target-current)>Math.abs(step)){
                    //目標位置和當前位置的距離大於步數,繼續移動
                    element.style.left=current+"px";
                }else{
                    //目標位置和當前位置的距離大於步數,清除定時器
                    clearInterval(element.timeId);
                    //目標位置和當前位置的距離大於步數,直接移動到目標位置
                    element.style.left=target+"px";
                }
            },20);
        }
    </script>
    <!-- 測試 -->
    <input type="button" value="移動400" id="btn1">
    <input type="button" value="移動800" id="btn2">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
    <script>
        document.getElementById("btn1").onclick=function(){
            animate(document.getElementById("dv"),400);
        };
        document.getElementById("btn2").onclick=function(){
            animate(document.getElementById("dv"),800);
        };
    </script>

2、動畫函數升級：左右緩動效果移動目標距離

<script>
    //封裝移動元素函數:任意一個元素(element)左右緩動效果移動目標距離(target)
    function animate(element,target){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var current=element.offsetLeft;
            //利用這個能夠製造緩動效果
            var step=(target-current)/10;
            //判斷步數是否大於0,便是往左移動仍是往右移動,大於0必須向上取整,否則永遠到達不了目標值
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            element.style.left=current+"px";
            if(current==target){
                clearInterval(element.timeId);
            }
            //測試代碼
            console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
        },20)
    }
    </script>
    <!-- 測試 -->
    <input type="button" value="移動400" id="btn1">
    <input type="button" value="移動800" id="btn2">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
    <script>
        document.getElementById("btn1").onclick=function(){
            animate(document.getElementById("dv"),400);
        };
        document.getElementById("btn2").onclick=function(){
            animate(document.getElementById("dv"),800);
        };
    </script>

3、如何獲取獲取任意一個元素的任意一個樣式屬性的值

<script>
    //獲取任意一個元素的任意一個樣式屬性的值----->封裝函數
    //參數element------->元素
    //參數attr------>元素的某個屬性
    //注意:1.判斷是否支持某屬性,直接window.getComputedStyle?不用(),不支持返回的是undefined,即false
    //注意:2.訪問對象屬性的方法點語法或者中括號,此處用中括號["屬性"]
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    </script>
   <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
   <script>
    //緣由,若是在style裏面有個left屬性值(沒有設置position的狀況下),利用offset是0,獲取不到這個值
    //因此可使用下面兩個屬性:(支持不同的瀏覽器)
    //1.getComputedStyle(element,null),返回一個對象
    var dv=document.getElementById("dv");
    console.log(window.getComputedStyle(dv,null));
    //2.element.currentStyle,返回一個對象
    console.log(dv.currentStyle);
   </script>

4、動畫函數升級：增長一個任意的屬性

<script>
    //封裝動畫函數:增長一個任意的屬性----添加參數attr
    //參數element------->元素
    //參數attr------->屬性(用雙引號)
    //參數target------->目標值
    function animate(element,attr,target){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            //獲取一個元素的任意屬性,必須裝換爲整數,並且是parseInt()方法
            var current=parseInt(getStyle(element,attr));
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            //把current賦值給這個元素的值
            element.style[attr]=current+"px";
            if(current==target){
                clearInterval(element.timeId);
            }
            //測試代碼:
            console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
        },20)
    }
    //獲取一個元素的任意屬性的封裝函數
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    </script>
    <input type="button" value="動畫" id="btn">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),"width",500)
        };
    </script>

5、動畫函數升級：增長多個任意的屬性

<script>
    //封裝動畫函數:增長多個任意的屬性----使用json對象
    function animate(element,json){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            //遍歷json對象
            for(var attr in json){
                //獲取元素這個屬性當前的值
                var current=parseInt(getStyle(element,attr));
                //當前的屬性對應的目標值
                var target=json[attr];
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current+"px";
            }
            //判斷是否所有達到目標,達到目標則清除定時器等於current==target
            if(current==target){
                clearInterval(element.timeId);
            }
            //測試代碼
            console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.current[attr]; 
    }
    </script>
    <!-- 測試 -->
    <input type="button" value="動畫" id="btn">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"width":200,"height":200,"top":100,"left":100});
        };
    </script>

6、動畫函數升級：增長回調函數

<script>
    //封裝動畫函數:增長回調函數----fn參數
    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            for(var attr in json){
                var current=parseInt(getStyle(element,attr));
                var target=json[attr];
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current+"px";
                if(current==target){
                    clearInterval(element.timeId);
                    //前提,全部的屬性都到達目標位置才能使用這個函數
                    if(fn){
                        fn();
                    }
                }
                //測試代碼
                console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
            }
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
    }
    </script>
    <!-- 測試 -->
    <input type="button" value="動畫" id="btn">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"top":100,"left":100},function(){
                animate(document.getElementById("dv"),{"width":200,"height":200,})
            });
        };
    </script>

7、動畫函數升級最終版：增長層級和透明度

<script>
    //封裝動畫函數:增長層級和透明度-------json對象能夠傳入z-index和opacity
    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            for(var attr in json){
                //判斷attr這個屬性
                if(attr=="opacity"){//是opacity
                    //獲取當前屬性的透明度,而且放大100倍
                    var current=getStyle(element,attr)*100
                    //目標的透明度放大100倍
                    var target=json[attr]*100
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current+=step;
                    //變化後的透明度再縮小100倍
                    element.style[attr]=current/100;
                }else if(attr=="zIndex"){//是zIndex
                    element.style[attr]=json[attr];
                }else{//普通的屬性
                    var current=parseInt(getStyle(element,attr));
                    var target=json[attr];
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current+=step;
                    element.style[attr]=current+"px";
                }
                if(current==target){
                    clearInterval(element.timeId);
                    if(fn){
                        fn();
                    }
                }
                //測試代碼
                console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
            }
        },20)
    }
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
    }
    </script>
    <input type="button" value="動畫" id="btn">
    <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            animate(document.getElementById("dv"),{"top":100,"left":100},function(){
                animate(document.getElementById("dv"),{"width":200,"height":200,},function(){
                    animate(document.getElementById("dv"),{"opacity":0.2},function(){
                        animate(document.getElementById("dv"),{"top":0,"left":0,"opacity":1,"zIndex":-1})
                    })
                });
            });
        };
    </script>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程