Web Animations API -设置关键帧？

Question

我一直在尝试使用Web Animations API，并发现它非常直观。

从我的角度来看，我想做一个非常简单的动画，一个元素在一个方向上旋转，按下按钮后在另一个方向上旋转。使用标准的反转方法时，动画会因为超时而停止。

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

有没有人可以检查一下我的方法，并告诉我我是否遗漏了什么？请记住，一般来说，我对JS还很陌生。

提前谢谢你，

尼克拉斯

JSFiddle with my code

//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);

Answer 1

您是否在启用了实验性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

但是，stop方法在Chrome Canary上似乎不起作用。我会联系一些Chrome的人，看看是怎么回事。

关于我的调整，有几点要注意：

• 没有必要对用new Animation()创建的动画进行pause()。只有在使用elem.animate(...)时才需要它，它会创建动画并自动播放。

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

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

也可以使用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的人能弄清楚到底是怎么回事。