Javascript 复合网页动画

我正在尝试使用Web动画API（）合成一些动画。 我想播放一个介绍动画来缩放我的项目，然后让它对胡佛作出反应，并单击事件来播放一些额外的动画。我认为可以使用最近在Firefox和Chrome中引入的“composite”属性来组合动画（将其用作参考：），但它似乎仍然取代了我以前声明的动画

我对代码进行了修改：

---

当您注释掉clickAnim时，将播放hooverAnim，当注释掉hooverAnim时，将播放introAnim。如何将多个动画组合在一起播放？

虽然实现了复合模式，但Firefox或Chrome都没有提供

如果你每晚在Firefox中尝试小提琴，你会发现它是有效的。如果你去chrome://flags 并且启用了“实验性Web平台功能”，您还将看到它在那里工作

---

不幸的是，在我们将其发布到通用版本之前，还需要对该功能的某些部分进行更全面的指定。我将在下个月对此进行详细说明，但可能要到2019年初才能正式提供。

复合模式虽然已经实现，但在Firefox或Chrome中都还没有发布

如果你每晚在Firefox中尝试小提琴，你会发现它是有效的。如果你去chrome://flags 并且启用了“实验性Web平台功能”，您还将看到它在那里工作

---

不幸的是，在我们将其发布到通用版本之前，还需要对该功能的某些部分进行更全面的指定。我将在下个月对此进行详细说明，但可能要到2019年初才能正式发布。

合成动画现已在所有主要浏览器中发布（Safari除外）

---

另外，我建议在使用Web动画API（WAAPI）时使用，因为使用它更容易创建复杂的动画。实际上，我写了一篇关于CSS技巧的文章。

合成动画现在已经在所有主要浏览器中发布（Safari除外）

另外，我建议在使用Web动画API（WAAPI）时使用，因为使用它更容易创建复杂的动画。实际上我写了一篇关于CSS技巧的文章

var item = document.getElementById("item");

var introFrames = [
    {"transform": "translate(-50%, -50%) scale(0,0) translate(0, 0)"},
    {"transform": "translate(-50%, -50%) scale(1,1) translate(0, 0)"}
]
var introOpts = {
    "duration": 5000,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
}

var introAnim = item.animate(introFrames, introOpts);
introAnim.pause();

var hooverFrames = [
    {"transform": "translate3d(0, 0, 0)"},
    {"transform": "translate3d(-50%, -50%, 0)"}
]
var hooverOpts = {
    "duration": 1000,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
    "fill": "both",
    "composite": 'add'
}

var hooverAnim = item.animate(hooverFrames, hooverOpts);
hooverAnim.pause();

var clickFrames = [
    {"transform": "translate(0, 0)"},
    {"transform": "translate(-50%, 0)"},
    {"transform": "translate(0, 0)"}
]
var clickOpts = {
    "duration": 500,
    "iterations": 1,
    "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
    "fill": "both",
    "composite": 'add'
}

var clickAnim = item.animate(clickFrames, clickOpts);
clickAnim.pause();


introAnim.play();

function playHooverAnim(direction) {
    console.log('HOOVER', direction);
    hooverAnim.playbackRate = direction;
    hooverAnim.play();
}

function playClickAnim() {
    console.log('CLICK');
    clickAnim.play();
}