JavaScriptでボールを叩くエフェクトを実現する方法

今回はJavaScriptでボールの跳ね返り効果を実現する方法を紹介します。以下は実際のケースです。

今日ご紹介するのは、JavaScriptで実現したクールなアニメーション効果です

---

---

リリース後、これらの小さなボールは指定された範囲内で移動します。スポーツでは、これらの小さなボールのさまざまなスタイルがランダムに取得されるため、クールな効果が表示されます。乱数を生成するために使用される主なコードは次のとおりです。

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

その後、これらの小さなボールはランダム関数によって取得されます。残りの部分は位置決めに関連しており、実装メソッドが境界からはみ出すことを防ぐために、親コンテナーに対するこれらのボールの相対的な位置が取得されます。 offsetLeft による p の相対位置、現在の境界への移動が行われたと判断されるとき、p の速度は

        //设置运行速度
            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)
            }

の反対の速度に等しくなります。範囲内でボールが移動する効果:

---

---

効果全体の完全なコードは次のとおりです:

これには、関数内で別の関数を使用する場合も含まれます。 current 関数のスコープ、this が指すスコープを区別し、内部で呼び出す場合、外部で変数を使用して this が指すスコープを保存することができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

一般的な CSS 互換性問題の解決策

ブラウザーの互換性問題に対する Web フロントエンド ソリューション

以上がJavaScriptでボールを叩くエフェクトを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。