Web动画API-设置关键帧？

Question

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

我曾尝试使用setKeyframes方法来更改转换方向，这似乎不适用于Chrome。在我的Firefox Developer Edition中，它的工作正常……

有人可以看看我的方法并告诉我是否遗漏了什么吗？请记住，这对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

但是，停止方法在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浏览器的人们能够弄清楚发生了什么。