速度版运动框架

最新推荐文章于 2021-06-28 21:16:35 发布

维克多噗噗

最新推荐文章于 2021-06-28 21:16:35 发布

阅读量415

点赞数

分类专栏：知识点文章标签：速度版运动框架

知识点专栏收录该内容

52 篇文章 0 订阅

订阅专栏

运动

位移 top left …
折叠 width height
淡入淡出 opacity

时间

setTimeout
setInterval
一般来说定时器都记得要清除让每一次动画都是一个全新的动画.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * { margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li { list-style: none;}
            body { font-family: "Microsoft yahei";}
            #box {width: 100px; height: 100px; background: lightgreen; opacity: 1; filter: alpha(opacity=100);position: absolute; top: 0; left: 0;}
        </style>
    </head>
<body>
    <div id="box"></div>
<script type="text/javascript">
    /*
        dom  改变的对象
        attr 改变的哪个值
        target 目的地
        speed   速度
        opacity
     */
    var boxDom = document.getElementById("box");
    boxDom.onmouseenter = function(){
        // move(this,"width",10,400);
        // move(this,"height",10,400);

        // 要初始属性值
        move(this,{'width':500,'height':500,'opacity':30},function(){
            move(this,{'width':50,'height':50,'opacity':100},function(){
                this.style.background = "lightblue";
            })
        }); //opacity 给整数比较运算
        // move(this,'width',400,10,function(a){
        //     move(a,"height",400,10); //this指向错误
        // });

    };
    /*
         问题1:不能同时改变其他值 ===>
                                    将定时器放里面---回调函数
         问题2:能不能把两行代码变成一行呢?
         问题3:速度不是target倍数的时候 跳过那个目标值
         //所以 不可以设定 speed值
     */
    function move(dom,json,callBack){
        clearInterval(dom.timer);
        dom.timer = setInterval(function(){
            var mark = true;
            for(var attr in json){
                var cur = undefined;
                if(attr == "opacity"){
                    cur = getStyle(dom,attr)*100;
                }else{
                    cur = parseInt(getStyle(dom,attr)) || 0;//IE
                }
                var target = json[attr];
                //自己设定速度 给一个摩擦系数
                var speed = (target-cur)*.2;//===cur越来越接近target. speed越小   ===>变大变小
                // if(speed>0)speed = Math.ceil((target-cur)*.2);//speed为整数,这样cur可以等于target
                // if(speed<0)speed = Math.floor((target-cur)*.2);//speed为整数,这样cur可以等于target
                speed = speed>0?Math.ceil((target-cur)*.2):Math.floor((target-cur)*.2);
                if(cur != target){
                    if(attr == "opacity"){
                        dom.style[attr] = (cur + speed)/100;//还原回去
                        dom.style.filter = "alpha(opacity="+(cur+speed)+")";//IE
                        //dom.style.filter = "alpha(opacity="+(cur+speed)+")";
                    }else{
                        dom.style[attr] = cur + speed + "px";
                    }
                    mark = false;
                }
                //if(attr=="opacity")console.log(speed+"===="+cur+"===="+(cur + speed));
            };
            if(mark){
                clearInterval(dom.timer);
                callBack&&callBack.call(dom);//
            };//如果要改变两个值,应该在循环完两个值都到目的地时在清除.
        },1000/30);

    };
    function getStyle(dom,attr){
        return dom.currentStyle?dom.currentStyle[attr]:getComputedStyle(dom)[attr];
    };
</script>
</body>
</html>

收缩==>move.js

function move(dom,json,callBack){
    clearInterval(dom.timer);
    dom.timer = setInterval(function(){
        var mark = true;
        for(var attr in json){
            var cur = null;
            if(attr == "opacity"){
                cur = getStyle(dom,attr)*100;
            }else{
                //ie
                cur = parseInt(getStyle(dom,attr)) || 0;
            }
            var target = json[attr];
            var speed = (target - cur)*.2;
            speed = speed>0?Math.ceil((target - cur)*.2):Math.floor((target - cur)*.2);
            if(cur != target){
                if(attr == "opacity"){
                    dom.style[attr] = (cur + speed)/100;
                    dom.style.filter = "alpha(opacity="+(cur+speed)+")";
                }else{
                    dom.style[attr] = cur + speed + 'px';
                }
                mark = false;
            }
        };
        if(mark){
            clearInterval(dom.timer);
            if(callBack)callBack.call(dom);
        }
    },1000/30);
};

function getStyle(dom,attr){
    return dom.currentStyle?dom.currentStyle[attr]:getComputedStyle(dom)[attr];
};

维克多噗噗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
速度版运动框架

运动位移 top left …折叠 width height淡入淡出 opacity时间setTimeoutsetInterval 一般来说定时器都记得要清除让每一次动画都是一个全新的动画. /* dom 改变的对象 attr 改变的哪个值 target 目的地 speed 速度
复制链接

扫一扫

专栏目录