Javascript 运动基础

最新推荐文章于 2021-01-26 17:37:50 发布

原创最新推荐文章于 2021-01-26 17:37:50 发布 · 608 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript实现元素的运动效果，包括基本的移动、淡入淡出，以及复杂的缓冲运动。通过定时器控制物体的速度和位置，实现了平滑过渡和精确停止。

运动基础：

让Div运动起来
2.速度——物体运动的快慢
3.运动中的Bug
4.不会停止
5.速度取某些值会无法停止
6.到达位置后再点击还会运动
7.重复点击速度加快

物体运动原理：通过改变物体的位置，而发生移动变化。
方法：1.运动的物体使用绝对定位
2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft的数值来控制左右移动。

步骤：
1、开始运动前，先清除已有定时器（原因：是连续点击按钮，物体会运动越来越快,造成运动混乱）
2、开启定时器，计算速度
3、把运动和停止隔开（if/else),判断停止条件，执行运动

一.定时器
1.倒计定时器：timename=setTimeout(“function();”,delaytime);
2.循环定时器：timename=setInterval(“function();”,delaytime);

function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函

数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒

为单位。

倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。   
循环定时器一般用于站点上需要从复执行的效果。这些事件需要隔一段时间运行一次。有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。

盒子的运动例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                left: 0;
                top: 50px;
            }                   
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var oBox = document.getElementById('box');
                var oBtn = document.getElementById('btn');
                var timer = null;  //  shezhi 
                function tot() {                    
                    var oBox = document.getElementById('box');
                var oBtn = document.getElementById('btn');
                    clearInterval(timer);//   先声明一个空定义 名 每次运动先关闭原有的定时器，否则会出现运动错乱，
                    timer=setInterval(function(){
                        if(oBox.offsetLeft >= 400) {   //  纠正这个Bug，用>=0;//  解决点击按钮多次加速的问题，到了规定时间自动停下来
                            console.log(oBox.offsetLeft) // 点击会继续运动，用if，else解决
                        clearInterval(timer);                       }                               
                    else{
                        oBox.style.left = oBox.offsetLeft + 10 + 'px'; //  左边往右边每次增加5个像素                        
                    } 
                    },30);                                      
                }
                oBtn.onclick=function(){
                    tot();  // 点击调用函数开始运动
                }
            }
        </script>
    </head>
    <body>
        <input type="button"id="btn" value="按钮" />
        <div id="box"></div>
    </body>
</html>

2.运动框架及应用
1.运动框架：在开始运动时，关闭已有的定时器
2.把运动和停止隔开（if/else）
3.简单的淡出淡入

例1：
百度分享侧边栏，通过目标值计算速度值

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 185px;
                height: 116px;
                background: red;
                filter: alpha(opacity: 30);
                opacity: 0.3;
            }
        </style>        
        <script>            
            window.onload = function() {                
             var oDiv1 = document.getElementById('div1');       
            oDiv1.onmouseover = function() {
                    startMove(100);
                };
                oDiv1.onmouseout = function() {
                    startMove(30);
                };                                      
            var alpha = 30;  // 设置一个空的
            var timer = null;  // 定义一个空的值
            function startMove(a1) {    //  定义一个有参函数                        
                clearInterval(timer);   //  每次开始运动时，先关闭定时器
                timer = setInterval(function () {
                    var speed = 10;  // 定义一个初始值
                    if(alpha < a1) {
                        speed = 10;
                    } else {
                        speed = -10;
                    }                   
                    if(alpha ==a1) {
                        clearInterval(timer);
                    } else {
                        alpha += speed;
                        oDiv1.style.filter = 'alpha(opacity:' + alpha + ')';//  解决兼容性问题                
                        oDiv1.style.opacity = alpha / 100;                          
                    }
                },30);
            }
            }
        </script>
    </head>
    <body>
        <div id="box">                  
        <img src="img/a1.jpeg" id="div1"/>      
        </div>
    </body>
</html>

3.缓冲运动
逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数

1.缓冲运动就是距离越大，速度就愈大，距离越小，速度就越小，即速度与距离有关。
2.一开始速度为0，即对速度进行重新定义。
3.此时会有一个严重的问题，因为屏幕的最小单位为px，所以会出现最终的left值为小数，而不为目标的iTarget,可以通过判断来解决，这里要引入Math.floor（），这是向下取整，同样还有Math.ceil()，这是向上取整，Math.round();这是四舍五入。这样完全保证速度都是整数，并且在临界值上都为0。
代码:var speed=(iTarget-oDiv.offsetLeft)/10;
例2：运用缓冲效果完善上面例1的百度分享侧边栏

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{width: 150px;height: 200px;background: 
greenyellow;margin-top: 20px;position: absolute;left: -150px;}
            #box span{width: 20px;height: 60px;background: 
blue;position: absolute;right: -20px;top: 70px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBox=document.getElementById('box');
                 var oBox1=document.getElementById('box1');
                var timer=null;//  全局变量
                function move(iTarget){  //  目标值，设置一个有参函数
                    clearInterval(timer)  //  清空原有的定时器
                timer=setInterval(function(){
                     ////通过位移量除以目标值，使speed递减，实现减速停止。通过除的数字，控制快慢
                     var speed=(iTarget-oBox.offsetLeft)/10;
                    speed=speed>0?Math.ceil(speed):Math.floor

(speed);  // 只要用到缓冲运动，就一定要记得取整，否则会达不到自己想要的效果，出现运动错乱
                      oBox.style.left= oBox.offsetLeft+speed
+'px';  //设置每次向有增加10个像素
                },30);
                }             
                oBox.onmouseenter=function(){  // 鼠标移入
                    move(0);
                }
                 oBox.onmouseleave=function(){  // 鼠标移出
                    move(-150);
                }              
            }
        </script>
    </head>
    <body>
        <div id="box">
            <span>分享到</span>
        </div>      
    </body>
</html>