背景位置的旋转效果

Question

我需要创建旋转粘贴效果。为此，我下载了 animejs。为了旋转效果，我把点放在了需要停下来的地方。

我还设置了范围，当用户看到块时，就会发生旋转。

问题是我无法调整平滑度，我需要创建一个旋转效果，但是因为background-positon，得到了移动效果

我只能使用这张图片和这张属性，我该怎么做？

Answer 1

我不确定如何在这里使用 anime.js 以及为什么，但是可以使用纯 CSS/JS 轻松完成：

const el = document.getElementById("App");

const observer = new window.IntersectionObserver(
  ([entry]) => el.classList.toggle('spin', entry.isIntersecting),
  {root: null, threshold: .2}
);

observer.observe(el);

#App {
  height: 90vh;
  width: 40.67vh;
  margin: 23em auto;
  background: url("https://i.imgur.com/EI2qVf1.jpeg") no-repeat 0 0 / 5500% 100%;
}

.spin {
  animation: spin 2s steps(54) infinite;
}

@keyframes spin {
  to {background-position: 100%}
}

Scroll down
<div id="App"></div>

背景位置的旋转效果

Rotation effect with background-positon

javascript

css

anime.js