Comment obtenir des effets élastiques en JavaScript

Cet article présente principalement la méthode de réalisation des effets de chute gravitationnelle et d'élasticité en JavaScript. Il analyse les principes et les techniques spécifiques de mise en œuvre des effets de chute gravitationnelle et d'élasticité JavaScript sous forme d'exemples. Les amis dans le besoin peuvent se référer à cet article

L'exemple décrit la méthode de réalisation des chutes gravitationnelles et des effets élastiques en JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, le langage JS est utilisé pour obtenir l'effet de rebondir après être tombé au sol sous l'action de la gravité dans la page HTML, comme indiqué ci-dessous :

Cet exemple implique principalement les questions suivantes :

1. Donner à la sphère une vitesse de libération initiale, comment réaliser un mouvement vers le bas et. avant d'entrer en contact avec le bord, dans le sens vertical. Quel est l'effet d'une vitesse speedY plus élevée ? Réponse : Ceci peut être obtenu en incrémentant la vitesse verticale speedY d'une valeur fixe à chaque fois dans la minuterie. Dans le code suivant, speedY += 6 ;

2. Comment obtenir l'effet d'inversion de vitesse après que la sphère touche le sol (dans ce cas, le bord inférieur du navigateur) ? Réponse : Après avoir touché le sol, réglez simplement la vitesse directionnelle dans la direction opposée à la vitesse actuelle. La condition dans le code if (iW >= w||iW 5ccfdb98b83d2f98cdfc265934207fab= h||iH <= 0){speedY = -speedY;} signifie que le la vitesse est inversée après avoir contacté le bord dans la direction Y.

3. Une fois que la balle a rebondi sur le sol, comment obtenir l'effet de rendre la hauteur de montée à nouveau inférieure à la hauteur précédente ? Réponse : Après avoir touché le sol, la vitesse devient négative, le chronomètre commence à exécuter l'intervalle suivant, speedY += 6 est exécuté immédiatement, la vitesse de rebond est immédiatement réduite de 6 et sa taille est plus petite que l'instant précédent toucher le sol, afin que la sphère ne rebondisse pas à sa hauteur d'origine.

4. Comment obtenir l'effet que la valeur absolue de la vitesse dans la direction verticale de la sphère devient de plus en plus petite jusqu'à ce qu'elle se rapproche de 0 ? Réponse : En fait, utilisez uniquement speedY += 6 ; dans cet exemple, la vitesse speedY dans le sens vertical ne peut pas atteindre 0, car en partant du principe que la vitesse initiale est définie dans cette fonction, la vitesse d'un certain atterrissage ne peut pas être 6 (la vitesse d'impression peut être déterminée par le résultat de chaque exécution ultérieurement), donc la prochaine exécution ne peut pas être 0, alors comment exactement l'effet de chute au sol stationnaire est-il obtenu ? En fait, lorsque la valeur d'augmentation de la vitesseY est fixée à 6, lorsque la balle atterrit à un certain moment, sa vitesse est l'une des valeurs 1, 2, 3, 4 et 5. Après avoir ajouté 6, la vitesse de rebond instantanée est de - 5. , -4, -3, -2, -1. Après une période de minuterie (30 millisecondes dans cet exemple), la vitesse deviendra 1, 2, 3, 4, 5 immédiatement après avoir ajouté 6, et la prochaine fois, la vitesse deviendra devient -5, -4, -3, -2, -1..., puisque speedY += 6 est en tête du timer, le résultat final sera toujours bloqué à -5, - avant d'ajouter 6 N'importe quelle valeur parmi 4, -3, -2, -1., et la minuterie est toujours dynamique, et la sphère finale est affichée en bas.

5. Lorsque la sphère est relâchée, elle a également une vitesse latérale speedX Comment faire diminuer progressivement la vitesse latérale jusqu'à 0 ? Réponse : Dans cet exemple, il n'est pas nécessaire de considérer la collision dans la direction x, donc speedX peut être multiplié par un nombre inférieur à 1 à chaque fois, et la valeur finale de speedX se rapprochera de 0 à l'infini, montrant qu'elle est stationnaire. Comment empêcher les barres de défilement d'apparaître lorsque vous faites glisser une fenêtre ?
Réponse : Après avoir fait glisser la fenêtre du navigateur, définissez une nouvelle plage de mouvement pour la sphère.

Le code d'implémentation et l'analyse sont les suivants :

<!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>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter l'optimisation du regroupement de données JSON en Javascript

Comment utiliser axios pour implémenter la fonction de téléchargement d'images avec une barre de progression

Comment utiliser le plug-in Validate dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!