JavaScriptを使用したボールアニメーション

javascriptを使ってアニメーションしました。単一のボールの形を使用すると、ページの上部に移動します。誰もがクローンのような複数のボールを作成する方法役立つだろう..私はただ、次の作業をしたい...JavaScriptを使用したボールアニメーション

複数のボールとアニメーション（下から上に）
各ボールの位置（のみ左位置）ランダムです。
無限プロセス。

javascriptで実現できますか？事前:)

.circle{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 30px; 
 
    position: absolute; 
 
    bottom: -60px; 
 
    left: 2px; 
 
    transition: 0.1s; 
 
} 
 
body{ 
 
    overflow: hidden; 
 
    position: relative; 
 
    background: violet 
 
} 
 
#box{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    
 
    <div id="box"></div> 
 
    <script type="text/javascript"> 
 
     var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet']; 
 
var windowHeight = 0; 
 
var parendElement; 
 
window.onload = function() { 
 
    parendElement = document.getElementById("box"); 
 
    windowHeight = window.innerHeight; 
 
    document.body.style.height = windowHeight + "px"; 
 
    console.log(document.body.style.height); 
 
    generateBall(); 
 
}; 
 
function generateBall() { 
 
    
 
    var leftPos = Math.floor((Math.random() * window.innerWidth) - 30); 
 
    var para = document.createElement("p"); 
 
    para.setAttribute("class", 'circle'); 
 
    para.style.background = colors[Math.floor(Math.random() * colors.length)]; 
 
    para.style.left = leftPos + "px"; 
 
    parendElement.appendChild(para); 
 
    var btmPos = 0; 
 
    var animationInterval = setInterval(function() { 
 
     if (btmPos < windowHeight) { 
 
      btmPos += 5; 
 
     } else { 
 
      console.log("yes"); 
 
      clearInterval(animationInterval); 
 
      parendElement.removeChild(para); 
 
     } 
 
     para.style.bottom = btmPos + "px"; 
 
     para.style.left = leftPos + "px"; 
 
    }, 100); 
 
} 
 
    </script> 
 
</body>

出典

2016-08-23 Prasath V

を、あなたは何を試してみましたか？どこから始めたらいいかわからない場合は、その事柄についてあなたの思考プロセスを列記してください。 –

私は何を試したのか投稿しました。今私は複数のボールのためにランダムに（左）の位置を設定するために苦労している.. –

はちょうどこのコード
var interval = setInterval(function() { generateBall(); }, 1000);

を追加します

をwindow.onload()に入力してください。それは動作します:)あなたのタスクに関して..

.circle{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 30px; 
 
    position: absolute; 
 
    bottom: -60px; 
 
    left: 2px; 
 
    transition: 0.1s; 
 
} 
 
body{ 
 
    overflow: hidden; 
 
    position: relative; 
 
    background: violet 
 
} 
 
#box{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    
 
    <div id="box"></div> 
 
    <script type="text/javascript"> 
 
     var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet']; 
 
var windowHeight = 0; 
 
var parendElement; 
 
window.onload = function() { 
 
    parendElement = document.getElementById("box"); 
 
    windowHeight = window.innerHeight; 
 
    document.body.style.height = windowHeight + "px"; 
 
    console.log(document.body.style.height); 
 
    generateBall(); 
 
    
 
    //Creates ball for every 1 second interval 
 
    var interval = setInterval(function() { 
 
     generateBall(); 
 
    }, 1000); 
 
}; 
 
function generateBall() { 
 
    
 
    var leftPos = Math.floor((Math.random() * window.innerWidth) - 30); 
 
    var para = document.createElement("p"); 
 
    para.setAttribute("class", 'circle'); 
 
    para.style.background = colors[Math.floor(Math.random() * colors.length)]; 
 
    para.style.left = leftPos + "px"; 
 
    parendElement.appendChild(para); 
 
    var btmPos = 0; 
 
    var animationInterval = setInterval(function() { 
 
     if (btmPos < windowHeight) { 
 
      btmPos += 5; 
 
     } else { 
 
      console.log("yes"); 
 
      clearInterval(animationInterval); 
 
      parendElement.removeChild(para); 
 
     } 
 
     para.style.bottom = btmPos + "px"; 
 
     para.style.left = leftPos + "px"; 
 
    }, 100); 
 
} 
 
    </script> 
 
</body>

出典

2016-08-23 12:29:39

パーフェクト..ありがとう:) –

ようこそ：D ..... –

これはあなたを助けるかもしれないのおかげで...

var canvas = { 
 
    element: document.getElementById('canvas'), 
 
    width: 600, 
 
    height: 400, 
 
    initialize: function() { 
 
     this.element.style.width = this.width + 'px'; 
 
     this.element.style.height = this.height + 'px'; 
 
     document.body.appendChild(this.element); 
 
    } 
 
}; 
 

 
var Ball = { 
 
    create: function (color, dx, dy) { 
 
     var newBall = Object.create(this); 
 
     newBall.dx = dx; 
 
     newBall.dy = dy; 
 
     newBall.width = 40; 
 
     newBall.height = 40; 
 
     newBall.element = document.createElement('div'); 
 
     newBall.element.style.backgroundColor = color; 
 
     newBall.element.style.width = newBall.width + 'px'; 
 
     newBall.element.style.height = newBall.height + 'px'; 
 
     newBall.element.className += ' ball'; 
 
     newBall.width = parseInt(newBall.element.style.width); 
 
     newBall.height = parseInt(newBall.element.style.height); 
 
     canvas.element.appendChild(newBall.element); 
 
     return newBall; 
 
    }, 
 
    moveTo: function (x, y) { 
 
     this.element.style.left = x + 'px'; 
 
     this.element.style.top = y + 'px'; 
 
    }, 
 
    changeDirectionIfNecessary: function (x, y) { 
 
     if (x < 0 || x > canvas.width - this.width) { 
 
      this.dx = -this.dx; 
 
     } 
 
     if (y < 0 || y > canvas.height - this.height) { 
 
      this.dy = -this.dy; 
 
     } 
 
    }, 
 
    draw: function (x, y) { 
 
     this.moveTo(x, y); 
 
     var ball = this; 
 
     setTimeout(function() { 
 
      ball.changeDirectionIfNecessary(x, y); 
 
      ball.draw(x + ball.dx, y + ball.dy); 
 
     }, 1000/60); 
 
    } 
 
}; 
 

 
canvas.initialize(); 
 
var ball1 = Ball.create("blue", 4, 3); 
 
var ball2 = Ball.create("red", 1, 5); 
 
var ball3 = Ball.create("green", 2, 2); 
 
ball1.draw(70, 0); 
 
ball2.draw(20, 200); 
 
ball3.draw(300, 330);

body { 
 
    text-align: center; 
 
} 
 
#canvas { 
 
    position: relative; 
 
    background-color: #ccddcc; 
 
    margin: 1em auto; 
 
} 
 
.ball { 
 
    background-color: black; 
 
    position: absolute; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
}

<h1>Bouncing Balls</h1> 
 

 
<p>These bouncing balls are made with completely raw JavaScript, 
 
    just with divs. We don't use jQuery. We don't use canvas.</p> 
 

 
<div id="canvas"></div>

出典

2016-08-23 11:23:24 Anju

JavaScriptを使用したボールアニメーション

答えて

関連する問題