搜索
简帛阁>技术文章>JavaScript个人学习笔记---运动

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，所以可以先把透明度的取值增大100倍进行计算，在最后修改样式的时候在缩小100倍后在赋值；

    <script>
        //透明度缓冲
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function() {
            startMove(this,50);
        },false);

        function startMove(dom,target) {
            clearInterval(timer);
            var speed ,cur;
            var timer;
            timer = setInterval(function() {
                cur = parseFloat(getStyle(dom,'opacity')) * 100;
                speed = (target - cur)/7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(cur == target){
                    clearInterval(timer);
                }else{
                    dom.style.opacity =(cur + speed)/100;
                }
            },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>

四，弹性运动

dom元素开始进行一个加速度运动，越接近目标点其加速度a越小。表现出来的效果就是：dom元素做加速度减小的的加速运动，如果加上一个运动损耗u，就会让dom元素在目标点出来回晃动最后停在目标点，所以称之为弹性运动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #008c8c;
            opacity: 1;
        }
        span{
            width: 1px;
            height: 500px;
            position: absolute;
            left: 500px;
            top: 0;
            background-color: black;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>




    <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 a = 3;
            var speed = 0;
            var cur;
            var u = 0.8;//运动损耗
            dom.timer = setInterval(function() {
                cur = parseFloat( getStyle(dom,'left') );
                a = (target - cur)/7;
                speed += a;
                speed *= u;
                if(Math.abs(cur) < 1 && Math.abs(speed) < 1){
                    clearInterval(dom.timer);
                    dom.style.left = target + 'px';
                }else{
                    dom.style.left = cur + speed + 'px';
                }
                console.log(cur,speed);
            },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>
</body>
</html>

五，相关案例

1），多物体相同值运动

在点击div时，让这些div的宽度发生变化；

    <script>
        var div = document.getElementsByTagName('div');
        for(var i = 0; i < div.length;i ++) {   //使用for循环给每一个dom元素都添加一个监听事件
            div[i].addEventListener('mouseenter',function() {
                startMove(this,500);
            },false);
        }
        for(var i = 0; i < div.length;i ++) {
            div[i].addEventListener('mouseleave',function() {
                startMove(this,100);
            },false);
        }


        function startMove(dom,target) {
            clearInterval(dom.timer);
            var speed;
            var timer;
            var cur;
            dom.timer = setInterval(function() {
                cur = parseInt(getStyle(dom,'width'));
                speed = (target - cur)/7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(cur == target){
                    clearInterval(dom.timer);
                }else{
                    dom.style.width = 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>

2）多物体不同值运动

不同dom元素的不同值的改变，将需要改变的样式名（attr）作为参数传进去，就可以灵活修改各类样式值；

 <script>
        //多物体不同值运动
        var div = document.getElementsByTagName('div');
            div[0].addEventListener('mouseenter',function() {
                startMove(this,'width',500)
 
            },false);
            div[1].addEventListener('mouseenter',function() {
                startMove(this,'height',50)
            },false);
            div[2].addEventListener('mouseenter',function() {
                startMove(this,'opacity',50)
            },false);
            div[3].addEventListener('mouseenter',function() {
                startMove(this,'borderWidth',50)
            },false);

        function startMove(dom,attr,target) {  //使用attr参数，可以灵活控制需要修改的样式
            clearInterval(dom.timer);
            var timer;
            var speed;
            var cur;
            dom.timer = setInterval(function() {
              if(attr == 'opacity'){
                  cur = parseFloat(getStyle(dom,'opacity')) * 100;
              }else{
                  cur = parseInt(getStyle(dom,attr));
              }
              speed = (target - cur)/7;
              speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
              if(cur == target){
                clearInterval(dom.timer)
              }else if(attr == 'opacity'){
                  dom.style.opacity = ( cur + speed)/100;
              }else{
                  dom.style[attr] = 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>

3）多物体多值运动及回调函数（callback）

如果想要同时修改多个值时，可以将attr参数改成attrObj，将所需要修改的值作为一个对象进行传参。

回调函数：在调用某一个函数时，将另一个函数作为该函数的参数传进去，在该函数执行后，并且符合相应的条件，执行另一个函数；这一过程被称为回调函数，作为参数的函数称为被回调的函数；下面的例子中  startMove(div[1],{height:400,width:400,opacity:50,left:500}  就是被回调的函数；

    <script>
        //多物体多值运动
        //{height:400,width:400,opacity:50,left:500}
        var div = document.getElementsByTagName('div');
        div[0].addEventListener('mouseenter',function() {
            startMove(this,{height:400,width:400,opacity:50,left:500},function(){
                startMove(div[1],{height:400,width:400,opacity:50,left:500})
            });
        },30);

        function startMove(dom,attrObj,callback) {
            clearInterval(dom.timer);
            var timer;
            var speed;
            var cur;
            dom.timer = setInterval(function() {
                var stop = true;  //判断是否完成多值修改的标识符
                for(var attr in attrObj){  //使用for in 循环将attrObj对象中的每一个属性都拿出来就行修改
                    if(attr == 'opacity'){
                        cur = parseFloat( getStyle(dom,attr) )*100;
                    }else{
                        cur = parseInt( getStyle(dom,attr) );
                    }
                    speed = (attrObj[attr] - cur)/7;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(attr == 'opacity'){
                        dom.style.opacity = ( cur + speed )/100;
                    }else{
                        dom.style[attr] = cur + speed + 'px';
                    }
                    if(cur != attrObj[attr]){  //如果有任一项未达到目标值，都不能完成
                        stop = false;
                    }
                }
                if(stop){   //当stop == 'ture'时，清理定时器，并执行回调函数
                    clearInterval(dom.timer);
                    typeof(callback) == 'function' && callback();
                }
            },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>

4）模拟重力场

利用缓冲，加速，弹性运动等特性，模拟现实的重力场；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            top: 0;
            border-radius: 50%;
            background-color: #008c8c;
        }
    </style>
</head>
<body>
    <div></div>

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

        function startMove(dom) {
            clearInterval(dom.timer);
            var timer;
            var speedX = 6;
            var speedY = 0;
            var g = 3;      //Y方向的加速度
            dom.timer = setInterval(function() {
                speedY += g;
                //newLeft newTop 为当前dom元素的left值和top值
                var newLeft = dom.offsetLeft + speedX;
                var newTop = dom.offsetTop + speedY;
                if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                    //document.documentElement.clientWidth 获取视口的宽度
                    //dom.clientWidth 获取dom元素自身的宽度width
                    //当dom元素的右边界碰到或者超出视口的右侧时，令dim元素速度反向
                    speedX *= -1;
                    speedY *= 0.8;
                    speedX *= 0.8;
                    newLeft = document.documentElement.clientWidth - dom.clientWidth; //防止超出屏幕 出现滚动条
                }
                if(newLeft <= 0) {
                    speedX *= -1;
                    speedY *= 0.8;
                    speedX *= 0.8;
                    newLeft = 0;
                  
                }
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight) {
                    speedY *= -1;
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                    speedY *= 0.8;
                    speedX *= 0.8;
                }
                if(newTop <= 0) {
                    speedY *= -1;
                    newTop = 0;
                    speedY *= 0.8;
                    speedX *= 0.8;
                }

                //当速度小于1时，可以近似认为速度为零
                if(Math.abs(speedX) < 1){
                    speedX = 0;
                }
                if(Math.abs(speedY) < 1){
                    speedY = 0 ;
                }
                if(Math.abs(speedX) ==0 && Math.abs(speedY) ==0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
                    //当速度为0(XY两个方向都为0)且dom元素在屏幕底边时，清理定时器
                    clearInterval(dom.timer);
                    console.log('over');
                   

                }else{
                    dom.style.left = newLeft + 'px';
                    dom.style.top = newTop + 'px';
                }
                console.log(speedX,speedY)
            },30)
        }

    </script>



</body>
</html>

JavaScript个人学习笔记---运动
一，匀速运动二，匀加速运动三，缓冲运动四，弹性运动五，相关案例一，匀速运动即无加速度的运动；实现原理就是设置一个速度speed，利用定时器setInterval（）函数，在一定时间内让DOM元素的左边
JavaScript个人学习笔记-杂项知识点
一，浏览器的组成二，渲染引擎和渲染模式三，Lable标签四，属性与特性的区别五，预加载和懒加载六，Mathrandom()七，虚拟dom八，断点调试九，封装className一，浏览器的组成大致可分为
JavaScript个人学习笔记---BOM
一，概念BOM：browserobjectmodel浏览器对象模型；与dom（documentobjectmodel）相对应；在DOM中是使用js（JavaScript）对文档流或者说html元素（也
JavaScript个人学习笔记---数组拓展应用
目录一，forEach二，Filter三，Map四，Every五，Some六，Reduce七，ReduceRight总结一，forEachforEach方法是在Arrayprototype上定义的方法
Javascript学习笔记
java：https://wwwcnblogscom/tutut/p/7203840html1在html中使用javascript引入脚本<scripttypetext/javascriptsr
JavaScript 学习笔记
1、进行比較时。尽量使用“”。而不是使用“”，由于“”操作符会为了比較两个值而进行强制类型转换，会带来性能消耗。2、为了达到遍历数组的最佳性能。推荐使用经典的for循环。varlist[1,2,3,4
javascript运动详解
物体运动原理：通过改变物体的位置，而发生移动变化。方法：1运动的物体使用绝对定位2通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offs
Javascript 个人笔记（没有整理，很乱）
关于元素的显示和隐藏Visibility快于Display让图画时隐时现会创造很有趣的效果，有2种方法可以实现这个目的：使用CSS的visibility属性或者display属性。对于绝对位置元素，d
物体运动学习笔记（二）
跟着CatLike大神的教程敲了一遍，记录下学习心得。地址：https://catlikecodingcom/unity/tutorials/通过刚体移动。一、复合运算符赋值desiredJump，使
JavaScript数据类型学习笔记
ECMAscript中有5种简单的数据类型，也被称为基本数据类型：Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型——Object。Undefined类
JavaScript
开发语言