如何在到达屏幕上的某个点时水平翻转运动图像

Question

概览

对于我的学校项目，我必须在 HTML、CSS 和 Javascript 中创建动画。我刚刚开始学习如何编码，因此对这类项目还很陌生。我已经能够让马里奥的图像在屏幕上移动然后移动回来，但我希望图像在到达容器的开始和结束时翻转。我不知道该怎么做，如果有人能帮助我，我将不胜感激。

var objX = 0;
var change = 10;

function moveBlock() {
  var obj = document.getElementById("object");
  if ((objX + 251) > 1100) {
    change = -10;

  } else if (objX == 0) {
    change = 10;
  }
  objX = objX + change;
  obj.style.left = objX + "px";
}

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#grass {
  width: 1100px;
  height: 100px;
  margin-top: 0px;
  position: relative;
  background-color: green;
}

#container {
  width: 1100px;
  height: 320px;
  margin-top: 0px;
  position: relative;
  background-color: white;
}

#object {
  width: 251px;
  height: 320px;
  margin-top: 0px;
  position: absolute;
  background-image: url("https://i.stack.imgur.com/e7Hib.png")
}

<h1>Layers and animation</h1>
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<div id="container">
  <div id="object"></div>
</div>
<div id="grass"></div>
<br/>
<button onclick="setInterval(moveBlock, 25)">Click Me</button>

https://i.stack.imgur.com/e7Hib.png

Answer 1

希望以下片段对您有所帮助，如有任何疑问，请随时提出。

const img = document.getElementById('img');
const container = img.parentElement;

let left = 0;
let sign = 1;

let ticking = false;

img.style.left = `${left}px`;
img.style.transform = `scaleX(${sign})`;

function translate() {
  // YOU CAN CHANGE THE SPEED BY CHANGING THIS.
  left += sign * 10;
    
  if (left + img.offsetWidth >= container.clientWidth) {
    // CASE: RIGHT LIMIT.
    left = container.clientWidth - img.offsetWidth;
    sign *= -1;
  } else if (left <= 0) {
    // CASE: LEFT LIMIT.
    left = 0;
    sign *= -1;
  }
    
  if (ticking) {
    return;
  }
  
  // THIS WILL RUN THE CALLBACK WHEN THE BROWSER IS READY TO DO A REPAINT. (JUST A PERFORMANCE IMPROVEMENT)
  requestAnimationFrame(() => { 
    img.style.left = `${left}px`;
    img.style.transform = `scaleX(${sign})`;
    
    ticking = false;
  });
  
  ticking = true;
}

setInterval(translate, 10);

#img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s linear;
}

<img id='img' src='https://i.imgur.com/kDDFvUp.png' />

如何在到达屏幕上的某个点时水平翻转运动图像

How to flip a moving image horizontally when it reaches a certain point on the screen

html

javascript

css

flip