Comment obtenir l'effet de battement de balle en javascript

Cette fois, je vais vous montrer comment obtenir l'effet rebondissant de petites balles en utilisant javascript. Quelles sont les précautions à prendre pour utiliser javascript pour obtenir l'effet rebondissant de petites balles ? Voici un cas pratique.

Ce que nous présentons aujourd'hui est un effet d'animation sympa obtenu grâce à javascript. Je vais vous montrer les effets spécifiques à travers des images

---

---

. Après avoir été relâchées, ces petites boules se déplaceront dans une plage spécifiée. La partie la plus critique est que les différents styles de ces petites boules sont obtenus de manière aléatoire, donc un effet sympa apparaît. Principalement Le code utilisé pour générer des nombres aléatoires est le suivant :

//获取一个范围内的随机数random返回一个大于0小于1的一个随机数 
            function selectFrom(Lowervalue,upperValue){ 
                var choices=upperValue-Lowervalue+1; 
                return Math.floor(Math.random()*choices+Lowervalue); 
            }

Après cela, les différents styles de ces petites boules sont obtenus grâce à des fonctions aléatoires. La partie restante concerne le positionnement. Chaque petite boule est un p, qui sont toutes positionnées de manière absolue, utilisez offsetLeft pour obtenir la position. de ces petites boules par rapport au conteneur parent pour les empêcher de sortir de la limite. Tant que la méthode d'implémentation consiste à obtenir la position relative du p via offsetLeft, alors jugez si la période actuelle s'est déplacée vers la limite. , laissez la vitesse de p égale à l'inverse de la vitesse,

        //设置运行速度
            Circle.prototype.run=function(){
                var maxLeft=1435-this.r*2;                var maxTop=700-this.r*2;                var that=this;                //使用间隔式计时器
                setInterval(function(){
                    var left=that.p.offsetLeft + that.speedX;                    var top=that.p.offsetTop + that.speedY;                    if(left<=0)
                    {
                        left=0;
                        that.speedX *=-1;
                    }                    if(top<=0)
                    {
                        top=0;
                        that.speedY *=-1;
                    }                    if(left>=maxLeft)
                    {
                        left=maxLeft;
                        that.speedX*=-1;
                    }                    if(top>=maxTop)
                    {
                        top=maxTop;
                        that.speedY*=-1;
                    }
                    that.p.style.left=left+"px";
                    that.p.style.top=top+"px";
                },30)
            }

Ensuite, vous pouvez voir l'effet de ces flippers se déplaçant dans une plage :

---

---

Le code complet pour l'ensemble de l'effet est le suivant :

Cela implique également l'utilisation de this. Lorsque vous utilisez une autre fonction à l'intérieur d'une fonction, vous devez Déterminer. la portée de la fonction actuelle et distinguer la portée indiquée par ceci. Lors d'un appel en interne, vous pouvez utiliser des variables en externe pour enregistrer la portée indiquée par ceci. J'espère que cela sera utile à votre étude.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Solutions aux problèmes courants de compatibilité CSS

Problèmes de compatibilité du navigateur Web frontal Solution

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!