animation js控制缓动效果

Posted 2020-06-25 徐学进

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了animation js控制缓动效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>缓动效果</title>
</head>
<body>
<div id="btn" style=‘position:absolute;‘>按钮</div>
<script type="text/javascript">
var effect = {
insertBtn: document.getElementById("btn"),
};
effect.insertBtn.onclick = function(){
number(effect.insertBtn,18,100);
};
var number = function(node,minnum,maxnum){
var left = minnum;
var step = function(){
left+=1;
node.style.left = left + "px";
if(left < maxnum){
setTimeout(step,10);
}else{
setTimeout(stepReverse,10);
}
};
var stepReverse = function(){
left-=1;
node.style.left = left + "px";
if(left > minnum){
setTimeout(stepReverse,10);
}else{
// node.style.display = "none";
}
};
setTimeout(step,10);
};
</script>
</body>
</html>

<div id="box" style="position:absolute;">Hello!</div>
<script>
var timers = {
    timerID: 0,
    timers: [],
    delay:100,
    maxnum:200,
    minnum:0,
    start: function(){

        // console.log(this.timerID)
        if ( this.timerID ){
            return;
        }
        (function(){
        for ( var i = 0; i < timers.timers.length; i++ ){
            if ( timers.timers[i]() === false ) {
                timers.timers.splice(i, 1);
                i--;
            }
        }
        timers.timerID = setTimeout( arguments.callee, timers.delay );

        })();
    },
    stop: function(){
        clearTimeout( this.timerID );
        this.timerID = 0;
    },
    add: function(fn){
        this.timers.push( fn );
        this.start();
    }
};
var box = document.getElementById("box"), left = 0, top = 20;
timers.add(function(){
    box.style.left = left + "px";
    if ( ++left > timers.maxnum ){
        return false;
    }
     var step = function(){      
            left+=1;
            box.style.left = left + "px";
            if(left < timers.maxnum){
                setTimeout(step,10);
                console.log(11)
            }else{
                setTimeout(stepReverse,10);  
                console.log(22) 
            }
        };
       
        var stepReverse = function(){
            left-=1;
            box.style.left = left + "px";
            if(left > timers.minnum){
                console.log(4444) 
                setTimeout(stepReverse,10);
            }else{
                 setTimeout(step,10);
                // box.style.display = "none";
            }
            console.log(3333) 
        };
        setTimeout(step,10);   
});
// timers.add(function(){
//     box.style.top = top + "px";
//     top += 2;
//     if ( top > 180 ){
//         return false;
//     }
// });
</script>

以上是关于animation js控制缓动效果的主要内容，如果未能解决你的问题，请参考以下文章

animation js控制 缓动效果

animation js控制缓动效果