JavaScript动画原理

动画原理

<style>
        div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        // 获得盒子当前位置 div.offsetLeft

        // 让盒子在当前位置上加上一个 移动距离

        // div.style.left = div.offsetLeft + 2 + 'px'  
        
        // 此元素需要加定位才能使用div.style.left

         var timer = setInterval(function(){ //  利用定时器不断重复这个操作 
            if(div.offsetLeft >=888){
                // 停止动画  本质是停止定时器
                clearInterval(timer)
            }
            div.style.left = div.offsetLeft + 2 + 'px'
        },20)

    </script>
</body>

简单动画函数封装

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div')
        var span = document.querySelector('span')
        // 简单动画封装 obj 目标对象 target 目标位置 
          function animate(obj,target){
                var timer = setInterval(function(){ //  利用定时器不断重复这个操作 
                if(obj.offsetLeft >=target){
                // 停止动画  本质是停止定时器
                    clearInterval(timer)
            }
            obj.style.left = obj.offsetLeft + 2 + 'px'
          },20)
          }
          animate(div,666)
          animate(span,888)    
    </script>
</body>

你可能感兴趣的:(JavaScript,动画,javascript,css3)