javascript - 平滑地动画封面大小的背景

Question

我想做一个背景动画。之前我使用了以下简单的 CSS 解决方案:

#splash {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 2em solid #232323;
  border-bottom: 2em solid #232323;
  background-image: url("../img/splash.jpg");
  background-size: cover;
  background-position: 0 100%;
  animation: moveSplash 15s ease-in-out infinite alternate;
  -moz-animation: moveSplash 15s ease-in-out infinite alternate;
  -webkit-animation: moveSplash 15s ease-in-out infinite alternate;
  /* Safari 4.0 - 8.0 */
  transition: opacity .5s;
  z-index: 1;
}

@keyframes moveSplash {
    from {
        background-position-y: 100%;
        background-position-x: 0%;
    }
    to {
        background-position-y: 0%;
        background-position-x: 100%;
    }
}

哪个工作得很好:

• 每当屏幕宽度大于高度时，背景图片开始从底部移动到顶部，并且与窗口的宽度相同
• 每当屏幕的高度大于宽度时，背景图片开始从左向右移动，并且与窗口的高度相同

但是，这种方法有一个主要问题:动画非常跳跃，这就是为什么我开始使用 transition 和 transform: translate() ，但后来我无法使图像完美贴合。

是否有任何解决方法可以实现平滑的背景图像动画，使其保持封面大小？

另一个解决方案可能是将图像的宽度和高度设置为100%，以及对象-适合到覆盖。在此之后，我需要通过 Javascript 或 jQuery 获取图像的计算新尺寸，但是，我尝试了 .width、.naturalWidth、.offsetWidth、.clientWidth，它们返回 0。当我尝试这样做时:

var oImg = document.getElementById('splash');

window.getComputedStyle(oImg).transformOrigin.split(' ')[0].replace('px', '')
window.getComputedStyle(oImg).transformOrigin.split(' ')[1].replace('px', '')

我得到窗口的尺寸(因为对象的宽度和高度设置为 100%)，而不是调整后图像的新尺寸。如果我可以获得图像的新尺寸，我可以进行计算以找到最大 X 和 Y 值。

知道如何让这个动画流畅地运行吗？

Answer 1

与其在 background-image 本身上执行动画，这很慢，我建议为整个元素设置动画。

据我所知，您正在尝试对 Angular 线设置背景动画？不是水平的也不是垂直的？

@keyframes moveSplash {
    from {
        transform: translateY(100%);
        transform: translateX(0%);
    }
    to {
       transform: translateY(0%);
        transform: translateX(100%);
    }
}

如果您在使用翻译时不能使图像完全适合 div，那么这也许就是您真正应该问的问题，因为在 背景上执行转换有点“非常规” -image (因为它很慢)而不是整个元素(这样可以更好地利用可用内存，因此，速度更快)。