主页 / 问题 / 1368169
Accepted
DiD
Asked:2022-06-03 22:53:26 +0000 UTC2022-06-03 22:53:26 +0000 UTC

使用 CSS 和 JS 对已转换元素的旋转进行动画处理

  • 772

在一个简单的 html 页面上，我使用按钮来旋转图像。"повернуть по часовой"如果仅使用和按钮"повернуть против часовой"旋转图像，则图像正常旋转。但是如果你先按下，例如，"отразить по вертикали"然后在按钮上"повернуть по часовой"，"повернуть против часовой"图像旋转正确，但旋转动画有点失真。是否可以在不为每个转换编写逐帧动画的情况下快速解决此问题？

function disableButtons() {
  document.body.classList.add('disabled');
  setTimeout(() => document.body.classList.remove('disabled'), 1000);
}

rotate90.onclick = () => {
  disableButtons();
  let current = getComputedStyle(img).transform;
  if (current == 'none') current = '';
  img.style.transform = current + ' rotate(90deg)';
}

rotate270.onclick = () => {
  disableButtons();
  let current = getComputedStyle(img).transform;
  if (current == 'none') current = '';
  img.style.transform = current + ' rotate(-90deg)';
}

flipX.onclick = () => {
  disableButtons();
  let current = getComputedStyle(img).transform;
  if (current == 'none') current = '';
  img.style.transform = current + ' scaleY(-1)';
}

flipY.onclick = () => {
  disableButtons();
  let current = getComputedStyle(img).transform;
  if (current == 'none') current = '';
  img.style.transform = current + ' scaleX(-1)';
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

div {
  float: left;
  clear: right;
  width: max-content;
}

div button {
  display: block;
  width: 100%;
  user-select: none;
  margin: .3rem;
  border: 2px solid #f0f;
  cursor: pointer;
}

body {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" fill="gray" stroke="none"><rect x="0" y="0" width="1" height="1"/><rect x="1" y="1" width="1" height="1"/></svg>') 16px/16px repeat;
  perspective: 100vh;
}

img,
.disabled * {
  pointer-events: none;
}

.disabled button {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

.disabled button:hover {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

img {
  transition: all 1000ms linear;
  position: relative;
  user-select: none;
  will-change: transform;
}
<div>
  <button id="rotate90">повернуть<br>по часовой</button>
  <button id="rotate270">повернуть<br>против часовой</button>
  <button id="flipX">отразить<br>по вертикали</button>
  <button id="flipY">отразить<br>по горизонтали</button>
</div>
<img id='img' src="https://images.unsplash.com/photo-1602251573001-a27aafb64d64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OXxxUFlzRHp2Sk9ZY3x8ZW58MHx8fHw%3D&auto=format&fit=crop&h=200&q=60" />

javascript

2 个回答

  1. Best Answer

    您只需要定义状态并更改它。那么就不会有根据过去的动作绘制的动画了

    const state = {
  rotate: 0,
  scaleX: 1,
  scaleY: 1,
  translateX: 0,
  translateY: 0,
};

function transformImage({ rotate, scaleY, scaleX, translateX, translateY }) {
  disableButtons();
  state.rotate += rotate || 0;
  state.scaleX *= scaleX || 1;
  state.scaleY *= scaleY || 1;
  state.translateX += translateX || 0;
  state.translateY += translateY || 0;
  img.style.transform = `translateX(${state.translateX}px) translateY(${state.translateY}px) rotate(${state.rotate}deg) scaleY(${state.scaleY}) scaleX(${state.scaleX})`;
}

function disableButtons() {
  document.body.classList.add('disabled');
  setTimeout(() => document.body.classList.remove('disabled'), 1000);
}

rotate90.onclick = () => transformImage({ rotate: -90 });
rotate270.onclick = () => transformImage({ rotate: 90 });
flipX.onclick = () => transformImage({ scaleX: -1 });
flipY.onclick = () => transformImage({ scaleY: -1 });
zoomOut.onclick = () => transformImage({ scaleX: 0.5, scaleY: 0.5 });
zoomIn.onclick = () => transformImage({ scaleX: 2, scaleY: 2 });
moveTop.onclick = () => transformImage({ translateY: -100 });
moveBottom.onclick = () => transformImage({ translateY: 100 });
moveLeft.onclick = () => transformImage({ translateX: -100 });
moveRight.onclick = () => transformImage({ translateX: 100 });
    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

div {
  float: left;
  clear: right;
  width: max-content;
}

div button {
  display: block;
  width: 100%;
  user-select: none;
  margin: .3rem;
  border: 2px solid #f0f;
  cursor: pointer;
}

body {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" fill="gray" stroke="none"><rect x="0" y="0" width="1" height="1"/><rect x="1" y="1" width="1" height="1"/></svg>') 16px/16px repeat;
  perspective: 100vh;
}

img,
.disabled * {
  pointer-events: none;
}

.disabled button {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

.disabled button:hover {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

img {
  transition: all 1000ms linear;
  position: relative;
  user-select: none;
  will-change: transform;
}
    <div>
  <button id="rotate90">повернуть<br>по часовой</button>
  <button id="rotate270">повернуть<br>против часовой</button>
  <button id="flipX">отразить<br>по вертикали</button>
  <button id="flipY">отразить<br>по горизонтали</button>
  <button id="zoomIn">Увеличить</button>
  <button id="zoomOut">Уменшить</button>
  <button id="moveTop">Top</button>
  <button id="moveBottom">Bottom</button>
  <button id="moveLeft">Left</button>
  <button id="moveRight">Right</button>
</div>
<img id='img' src="https://images.unsplash.com/photo-1602251573001-a27aafb64d64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OXxxUFlzRHp2Sk9ZY3x8ZW58MHx8fHw%3D&auto=format&fit=crop&h=200&q=60" />

    • 4

  2. 通过明确指定要转换的内容以及从何处转换来帮助浏览器：

    function disableButtons() {
  document.body.classList.add('disabled');
  setTimeout(() => document.body.classList.remove('disabled'), 1000);
}

function pushTransform(f, neutral, desired) {
  disableButtons();
  let current = getComputedStyle(img).transform;
  if (current === 'none') current = '';
  img.style.transition = "none";
  img.style.transform = `${current} ${f}(${neutral})`;
  getComputedStyle(img).transform;
  img.style.transition = "";
  img.style.transform = `${current} ${f}(${desired})`;
}

rotate90.onclick  = () => { pushTransform('rotate', '0deg', '90deg')  }
rotate270.onclick = () => { pushTransform('rotate', '0deg', '-90deg') }
flipX.onclick     = () => { pushTransform('scaleY', '1',    '-1')     }
flipY.onclick     = () => { pushTransform('scaleX', '1',    '-1')     }
    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

div {
  float: left;
  clear: right;
  width: max-content;
}

div button {
  display: block;
  width: 100%;
  user-select: none;
  margin: .3rem;
  border: 2px solid #f0f;
  cursor: pointer;
}

body {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" fill="gray" stroke="none"><rect x="0" y="0" width="1" height="1"/><rect x="1" y="1" width="1" height="1"/></svg>') 16px/16px repeat;
  perspective: 100vh;
}

img,
.disabled * {
  pointer-events: none;
}

.disabled button {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

.disabled button:hover {
  color: #666;
  background: #ddd;
  border: 2px solid #444;
}

img {
  transition: all 1000ms linear;
  position: relative;
  user-select: none;
  will-change: transform;
}
    <div>
  <button id="rotate90">повернуть<br>по часовой</button>
  <button id="rotate270">повернуть<br>против часовой</button>
  <button id="flipX">отразить<br>по вертикали</button>
  <button id="flipY">отразить<br>по горизонтали</button>
</div>
<img id='img' src="https://images.unsplash.com/photo-1602251573001-a27aafb64d64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OXxxUFlzRHp2Sk9ZY3x8ZW58MHx8fHw%3D&auto=format&fit=crop&h=200&q=60" />

    • 1

相关问题