JS:如何将链接的动画另存为变量以播放,暂停等

里卡多·阿尔夫维罗亚

如果我想控制一个简单的动画,可以将其设置为header变量,然后执行header.play()以下操作:

  let header= element.animate({
      transform: ['scale(1)', 'scale(1.5)']
    }, {
      duration: 1000,
      fill: 'both'
    });
  
  header.play();

但是当我链接它以便使用一起发生不同的动画时composite,由于它有多个定义,所以将不起作用:

element.animate({
  transform: ['scale(1)', 'scale(1.5)']
}, {
  duration: 1000,
  fill: 'both'
});

element.animate({
  transform: ['rotate(0deg)', 'rotate(180deg)']
}, {
  duration: 1500,
  fill: 'both',
  composite: 'add'
});

我将如何控制这些共同使用的play()pause()

贝吉

您可以使用DOM事件(甚至可以保证)链接两个单独的动画:

const firstPart = element.animate({
  transform: ['scale(1)', 'scale(1.5)']
}, {
  duration: 1000,
  fill: 'both'
});

firstPart.finished.then(() => {
  const secondPart = element.animate({
    transform: ['rotate(0deg)', 'rotate(180deg)']
  }, {
    duration: 1500,
    fill: 'both'
  });
  return secondPart.finished;
});

或者,您可以创建具有多个关键帧的单个动画:

element.animate([
  { offset: 0, transform: 'scale(1)' },
  { offset: .6, transform: 'scale(1.5) rotate(0deg)' }
  { offset: 1, transform: 'scale(1.5) rotate(180deg)' }
], {
  duration: 2500,
  fill: 'both',
  composite: 'add'
});

如果需要,关键帧解决方案还可以同时为两个属性设置动画。但是,单独设置两个transforms的动画有点复杂

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章