JavaScript的动画

Posted 2020-11-02 独行的心

动画就是位置的变化：

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);

})();

动画与物体的原始位置（定位），时间和速度有关。