关于javascript缓冲运动的笔记

Posted 2020-08-09

Js里面有关运动的框架比较多，先从基本开始，我感觉缓冲运动是比教基础而且比较重要的，先提供一个小例子。

 

<script type="text/javascript">
        window.onload = function()
        {
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");　　　　　　//通过Id获取div
            oBtn.onclick = function()
            {    
                startMove(310);　　　　　　　　　　　　　　　　　　　//设置目标值，既要到达的位置
            }
                function startMove(iTarget)                       //传入目标值,运动到什么地方
            {    
                clearInterval(timer);                            //再开启一个定时器之前，先初始化，清除已经开启的，避免造成影响
                    var timer = null;
                timer = setInterval(function(){
                    var iSpeed = (iTarget - oDiv.offsetLeft)/10 ;                //再用offsetLeft之前，要给操作对象定位，拥有一个 letf 值
                    iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    //一般的if,else语句都能写成三目运算符
                    // if(iSpeed>0){
                    //         iSpeed = Math.ceil(iSpeed);                //向上取整，使运动速度取整，这样可以避免操作对象在到达目标之前停下来
                    // }else{
                    //     iSpeed = Math.floor(iSpeed);                //向下取整
                    // }
                    
                    if(oDiv.offsetLeft==iTarget)
                    {
                        clearInterval(timer);
                    }else
                    {
                        oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
                    }
                    document.title = oDiv.style.left;
                },30);

            };
        };
        
    </script>

这是有关缓冲运动比较实用的一些思路，以后应该也会该进一些,最主要的还是要了解目标值与速度的关系