1

我正在尝试使用 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。多个动画应该如何组合在一起播放？

4

2 回答 2

3

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

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

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

于 2018-08-13T11:10:35.503 回答
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/。

于 2021-06-17T03:42:04.910 回答