Javascript 动画在 Safari 14 中无法正常工作

时间:2021-01-13 16:42:40

标签: javascript animation safari

对于投资组合网站,我使用的是我发现的代码片段 here,一种 DVD 动画。由于我在 Mac OS Big Sur 上安装了 Safari 14,动画无法正常工作。它似乎留下了一些运动的痕迹。有人知道这个问题吗?我该如何解决?非常感谢。

Here is a screen cap on Chrome Here is a screen cap on Safari 14

这是我的动画js:

//Constants
const section = document.getElementById("anim_jtm");
const logo = document.getElementById("logo");
const body = document.getElementById("body");
section.style.height = body.clientHeight + "px";
section.style.width = body.clientWidth + "px";

// Logo moving velocity Variables
let xPosition = 10;
let yPosition = 10;
let xSpeed = 0.7;
let ySpeed = 0.7;

function update() {
  logo.style.left = xPosition + "px";
  logo.style.top = yPosition + "px";
}

setInterval(() => {
  if (xPosition + logo.clientWidth >= body.clientWidth || xPosition <= 0) {
    xSpeed = -xSpeed;
    logo.style.fill = randomColor();
  }
  if (yPosition + logo.clientHeight >= body.clientHeight || yPosition <= 0) {
    ySpeed = -ySpeed;
    logo.style.fill = randomColor();
  }

  xPosition += xSpeed;
  yPosition += ySpeed;
  update();
}, 1);

function randomColor() {
  let color = "#";
  color += Math.random().toString(16).slice(2, 8).toUpperCase();

  return color;
}

window.addEventListener("resize", () => {
  xPosition = 10;
  yPosition = 10;

  section.style.height = body.clientHeight + "px";
  section.style.width = body.clientWidth + "px";
});

0 个答案:

没有答案