Композитные веб-анимации

Я пытаюсь скомпоновать некоторые анимации с помощью API веб-анимации ( https://developer.mozilla.org/en-US/docs/Web/API/Element/animate). Я хочу воспроизвести вступительную анимацию, которая масштабирует мой элемент, а затем реагирует на пылесос и щелкает событиями, чтобы воспроизвести некоторые дополнительные анимации. Я думал, что было бы возможно объединить анимацию, используя свойство "композитный", недавно появившееся в 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. Как объединить несколько анимаций, чтобы играть вместе?

Источник

2 ответа

Решение

Составные режимы, хотя и реализованы, еще не поставляются ни в Firefox, ни в Chrome.

Если вы попробуете свою скрипку в Firefox Nightly, вы увидите, что она работает. В Chrome, если вы перейдете к chrome://flags и включите "Экспериментальные функции веб-платформы", вы также увидите, что он работает там.

К сожалению, до сих пор есть некоторые части этой функции, которые необходимо уточнить, прежде чем мы сможем отправить ее в общем выпуске. Я буду работать над указанием этого в следующем месяце, но, вероятно, это произойдет не раньше начала 2019 года, пока эта информация не станет общедоступной.

Источник

Составные анимации теперь поставляются во всех основных браузерах (кроме Safari) https://caniuse.com/mdn-api_keyframeeffect_composite .

Кроме того, я бы предложил использовать @ okikio / animate при работе с API веб-анимации (WAAPI), поскольку с помощью. На самом деле я написал об этом статью о CSS-Tricks https://css-tricks.com/how-i-used-the-waapi-to-build-an-animation-library/ .

Источник
Другие вопросы по тегам