Question

我正在尝试使用Web动画API（https://developer.mozilla.org/en-US/docs/Web/API/Element/animate）合成一些动画。我想播放一个介绍动画，以缩放我的项目，然后让它对悬停和单击事件做出反应以播放一些其他动画。我认为可以使用最近在Firefox和Chrome中引入的“ composite”属性（使用该属性作为参考：https://css-tricks.com/additive-animation-web-animations-api/）来组合动画，但是它似乎仍然可以代替我以前声明的动画。

我摆弄了代码：http://jsfiddle.net/v0mk9eg4/51/

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();
}

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

Answer 1

尽管已实现复合模式，但尚未在Firefox或Chrome中提供。

如果您在Firefox Nightly中尝试使用小提琴，您会发现它可以正常工作。在Chrome浏览器中，如果您转到chrome：// flags并启用了“实验性Web平台功能”，那么您还将看到它在此处可以正常工作。

不幸的是，在我们将其发布到一般发行版之前，尚需要更全面地指定此功能的某些部分。我将在下个月进行详细说明，但可能要等到2019年初才能普遍使用。

Answer 2

复合动画现已在所有主要浏览器（Safari 除外）https://caniuse.com/mdn-api_keyframeeffect_composite 中提供。

此外，我建议在使用 Web Animation API (WAAPI) 时使用 @okikio/animate，因为使用它更容易创建复杂的动画。我实际上写了一篇关于 CSS-Tricks 的文章https://css-tricks.com/how-i-used-the-waapi-to-build-an-animation-library/。

复合网络动画

2 个答案: