JS動畫效果

JavaScript 動畫框架 框架封裝

相信大家在很多門戶網(wǎng)站上都可以看到動畫的交互效果，通過這些動畫生動地體現(xiàn)了我們在網(wǎng)頁上的交互效果，現(xiàn)在我們就來學(xué)習(xí)一下這些動畫效果的分解動作吧。作為學(xué)習(xí)了網(wǎng)頁設(shè)計(jì)初步的一個(gè)進(jìn)階選修課。

動畫的實(shí)現(xiàn)思路都是通過連續(xù)改變物體的屬性值來實(shí)現(xiàn)效果的。一般來說都是改變一個(gè)物體的left,right,width,height,opacity.

一.簡單動畫

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

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

<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.速度動畫
速度動畫通過改變物體的坐標(biāo)或者說距離他的父容器的左側(cè)和上面的距離來實(shí)現(xiàn)。比如先獲取一個(gè)div，在改變style中的left屬性。下面的例子就是一個(gè)鼠標(biāo)移入整個(gè)div右滑動，鼠標(biāo)移開恢復(fù)原狀。HTML樣式是上個(gè)例子的樣式，這里就不貼出了，一些細(xì)節(jié)的解釋在代碼中。

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

            function startMove(speed, target) {
                //定時(shí)器初始化
                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>

二.緩存動畫

同樣是速度動畫的例子里的，現(xiàn)在我們改變一下讓他可以實(shí)現(xiàn)一個(gè)緩存的速度動畫，并且速度越來越快。

<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>

三.多物體動畫

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

<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>

四.鏈?zhǔn)絼赢?/h4>

首先把上面的簡單運(yùn)動框架抽取出來然后加上透明度的變化，放進(jìn)一個(gè)人通用的ＪＳ文件里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);

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鏈?zhǔn)竭\(yùn)動框架</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>

五.同時(shí)運(yùn)動

上面的框架都是單個(gè)運(yùn)動動作，如果要實(shí)現(xiàn)同時(shí)運(yùn)動，我們就需要借助json了。

JSON的格式：
｛鍵：值，鍵：值｝
完善后的運(yùn)動框架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);
}

然后把鏈?zhǔn)竭\(yùn)動的代碼改成

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

效果果然是可以同時(shí)運(yùn)動的。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容