复合网络动画答案

【问题标题】：Composite Web Animations复合网络动画
【发布时间】：2019-01-19 06:20:38
【问题描述】：

我正在尝试使用 Web Animations API (https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) 合成一些动画。我想播放一个可以缩放我的项目的介绍动画，然后让它对 hoover 和 click 事件做出反应以播放一些额外的动画。我认为可以使用最近在 Firefox 和 Chrome 中引入的“复合”属性来组合动画（以此作为参考：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。多个动画应该如何组合在一起播放？

【问题讨论】：

标签： javascript animation css-animations web-animations

【解决方案1】：

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

如果你在 Firefox Nightly 中尝试你的小提琴，你会发现它有效。在 Chrome 中，如果您转到 chrome://flags 并启用“实验性 Web 平台功能”，您也会看到它在那里工作。

遗憾的是，此功能的某些部分仍需要更全面地指定，然后才能在一般版本中发布。我将在下个月着手具体说明，但可能要到 2019 年初才能普遍使用。

【讨论】：

【解决方案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/。

【讨论】：