使用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 ..... – 2016-08-23 13:02:57

这可以帮助你..

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的球动画

回答

相关问题