主页 / 问题 / 1109280
Accepted
user380202
Asked:2020-04-12 21:44:49 +0000 UTC2020-04-12 21:44:49 +0000 UTC

球从方块边界的边缘反弹？

  • 772

父块中有一个球：

body {
  background: black;
}

.box {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  border-radius: 5px;
  box-shadow: inset 0 0 2px black;
  background-color: white;
}

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5), 15px 15px 2px rgba(0, 0, 0, .05);
}
<div class="box">
  <div class="ball"></div>
</div>

我怎样才能让它无限期地移动并从这个块的边界边缘反弹？

javascript

3 个回答

  1. Best Answer
    if(шарик.x < 0 || шарик.x > контейнер.width - шарик.width) {
  скорость шарика по оси X умножаем на -1
}

if(шарик.y < 0 || шарик.y > контейнер.height - шарик.height) {
  скорость шарика по оси Y умножаем на -1
}


    const container_info = {
  w: container.getBoundingClientRect().width,
  h: container.getBoundingClientRect().height
}

const ball_info = { 
  x:0,y:0, vx:4,vy:4,
  w: ball.getBoundingClientRect().width,
  h: ball.getBoundingClientRect().height
}

function updatePositionInformation(info) {
  info.x += info.vx
  info.y += info.vy
}

function translateDomElement(el, info) {
  el.style.transform = `translate(${info.x}px, ${info.y}px)`
}

function checkXPosition(el_info, container_info) {
  return el_info.x < 0 || el_info.x > container_info.w - el_info.w
}

function checkYPosition(el_info, container_info) {
  return el_info.y < 0 || el_info.y > container_info.h - el_info.h
}

function boundaries(el_info, x_out, y_out) {
  if(x_out) el_info.vx *= -1
  if(y_out) el_info.vy *= -1
}

function render() {
  updatePositionInformation(ball_info)
  translateDomElement(ball, ball_info)
  
  boundaries(
    ball_info,
    checkXPosition(ball_info, container_info),
    checkYPosition(ball_info, container_info),
  )
  
  requestAnimationFrame(render)
}

render()
    body {
  height: 100vh;
  margin: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: black;
}

#container {
  position: relative;
  
  width: 250px;
  height: 150px;
  
  background-color: white;
}

#ball {
  position: absolute;
  
  width: 15px;
  height: 15px;
  
  border-radius: 50%;
  background-color: black;
}
    <div id=container> <div id=ball></div> </div>

    • 12

  2. 嗯...为什么不在 CSS 中做呢？只需添加两行动画：

    body {
  background: black;
}

.box {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  border-radius: 5px;
  box-shadow: inset 0 0 2px black;
  background-color: white;
}

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5), 15px 15px 2px rgba(0, 0, 0, .05);
  animation: moveX 3s linear 0s infinite alternate, moveY 3.5s linear 0s infinite alternate;
}

@keyframes moveX {from {left: 0;} to {left: 480px;}}
@keyframes moveY {from {top: 0;} to {top: 280px;}}
    <div class="box"><div class="ball"></div></div>

    • 11

  3. 为什么不在 SVG 中做呢？ 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" height="100vh" viewBox="0 0 400 400">

<rect width="100%" height="100%" rx="25"  fill="green" stroke="#9D8500" stroke-width="15"/>
<circle cx="50%" cy="20%" r="3%" fill="url(#gradB)" >

 <animate attributeName="cx" dur="3" values="3%;97%;3%"  
   repeatCount="indefinite" /> 
 <animate attributeName="cy" dur="2.8" values="3%;97%;3%"  
   repeatCount="indefinite" />
</circle>

<circle cx="30%" cy="70%" r="3%" fill="url(#gradR)" >

 <animate attributeName="cx" dur="2.7" values="97%;3%;97%"  
   repeatCount="indefinite" /> 
 <animate attributeName="cy" dur="3.1" values="3%;97%;3%"  
   repeatCount="indefinite" />
</circle>

 <radialGradient id="gradB" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
   <stop stop-color="white" offset="0"/>
   <stop stop-color="blue" offset="25%"/>
   <stop stop-color="rgb(0,0,192)" offset="50%"/>
   <stop stop-color="rgb(0,0,127)" offset="70%"/>
   <stop stop-color="rgb(0,0,64)" offset="85%"/>
   <stop stop-color="rgb(0,0,0)" offset="100%"/>
 </radialGradient>

 <radialGradient id="gradR" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
   <stop stop-color="white" offset="0"/>
   <stop stop-color="red" offset="25%"/>
   <stop stop-color="rgb(192,0,0)" offset="50%"/>
   <stop stop-color="rgb(127,0,0)" offset="70%"/>
   <stop stop-color="rgb(64,0,0)" offset="85%"/>
   <stop stop-color="rgb(0,0,0)" offset="100%"/>
 </radialGradient>

</svg>

    • 8

相关问题