JavaScript的動畫

標籤：doc   時間   max   inter   AC   cti   top   The   ack   

動畫就是位置的變化：

HTML：

           <div class="bg" id="bg"></div>

css:

          .bg{position: absolute;top: 0;left: 0;width: 100px;height: 100px;background: red;border-radius: 50%;}

 

javascript:

       

(function(){
var x = 0;
var y = 0;
var speed = 10;
//動畫的加速度
var xstep = speed;
var ystep = speed;
var boxDom = document.getElementById("bg");
//擷取瀏覽器的高度
function draw(){
var maxwidth = window.innerWidth - boxDom.offsetWidth;
var maxheight = window.innerHeight-boxDom.offsetHeight;
y+=ystep;
x+=xstep;
if(x>maxwidth){
xstep = -speed;
x = maxwidth;
}
if(y>maxheight){
ystep = -speed;
y = maxheight;
}
if(y<0){
ystep = speed;
y = 0;
}
if (x<0) {
xstep = speed;
x = 0;
}
boxDom.style.left = x + "px";
boxDom.style.top = y + "px";

};
setInterval(function(){
draw();
},1000/25);

})();

動畫與物體的原始位置（定位），時間和速度有關。

JavaScript的動畫