当移动图像到达屏幕上的某个点时如何水平翻转它

问题描述

概述

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

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

解决方法

我希望下面的代码片段能有所帮助，如果有任何疑问，请不要犹豫，询问。

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' />