运动框架

最新推荐文章于 2024-06-21 10:23:19 发布

chengweng2602

最新推荐文章于 2024-06-21 10:23:19 发布

阅读量78

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/3147332/blog/807110

版权

运动框架演变过程

startMove(iTarget) 运动框架

startMove(obj, iTarget) 多物体

startMove(obj, attr, iTarget) 任意值

startMove(obj, attr, iTarget, fn) 链式运动

startMove(obj, json) 多值运动

startMove(obj, json, fn) 完美运动框架

运动框架

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
    * {margin: 0;padding: 0;}
    #test{width:100px;height:100px;background:red;position:absolute;}
    </style>
    <script>
    window.onload = function() {
        
        var oDiv1=document.getElementById('test');
        oDiv1.onclick=function(){
            this.timer=null;
            clearInterval(this.timer)
            this.timer=setInterval(function(){
                if(oDiv1.offsetLeft==300){
                    clearInterval(this.timer)
                }else{
                    oDiv1.style.left=oDiv1.offsetLeft+5+"px";
                }
            },30)
            
        }

    }
    </script>
</head>

<body>
    <div id="test"></div>
</body>

</html>

缓冲运动

　　　　function startMove(obj,target){
            clearInterval(obj.timer)
            obj.timer=setInterval(function(){
                var speed=(target-obj.offsetLeft)/5;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);   //缓冲运动的速度一定要取整
                if(obj.offsetLeft==target){                         //两点重合就清除定时器                 
                    clearInterval(obj.timer)
                }else{
                    obj.style.left=obj.offsetLeft+speed+"px";
                }
            },30)
        }

完美运动

function getStyle(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]}
//startMove(oDiv, {width: 400, height: 400})


function startMove(obj, json, fnEnd)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;        //假设：所有值都已经到了
        
        for(var attr in json)
        {
            var cur=0;                      // 获取当前值 if(attr=='opacity')
            {
                cur=Math.round(parseFloat(getStyle(obj, attr))*100)||0;
            }
            else
            {
                cur=parseInt(getStyle(obj, attr))||0;
            }
            
            var speed=(json[attr]-cur)/6;   //算速度
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur!=json[attr])            //检测停止：如果当前的值不等于目标值就不清除定时器
                bStop=false;
            
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
        
        if(bStop)
        {
            clearInterval(obj.timer);           
            fnEnd&&fnEnd.call(obj);
        }
    }, 30);
}

多物体的运动

function startMove(obj, attr, iTarget, iSpeed) {
        clearInterval(obj.iTimer);
        var iCur = 0;
            
        obj.iTimer = setInterval(function() {
            
            if (attr == 'opacity') {
                iCur = Math.round(css( obj, 'opacity' ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }
            
            if (iCur == iTarget) {
                clearInterval(obj.iTimer);
            } else {
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }
            
        }, 30);
    }
    
    function css(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }

转载于:https://my.oschina.net/u/3147332/blog/807110

chengweng2602

关注

0
点赞
踩
0

收藏

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

运动框架演变过程 startMove(iTarget) 运动框架 startMove(obj, iTarget) 多物体 startMove(obj, attr, iTarget) 任意值 startMove(obj, att...
复制链接

扫一扫