JavaScript运动

fuyuyuki

已于 2022-04-15 17:19:36 修改

阅读量939

点赞数 3

文章标签： javascript

于 2022-04-14 22:17:01 首次发布

本文链接：https://blog.csdn.net/happy_kx/article/details/124131439

版权

在js中实现运动的原理：

在开启定时器setInterval()/setTimeout()和清楚定时器clearInterval()/clearTimeout()来控制运动，其中setInterval()方法可以让物体动起来,而clearInterval()方法可以让运动停止；在定时器过程中不断更改需要改变的值。

总结一下运动所需要用到的知识：

1.定时器（异步的多次）

let id = setInterval(function(){},毫秒值)
clearInterval(id)

2.延时器（异步的执行一次）

setTimeout(function(){},延迟的毫秒值)

3.DOM操作

获取样式

window.getComputerStyle(element,null) || element.currentStyle

设置样式

element.style.样式名 = 样式值

4.offset家族

offsetParent 偏移的父元素（从里往外找 先加了定位就是谁 找不到就找body）

offsetWidth 宽度 offsetHeight 高度

offsetLeft 离左边的距离 offsetTop 离上面的距离

5.区间的判断（利用一个公共的变量来控制变量）

(target - current) <= step //区间判断

6.计算公式

随机数区间生成

Math.round(Math.random() * (max-min) + min) //随机整数

圆的的x轴 y轴计算

x = Math.cos(2*Math.PI*角度值)*半径+圆心点的x轴
y = Math.sin(2*Math.PI*角度值)*半径+圆心点的y轴

一.匀速运动

1.首先我们要页面要有个运动的元素div，这个元素div有宽度高度背景以及定位

 *{margin: 0;padding: 0;}
        #box{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
        }


    <button>移动到600</button>
    <button>移动到200</button>
    <div id="box"></div>

2.如何让元素div匀速运动起来？可以用定时器来控制元素div的定位left以及top的值来改变元素div的位置。

<script>
        var box = document.getElementById('box') //获取box
        function animatedMoveX(element,target){ //定义一个移动的方法 第一个参数是移动的对象 第二个参数是x移动多少
            let timer = null //定义一个变量用来一开始就清除定时器
            clearInterval(timer) //清掉定时器
            timer = setInterval(() => { //创建一个定时器
                var d = element.offsetLeft>target?-10:10 //判断元素在目标位置的左边还是右边 -10表示往左 10表示右
                element.style.left = element.offsetLeft+d+'px' 
                if (Math.abs(target-element.offsetLeft)<=Math.abs(d)) {//如果偏移量与要移动的x值差是
                    element.style.left = target+'px' 
                    clearInterval(timer)
                }
            }, 50); 
        }
        //获取按钮给按钮加点击事件
        var btns = document.getElementsByTagName('button')
        btns[0].onclick = function(){
            animatedMoveX(box,600)
        }
        btns[1].onclick = function(){
            animatedMoveX(box,200)
        }
    </script>

效果图：

二.缓冲运动

缓冲运动的效果与匀速运动的区别就是速度会越来越小，起到一个缓冲的作用。

缓冲运动的原理：步长由距离来决定，离目标位置越来越近时步长会越来越小。步长 =（目标值-当前值）/缩放比例。

<style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
   </style>


    <button>缓存动画</button>
    <div class="box">

js代码

<script>
        var btn = document.querySelector('button') //获取按钮
        var box = document.getElementsByClassName('box')[0] //获取div
        btn.onclick = function(){  //给按钮加点击事件
            let timer = setInterval(() => {   //添加定时器
                var currentX = box.offsetLeft  //获取div当前的x偏移量
                var step = (400-currentX)/10  //步长  步长越小速度越慢
                step = step>0?Math.ceil(step):Math.floor(step) //如果步长大于0向上取整 如果小于向下取整 保持速度在一段区间是匀速的
                box.style.left = currentX+step+'px'   //改变div的位置
                if (Math.abs(400-currentX)<=Math.abs(step)) { //如果到达目标位置清除定时器
                    clearInterval(timer)
                }
            }, 60);
        }
    </script>

效果图

三.链式运动

当一个运动执行完成之后，在继续执行另一个运动，我们成为链式运动。(相当于在回调函数里面执行后面的操作，回调函数在我后面提到)

示例：一个div运动到400px然后在把透明度慢慢变成0.5宽度增加一定宽度

<style>
        .box{
            width: 500px;
            height: 500px;
            background: pink;
            position: relative;
        }
        .innerBox{
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

    <button>action</button>
    <div class="box">
        <div class="innerBox"></div>
    </div>

js代码（这里我引入了一个js封装的缓冲运动方法，后面单独发了我）

<script src="js/animatedPlus.js"></script>
    <script>
        //获取按钮
        let btn = document.querySelector('button')
        btn.onclick = function(){ //给按钮加点击事件
            let innerBox = document.querySelector('.innerBox') //获取innerBox盒子
            innerBox.style.width = '100px' //给盒子加宽度
            animated(innerBox,{"height":500,"left":400,"opacity":0.5},function(){  //调用封装的方法
                animated(innerBox,{"width":500})
            })
        }
    </script>

效果图

四.抛物线运动

用定时器，进行间隔性刷新，更新小球位置，以实现动态效果，运动物体的left以及top都要一直变化。

实例：

<style>
        div{
            width: 30px;
            height: 30px;
            background: blue;
            border-radius: 50%;
            position: absolute;
        }
    </style>

<div></div>

js代码（js封装地址js缓冲运动的封装_fuyuyuki的博客-CSDN博客）

<script src="js/animatedPlus.js"></script>
    <script>
        let div =document.querySelector('div')
        document.onclick = function(e){
            e = e || windwo.event
            let targetX = e.clientX
            let targetY = e.clientY
            let timer = setInterval(() => {
                let currentX = parseFloat(getStyle(div,'left'))
                let currentY = parseFloat(getStyle(div,'top'))
                let stepX = (targetX-currentX)/5
                stepX = stepX>0?Math.ceil(stepX):Math.floor(stepX)
                let stepY = (targetY-currentY)/10
                stepY = stepY>0?Math.ceil(stepY):Math.floor(stepY)
                div.style.left = currentX+stepX+"px"
                div.style.top = currentY+stepY+"px"
                if (Math.abs(targetX-currentX)<=Math.abs(stepX) && Math.abs(targetY-currentY)<=Math.abs(stepY)) {
                    clearInterval(timer)                  
                }
            }, 200);
        }
    </script>

效果图

五.圆周运动

运用js实现圆周运动，要注意三点：
1：物体运动的圆心
2：物体运动的半径
3：物体发生运动的速度

<style>
        div{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 500px;
            top: 400px;
        }
    </style>

<div></div>
    <button>圆周运动</button>

js代码

<script>
        //获取div
        var div  = document.querySelector('div');
        //获取按钮
        var btn  = document.querySelector('button')
        btn.onclick = function(){
            //确定圆心
            let x =500;
            let y =400;
            //确定半径
            let r =100;
            let i = 0; //代表转过的弧度
            setInterval(function(){
                i++;
                let radian = i * Math.PI/180; //弧度
                let a = Math.sin(radian) * r; 
                let b = Math.cos(radian) * r; 
                //逆时针运动
                // let a = Math.cos(radian) * r; 
                // let b = Math.sin(radian) * r;
                //让红色小方块做顺时针圆周运动 
                div.style.left = x + a + 'px';
                div.style.top = y - b + 'px';
            },10)
        }
    </script>

效果图

fuyuyuki

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript运动

在js中实现运动的原理：在开启定时器setInterval()/setTimeout()和清楚定时器clearInterval()/clearTimeout()来控制运动，其中setInterval()方法可以让物体动起来,而clearInterval()方法可以让运动停止；在定时器过程中不断更改需要改变的值。总结一下运动所需要用到的知识：1.定时器（异步的多次）let id = setInterval(function(){},毫秒值)clearInterval(id)2.延时器
复制链接

扫一扫