Home >Web Front-end >JS Tutorial >How to achieve elastic effects in JavaScript

How to achieve elastic effects in JavaScript

亚连Original: 2018-06-19 16:06:201771browse

This article mainly introduces the method of realizing gravity fall and elasticity effect in JavaScript, and analyzes the principles and specific implementation techniques of JavaScript gravity fall and elasticity effect in the form of examples. Friends in need can refer to this article

The example describes the method of realizing gravity drop and elastic effects in JavaScript. Share it with everyone for your reference, the details are as follows:

Here we use JS language to achieve the effect of bouncing up after falling to the ground under the action of gravity in the Html page, as shown below:

This example mainly involves the following issues:

1. Give the sphere an initial release velocity, how to achieve downward movement and before contacting the edge, in the vertical direction What is the effect of a larger speed speedY? Answer: This can be achieved by incrementing the vertical speed speedY by a fixed value every time in the timer. In the following code, speedY = 6; achieves this effect.

2. How to achieve the speed reverse effect after the sphere touches the ground (in this case, the lower edge of the browser)? Answer: After touching the ground, just set the directional speed to the opposite direction of the current speed. The condition in the code if (iW >= w||iW e0cbb08b84be660bc6c9dab0ab154283= h||iH <= 0){speedY = -speedY;} means that the speed is reversed after contacting the edge in the Y direction.

3. After the sphere touches the ground and rebounds, how to achieve the effect that the height of the sphere rising again is lower than the previous height? Answer: After touching the ground, the speed becomes negative, the timer starts to execute the next interval, and speedY = 6 is immediately executed. The bounce speed immediately decreases by 6, and its size is smaller than the moment before touching the ground. Therefore the sphere will not bounce back to its original height.

4. How to achieve the effect that the absolute value of the speed in the vertical direction of the sphere becomes smaller and smaller until it approaches 0? Answer: In fact, just use speedY = 6; in this example, the speed speedY in the vertical direction cannot reach 0, because under the premise that the initial speed is set in this function, the landing speed at a certain time cannot be 6 ( The result of each execution of the subsequent printing speed can be determined), so the next execution cannot be 0, so how exactly is the effect of falling to the ground stationary achieved? In fact, when the speedY increase value is set to 6, when the ball hits the ground at a certain moment, its speed is any one of 1, 2, 3, 4, and 5. After adding 6, the instantaneous rebound speed is - 5, -4, -3, -2, -1. After a timer period (30 milliseconds in this example), the speed will become 1, 2, 3, 4, 5 immediately after adding 6, and the next time the speed will become -5, -4, -3, -2, -1..., since speedY = 6 is at the head of the timer, the final result will always stay at -5, -4 before adding 6 , -3, -2, -1. Any value, and the timer is always dynamic, and the final sphere is displayed at the bottom.

5. When the sphere is released, it also has a lateral speed speedX. How to make the lateral speed gradually decrease to 0? Answer: In this example, the collision in the x direction does not need to be considered, so speedX can be multiplied by a number less than 1 for each timing, and the final speedX value will approach 0 infinitely, showing that it is stationary.
How to prevent the scroll bar from appearing when dragging the window?
Answer: After dragging the browser window, just set a new motion range for the sphere.

The implementation code and analysis are as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>弹性运动</title>
    <style type="text/css">
      #p {
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //window.onload表示等页面标签内容加载完之后再加载window.onload里面的内容
      window.onload = function(){
        //分别设置p在x和y方向的的初速度
        var speedX = 2;
        var speedY = 3;
        //获取p标签
        var p = document.getElementById("p");
        //获取按钮
        var btn = document.getElementById("btn");
        //定义点击事件
        btn.onclick = function(){
          startMove();
        };
        //定义一个空的定时器，防止上次事件定时器的返回值叠加
        var timer = null;
        //定义点击事件函数
        function startMove(){
          //内部清空计时器，防止上次返回值叠加
          clearInterval(timer);
          //设置计时器
          timer = setInterval(function(){
            //竖直方向上反向运动时速度为负值，为了达到反弹逐渐速度逐渐减小的效果，可以在向下碰撞后速度加上一个正值
            speedY += 6;
            //分别获取p距离左边距和上边距的动态距离
            var iW = p.offsetLeft + speedX;
            var iH = p.offsetTop + speedY;
            //获取p水平方向运动的最大距离，即不包含边框的浏览器窗口的宽度clientWidth减去p的宽度
            var w = document.documentElement.clientWidth - p.offsetWidth;
            //获取p垂直方向运动的最大距离
            var h = document.documentElement.clientHeight - p.offsetHeight;
            //当动态宽度达到p最大运动宽度范围时，立刻转换速度为反方向负值，同时把w的值负值给iw，因为w是可视窗口范围，当w缩小时，iw保存的还是上一次窗口条件下的距离左边距的距离
            if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
            //当动态高度达到p最大运动高度范围时，立刻转向速度，同时将x方向速度乘以0.8，使之速度逐渐减小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
            //由于p.style.left和p.style.top还储存这上一次或第一次的计时后的值，此次计时后应把新的值储存起来，使p出现动态效果
            p.style.left = iW + "px";
            p.style.top = iH + "px";
            console.log(speedX);
          },30);
        }
      }
    </script>
    <input type="button" name="btn" id="btn" value="开始运动" />
    <p id="p"></p>
  </body>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement JSON data grouping optimization in Javascript

How to use axios to implement the function of uploading pictures with a progress bar

How to use the Validate plug-in in jQuery

The above is the detailed content of How to achieve elastic effects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement cookie cross-domain in axiosNext article：How to implement cookie cross-domain in axios

See more

How to achieve elastic effects in JavaScript

Related articles