JavaScript个人学习笔记---运动

一，匀速运动

二，匀加速运动

三，缓冲运动

四，弹性运动

五，相关案例

一，匀速运动

即无加速度的运动；实现原理就是设置一个速度speed，利用定时器setInterval（）函数，在一定时间内让DOM元素的左边界（或者其他任意坐标）+上这个speed；

<script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function(){
            startMove(this,500);
        },false)

        function startMove(dom,target){
            clearInterval(dom.timer);
            var timer;
            var speed = 5;
            dom.timer = setInterval(function(){
                if(dom.offsetLeft == target){
                    clearInterval(dom.timer);
                }else{
                    dom.style.left = dom.offsetLeft + speed + 'px';

                }
            },30)
        }

二，匀加速运动

在匀速运动的基础上加入加速度a；

    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function(){
            startMove(this,500);
        },false)

        function startMove(dom,target){
            clearInterval(dom.timer);
            var timer;
            var speed = 5;
            var a = 3;
            var cur ;
            dom.timer = setInterval(function(){
                speed += a;
                cur = parseInt( getStyle(dom,'left') );
                if(target - cur < speed){
                    cur = target;
                }
                if(cur == target){
                    clearInterval(dom.timer);
                }else{
                    dom.style.left = cur + speed + 'px';

                }
            },30)
        }




        function getStyle(dom,attr) {     //获取dom结构的CSSs属性（e为相应的dom结构，attr为查询的属性名）
            if(window.getComputedStyle) {
                return window.getComputedStyle(dom,null)[attr];
            }else {
                return dom.currentStyle[attr];
            }
        }
    </script>

三，缓冲运动

速度在越接近目标点，速度值越小，最后停在目标点处；

 

<script>

        //缓冲运动
        var div = document.getElementsByClassName('demo')[0];
        div.addEventListener('click',function() {
            startMove(this,500);
        },false);


        function startMove(dom,target){
            clearInterval(timer);
            var timer;
            timer = setInterval(function() {
                var speed = Math.ceil((target - dom.offsetLeft)/7) //速度值最小为1
                speed = target - dom.offsetLeft > 0 ? Math.ceil(speed) : Math.floor(speed);     
                //在速度方向为负时，取最小速度为-1，速度方向为正时，取最小速度为1
                if(dom.offsetLeft == target){
                    clearInterval(timer)
                }else{
                    dom.style.left = dom.offsetLeft + speed + 'px';
                }

            },30);
        }


</script>

 三（1）相关案例

1）透明度缓冲；由于透明度的取值是0-1之间，但在定义缓冲运动的方法使，定义速度的最小值为1，所以可以先把透明度的取值增大