复合网络动画

Question

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

我放了一个 fiddle 代码：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 中尝试 fiddle，您会发现它有效。在 Chrome 中，如果您转到 chrome://flags 并启用 "Experimental Web platform features"，您也会看到它在那里工作。

遗憾的是，在我们将其发布为一般版本之前，此功能的某些部分还需要更全面地说明。我将在下个月进行具体说明，但可能要到 2019 年初才能普遍使用。

Answer 2

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

此外，我建议使用 @okikio/animate when working with the Web Animation API (WAAPI), as it's easier to create complex animations with. I actually wrote an article on CSS-Tricks about it https://css-tricks.com/how-i-used-the-waapi-to-build-an-animation-library/。

复合网络动画

Composite Web Animations

javascript

animation

css-animations

web-animations