0

我一直在使用 Web Animations API，并且发现它非常直观，可以开始使用。
从我的角度来看，我想制作一个非常简单的动画，其中一个元素沿一个方向旋转，并且在按下按钮后沿另一个方向旋转。使用标准反向方法时，动画会因为时间用完而停止。

我尝试使用 setKeyframes 方法来更改变换方向，这似乎在 Chrome 中不起作用。在我的 Firefox 开发者版中，它工作得很好......

有人可以查看我的方法并告诉我是否遗漏了什么吗？请记住，总的来说，我对 JS 很陌生。

提前致谢，
尼克拉斯

JSFiddle 与我的代码

//This is what my JS Code looks like
//I have commented out the parts that throw a error inside Chrome
var fan = document.getElementById('fan');

var cw = new KeyframeEffect(
  fan, [{
      transform: "rotate(0)"
    },
    {
      transform: "rotate(360deg)",
    }
  ], {
    // timing options
    duration: 8000,
    iterations: Infinity,
  });

//creates new Animation object and starts it in clockwise rotation
var fananim = new Animation(cw, document.timeline);

//Stops Animation so it doesnt run automatically
fananim.pause();


var clockwise = function() {
 /* cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(360deg)",
      }
    ]
  ); */
  fananim.play();
}

var counterclockwise = function() {
  /* cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(-360deg)",
      }
    ]
  ); */
  fananim.play();

  //this leads to the time running out and the animation stopping
  //fananim.reverse();
}


var stop = function() {
  fananim.pause();
}

// Click Handlers for Buttons on Control Baord
var ela = document.getElementById("cw");
ela.addEventListener("click", clockwise, false);

var elb = document.getElementById("ccw");
elb.addEventListener("click", counterclockwise, false);

var elc = document.getElementById("stop");
elc.addEventListener("click", stop, false);
4

1 回答 1

0

您是否在启用了实验性 Web 平台功能的情况下在 Chrome Canary 中进行测试？如果没有，setKeyframes可能无法使用。

对于它的价值，动画似乎对我有用，只需进行一些调整：

var fan = document.getElementById('fan');

var cw = new KeyframeEffect(
  fan,
  [
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ],
  {
    // timing options
    duration: 8000,
    iterations: Infinity,
  }
);

// Creates new Animation object and starts it in clockwise rotation
// NOTE(BB): No need for document.timeline, it's the default.
var fananim = new Animation(cw /*, document.timeline*/);

// Stops Animation so it doesnt run automatically
// NOTE(BB): It only runs automatically if you use Element.animate()
// fananim.pause();

var clockwise = function() {
  cw.setKeyframes([
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ]);
  fananim.play();
};

var counterclockwise = function() {
  cw.setKeyframes([
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(-360deg)',
    },
  ]);
  fananim.play();
};

var stop = function() {
  fananim.pause();
};

// Click Handlers for Buttons on Control Baord
var ela = document.getElementById('cw');
ela.addEventListener('click', clockwise, false);

var elb = document.getElementById('ccw');
elb.addEventListener('click', counterclockwise, false);

var elc = document.getElementById('stop');
elc.addEventListener('click', stop, false);

JSFiddle

但是，停止方法似乎不适用于 Chrome Canary。我会联系一些 Chrome 人员，看看发生了什么。

关于我的调整的几点说明：

  • 不需要pause()用new Animation(). 仅当您使用elem.animate(...)创建动画并自动播放时才需要它。

    [但是，调用pause()会将其置于暂停状态而不是空闲状态，如果动画的第一帧与元素的现有状态不同，这可能很有用。]

  • 您不需要document.timeline在构造函数中指定，Animation()因为它是默认值。

您还可以使用 更改动画的方向cw.updateTiming({ direction: 'reverse' })。但是，这种做法和setKeyframes()做法都会使动画跳跃。我可能会尝试深入了解动画并使用reverse(). 即使动画在另一个线程上运行，这也会产生平滑的更新，并且还具有在 Chrome 和 Firefox 的发布版本中提供 API 子集的优势。例如，

const fan = document.getElementById('fan');
const fananim = fan.animate(
  [
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ],
  {
    duration: 8000,
    iterations: Infinity,
  }
);

fananim.pause();
fananim.startTime = -1000 * 1000;

function clockwise() {
  if (fananim.playbackRate < 0) {
    fananim.reverse();
  }
  if (fananim.playState !== 'running') {
    fananim.play();
  }
}

function counterclockwise() {
  if (fananim.playbackRate > 0) {
    fananim.reverse();
  }
  if (fananim.playState !== 'running') {
    fananim.play();
  }
}

function stop() {
  fananim.pause();
}

const ela = document.getElementById('cw');
ela.addEventListener('click', clockwise, false);

const elb = document.getElementById('ccw');
elb.addEventListener('click', counterclockwise, false);

const elc = document.getElementById('stop');
elc.addEventListener('click', stop, false);

JSFiddle

然而，我仍然在 Chrome Canary 中遇到了这个版本的一些问题。希望 Chrome 的人能弄清楚发生了什么。

于 2019-11-27T07:00:54.130 回答