发新贴  快速回复

时间版运动的疑问

cnbleach
2014-08-20 21:36
看了视频好几遍,还是没有弄懂这一句var t = times - Math.max(0,startTime - changeTime + times);  
我知道t是变化的值,0s,1s,2s但不明白他是怎么变化的,startTime为什么要减changeTime
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:200px; top:200px;}
</style>
<script>

window.onload = function(){
    var oDiv = document.getElementById('div1');
    
    oDiv.onmouseover = function(){
        
        startMove( this , {width : 200 , height : 200 , left : 150 , top:150},2000,'linear' ,function(){});
        
    };
    
    oDiv.onmouseout = function(){
        
        startMove( this , {width : 100 , height : 100 , left : 200 , top:200},2000 ,'linear',function(){});
        
    };
    
};

function startMove(obj,json,times,fx,fn){
    
    if( typeof times == 'undefined' ){
        times = 400;
        fx = 'linear';
    }
    
    if( typeof times == 'string' ){
        if(typeof fx == 'function'){
            fn = fx;
        }
        fx = times;
        times = 400;
    }
    else if(typeof times == 'function'){
        fn = times;
        times = 400;
        fx = 'linear';
    }
    else if(typeof times == 'number'){
        if(typeof fx == 'function'){
            fn = fx;
            fx = 'linear';
        }
        else if(typeof fx == 'undefined'){
            fx = 'linear';
        }
    }
    
    var iCur = {};
    
    for(var attr in json){
        iCur[attr] = 0;
        
        if( attr == 'opacity' ){
            iCur[attr] = Math.round(getStyle(obj,attr)*100);
        }
        else{
            iCur[attr] = parseInt(getStyle(obj,attr));
        }
        
    }
    
    var startTime = now();
    
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        
        var changeTime = now();
        
        var t = times - Math.max(0,startTime - changeTime + times);  //0到2000
        
        for(var attr in json){
            
            var value = Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times);
            
            if(attr == 'opacity'){
                obj.style.opacity = value/100;
                obj.style.filter = 'alpha(opacity='+value+')';
            }
            else{
                obj.style[attr] = value + 'px';
            }
            
        }
        
        if(t == times){
            clearInterval(obj.timer);
            if(fn){
                fn.call(obj);
            }
        }
        
    },13);
    
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    
    function now(){
        return (new Date()).getTime();
    }
    
}


var Tween = {
    linear: function (t, b, c, d){  //匀速
        return c*t/d + b;
    }//代码太长省略了多余的部分
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>



 
创美易-miaov
你从一楼走路上五楼.
在一楼的时候是11:00分
到5楼的时候是11:03分
你花了3分钟时间上5楼.
时间 = startime - changetime = 3分钟
2014-08-21 10:54  回复本帖
cnbleach
forum.php?mod=redirect&goto=findpost&pid=29411&ptid=9110
你从一楼走路上五楼.
在一楼的时候是11:00分
到5楼的时候是11:03分


可是starttime-changetime是负数啊,加上times又表达什么?
2014-08-21 14:09  回复本帖
 
创美易-miaov
负数, 正是想要的.

以及为什么用max.

视频里面讲有很清楚的哦..
2014-08-21 14:31  回复本帖
cnbleach
forum.php?mod=redirect&goto=findpost&pid=29424&ptid=9110
负数, 正是想要的.

以及为什么用max.


就是看不懂视频才来问的,你说的我早知道了,就是不明白他用程序怎么表达出来。
2014-08-21 21:22  回复本帖
 
创美易-miaov
既然知道了还来问,原来又是个无中生有卖瓜的大神。
来欺负咱们这些小白,呜呜呜呜~~
2014-08-21 22:38  回复本帖
cnbleach
forum.php?mod=redirect&goto=findpost&pid=29434&ptid=9110
既然知道了还来问,原来又是个无中生有卖瓜的大神。
来欺负咱们这些小白,呜呜呜呜~~ ...

你这人是来捣乱的吧
2014-08-22 11:08  回复本帖
 
创美易-miaov
没捣乱, 我不懂啊. 以后多多请教你大神了.
2014-08-22 11:47  回复本帖
cnbleach
求老师解答我的问题
2014-08-22 14:37  回复本帖
 
zmouse
startTime - changeTime + times

startTime : 为开始运动的事件
changeTime : 为这次运动的当前时间
其实上面公式也可以是这样:
times - (changeTime -  startTime)
changeTime -  startTime : 就是当前已经运动的时间
而times - (changeTime -  startTime)就是用希望运动的总时间-已经过去的时间

2014-08-23 11:50  回复本帖
登录 后才可以发表回复