JS动画

最新推荐文章于 2024-06-05 10:20:14 发布

wrang_hh

最新推荐文章于 2024-06-05 10:20:14 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/m0_37666988/article/details/88983388

版权

一、


 <style type="text/css">

        /*
        此代码只是简单地让元素动起来
        */

        *{
            margin: 0;
            padding: 0;
    }
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript">
    var speedx = 3;
    var speedy = 3;

    var div = document.querySelector('div');//querySelector：获取到div
    function move() {
        var currentleft = parseInt(window.getComputedStyle(div).left);//getComputedStyle:获取元素的属性值
        var currenttop = parseInt(window.getComputedStyle(div).top);
        var left = currentleft + speedx;
        var top = currenttop + speedy;
        div.style.left = left + "px";
        div.style.top = top + "px";
        
    }
   
    setInterval(function() {
        move();
    },20)
    </script>
</body>

二、碰撞边缘的检测

 
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;/*隐藏滚动条*/
        }
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 0;
            right: 0;
          }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript">
    var speedx = 3;
    var speedy = 3;

    var div = document.querySelector('div');//querySelector：获取到div
    function move() {
        var currentleft = parseInt(window.getComputedStyle(div).left);//getComputedStyle:获取元素的属性值
        var currenttop = parseInt(window.getComputedStyle(div).top);

        check_boder_conlision(div);//移动的时候检测是否碰撞

        var left = currentleft + speedx;
        var top = currenttop + speedy;
        div.style.left = left + "px";
        div.style.top = top + "px";
        
    }
   
    function check_boder_conlision(el) {
        //由于 window.getComputedStyle要用很多次，所以可以将它定义成一个变量
        var style = window.getComputedStyle(el);
        var left = parseInt(style.left);
        var top = parseInt(style.top);
        var w = parseInt(style.width);
        var h = parseInt(style.height);
        if(left < 0) {
            left = 0;//此时和屏幕左边缘的距离要改为0，正好碰上
            speedx *= -1;//原来的速度变成了反方向的速度
        }
        if(left>window.innerWidth-w) {//说明元素已经碰到了屏幕的右边缘，window.innerWidth：	返回窗口的文档显示区的宽度。
            left = window.innerWidth - w;//此时元素的右边正好和屏幕的右边碰撞上，所以元素的左边的距离就等于整个屏幕的宽度减去元素的宽度
            speedx *= -1;

        }
        if(top<0) {
            top = 0;
            speedy *= -1;
        }
        if(top>window.innerHeight - h) {
            top = window.innerHeight - h;
            speedy *= -1;
        }

        el.style.top = top;
        el.style.left = left;
    }

    setInterval(function() {
        move();
    },20)
    </script>
</body>
</html>

三、块与块的检测

  <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;/*隐藏滚动条*/
        }
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 0;
            right: 0;
          }
          div:nth-of-type(2) {
              left: 500px;
              top:500px;
          }
    </style>
</head>
<body>
    <div></div>
    <div></div>

    <script type="text/javascript">
    var speedx = 3;
    var speedy = 3;

    var div1 = document.querySelector('div');
    var div2 = document.querySelector('div:nth-of-type(2)');
    div1.speedx = 5;
    div1.speedy = 3;
    div2.speedx = 5;
    div2.speedy = 3;
    
    function move(el) {
        var currentleft = parseInt(window.getComputedStyle(el).left);
        var currenttop = parseInt(window.getComputedStyle(el).top);

        check_boder_conlision(el);

        var tempX,tempY;
       if(check_block_conlision(div1,div2)){//如果碰撞了就让两个元素交换移动的位置
           tempX = div1.speedx;
           tempY = div1.speedy;

           div1.speedx = div2.speedx;
           div1.speedy = div2.speedy;

           div2.speedx = tempX;
           div2.speedy = tempY;

       }

        var left = currentleft + el.speedx;
        var top = currenttop + el.speedy;
        el.style.left = left + "px";
        el.style.top = top + "px";
        
    }
   
    function check_boder_conlision(el) {
        var style = window.getComputedStyle(el);
        var left = parseInt(style.left);
        var top = parseInt(style.top);
        var w = parseInt(style.width);
        var h = parseInt(style.height);
        if(left < 0) {
            left = 0;
            el.speedx *= -1;
        }
        if(left>window.innerWidth-w) {
            left = window.innerWidth - w;
            el.speedx *= -1;

        }
        if(top<0) {
            top = 0;
            el.speedy *= -1;
        }
        if(top>window.innerHeight - h) {
            top = window.innerHeight - h;
            el.speedy *= -1;
        }

        el.style.top = top;
        el.style.left = left;
    }
    //通过两个元素水平和垂直的距离，判断是否相撞
    function check_block_conlision(block1,block2) {
            var left1 = parseInt(window.getComputedStyle(block1).left);
            var left2 = parseInt(window.getComputedStyle(block2).left);

            var top1 = parseInt(window.getComputedStyle(block1).top);
            var top2 = parseInt(window.getComputedStyle(block2).top);

            var  width1 = parseInt(window.getComputedStyle(block1).width);
            var  width2 = parseInt(window.getComputedStyle(block2).width);

            var  height1 = parseInt(window.getComputedStyle(block1).height);
            var  height2 = parseInt(window.getComputedStyle(block2).height);

            //第一个元素的中心点的位置
            var center1 = {
                x : left1 + width1/2,
                y : top1 + top1/2
            }
            //第二个元素的中心点的位置
            var center2 = {
                x : left2 + width2/2,
                y : top2 + top2/2
            }

            var diffx = Math.abs(center1.x - center2.y);//取出水平方向的距离，因为取得是距离，所以要加绝对值,要不然可能会是负值
            var diffy = Math.abs(center1.y - center2.y);
            if(diffx<(width1+width2)/2 && diffy<(height1+height2)/2) {//说明碰撞
                return true;
            }
            return false;

    }


    setInterval(function() {
        move(div1);
        move(div2);
    },20)
    </script>
</body>
</html>

四、封装动画函数
JS文件：

function getStyle(el,propetry) {
    if(getComputedStyle) {//在IE8以前不支持，所以要判断浏览器支不支持这个属性。浏览器的兼容
        return getComputedStyle(el)[propetry];
    } else{
        return el.currentStyle[propetry];
    }
}

// function animate(el,propetry,target) {
//     clearInterval(el.timerID);
//     // propetry:改变哪个属性
//     el.timerID = setInterval(function() {
//         var current;  
//     if(propetry == 'opacity') {
//         current = Math.round(parseFloat(getStyle(el,'opacity')) * 100);
//     }else{
//         current = parseInt(getStyle(el,propetry))
//     }


function animate(el,propetries) {
    clearInterval(el.timerID);
    // propetry:改变哪个属性
    el.timerID = setInterval(function() {

        for(var propetry in propetries) {
            var current;  
            var target = propetries[propetry];
            if(propetry == 'opacity') {
                current = Math.round(parseFloat(getStyle(el,'opacity')) * 100);
            }else{
                current = parseInt(getStyle(el,propetry));
                 
            }
            //当到达目的地时速度改为0
            var speed = (target - current)/30;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);//ceil:向上取整，floor：向下取整

            if(propetry == 'opacity') {
                el.style.opacity = (current+speed)/100;
            }else {
                el.style[propetry] = current + speed + 'px';
            }
        }
        
    },20)
}

HTML文件：