JS動畫效果

JavaScript 動畫框架 框架封裝

相信大家在很多門戶網站上都可以看到動畫的交互效果，通過這些動畫生動地體現了我們在網頁上的交互效果，現在我們就來學習一下這些動畫效果的分解動作吧。作為學習了網頁設計初步的一個進階選修課。

動畫的實現思路都是通過連續改變物體的屬性值來實現效果的。一般來說都是改變一個物體的left,right,width,height,opacity.

一.簡單動畫

1.透明度動畫
首先一點預備知識，下面是兩種瀏覽器的透明度的屬性表示，且都是表示0.3的透明度，1表示不透明。

IE瀏覽器透明度：filter: alpha(opacity:30);
Chrome瀏覽器透明度：opacity: 0.3;
一個簡單的Div透明度改變動畫實例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height:200px;
            background:red;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function () {
                var speed = iTarget > alpha ? 10 : -10;
                if (iTarget == alpha){
                    clearInterval(timer);
                }else {
                    alpha+=speed;
                    oDiv.style.filter ='alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }
            },30);
        }
        window.onload=function () {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover=function () {
                startMove(100);
            }
            oDiv.onmouseout = function () {
                startMove(30);
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>

2.速度動畫
速度動畫通過改變物體的坐標或者說距離他的父容器的左側和上面的距離來實現。比如先獲取一個div，在改變style中的left屬性。下面的例子就是一個鼠標移入整個div右滑動，鼠標移開恢復原狀。HTML樣式是上個例子的樣式，這里就不貼出了，一些細節的解釋在代碼中。

<script>
        window.onload=function () {
            //提取全局變量
            var timer = null;
            var div = document.getElementById('div1');

            function startMove(speed, target) {
                //定時器初始化
                clearInterval(timer);
                timer = setInterval(function () {
                    if (div.offsetLeft == target){
                        clearInterval(timer);
                    }else {
                        div.style.left = div.offsetLeft + speed;
                    }
                },30);
            }

            div.onmouseover = startMove(10,0);
            div.onmouseout = startMove(-10,-200);

        }
    </script>

二.緩存動畫

同樣是速度動畫的例子里的，現在我們改變一下讓他可以實現一個緩存的速度動畫，并且速度越來越快。

<script>
        var timer = null;
        function startMove(iTarget) {
            clearInterval(timer);
            var div = document.getElementById('div1');
            timer = setInterval(function () {
                var speed = (iTarget - div.offsetLeft)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(div.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    div.style.left = div.offsetLeft + speed + 'px';
                }
            },30);
        }
        window.onload = function () {
            var div = document.getElementById('div1');
            div.onmouseover=function () {
                startMove(0);
            }
            div.onmouseout=function () {
                startMove(-200);
            }
        }
    </script>

三.多物體動畫

多物體運動可以理解成多個單個物體的簡單運動（有點拗口啊），從程序執行的角度來說，就是遍歷設置每個物體的動畫。下面的例子都是上面的簡單動畫例子的集成而已。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
        }
    </style>
    <script>
        function startMove(obj, target) {
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                var speed = (target-obj.offsetWidth)/8;
                speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                if (obj.offsetWidth == target){
                    clearInterval(obj.timer);
                }else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30);
        }
        window.onload=function () {
            var aLi = document.getElementsByTagName('li');
            for (var i=0;i<aLi.length;i++){
                aLi[i].timer = null;
                aLi[i].onmouseover = function () {
                    startMove(this,400);
                }
                aLi[i].onmouseout = function () {
                    startMove(this,200);
                }
            }
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

四.鏈式動畫

首先把上面的簡單運動框架抽取出來然后加上透明度的變化，放進一個人通用的ＪＳ文件里movement.js：

function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj,false)[attr];
    }
}
function startMove(obj,attr,target,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var icur = 0 ;
        if (attr == 'opacity'){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else {
            icur =  parseInt(getStyle(obj,attr));
        }
        var speed = (target - icur)/8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (icur == target){
            clearInterval(obj.timer);
            if (fn){
                fn();
            }
        }else {
            if (attr == 'opacity'){
                obj.style.filter = 'alpha:(opacity;'+icur+speed+')';
                obj.style.opacity = (icur+speed)/100;
            }else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
    },30);

然后我們簡單的做一個長200px寬100px的透明度0.3黃色長方形先變長成400px然后寬長成200px，然后也是完全不透明（透明度1.0）的，鼠標移除再依次還原。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鏈式運動框架</title>
    <style>
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function () {
            var li = document.getElementById('li1');
            li.onmouseover=function () {
                startMove(li,'width',400,function () {
                    startMove(li,'height',200,function () {
                        startMove(li,'opacity',100);
                    })
                });
            }
            li.onmouseout=function () {
                startMove(li,'opacity',30,function () {
                    startMove(li,'height',100,function () {
                        startMove(li,'width',200);
                    })
                })
            }
        }
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>

五.同時運動

上面的框架都是單個運動動作，如果要實現同時運動，我們就需要借助json了。

JSON的格式：
｛鍵：值，鍵：值｝
完善后的運動框架js：movement.js

function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj,false)[attr];
    }
}
function startMove(obj,json,fn) {
    flag=true;
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        for (var attr in json){
            var icur = 0 ;
            if (attr == 'opacity'){
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else {
                icur =  parseInt(getStyle(obj,attr));
            }
            var speed = (json[attr] - icur)/8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (icur != json[attr]){
                flag = false;
            }
            if (attr == 'opacity'){
                obj.style.filter = 'alpha:(opacity;'+icur+speed+')';
                obj.style.opacity = (icur+speed)/100;
            }else {
                obj.style[attr] = icur + speed + 'px';
            }

            if (flag){
                clearInterval(obj.timer);
                if (fn){
                    fn();
                }
            }

        }
    },30);
}

然后把鏈式運動的代碼改成

startMove(li,{'width':400,'height':200,'opacity':100});

效果果然是可以同時運動的。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • JS速度動畫 JS透明度動畫 JS緩沖動畫 JS多物體動畫 JS透明度多物體動畫 獲取樣式屬性值 任意屬性值 任意...
    深沉的簡單閱讀 361評論 0贊 1
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5贊 13
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評論 25贊 708
  • 風陵渡口初相遇，一見楊過誤終身。
    美美的小胡閱讀 131評論 0贊 0