Для сложных веб-анимаций не паникуйте, выберите API веб-анимации.

Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческие подарочные пакеты и бросить вызов творческим поощрениям.

предисловие

Чтобы убедить интерфейсную анимацию, мы знакомы с двумя типами

1. CSS-анимация
2. (requestAnimation/setTimeout/setInterval + изменение свойства) анимация

Конечно, некоторые люди могут сказать, что анимация холста — это второе по сути движение.

Сегодня третийWeb Animations API, также именуемыйWAAPIиз.

В отличие от чистого декларативного CSS, JavaScript также позволяет нам динамически задавать значения длительности свойств. Для создания пользовательских библиотек анимации и создания интерактивных анимаций API веб-анимации может стать идеальным инструментом для работы.

поднять два каштана

брось мяч

После нажатия сфера падает

const ballEl = document.querySelector(".ball");
ballEl.addEventListener("click", function () {
            let fallAni = ballEl.animate({
                transform: ['translate(0, 0)', 'translate(20px, 8px)', 'translate(50px, 200px)']
            }, {
                easing: "cubic-bezier(.68,.08,.89,-0.05)",
                duration: 2000,
                fill: "forwards"
            })
});

Прямые мировые новости или заградительный огонь

Это реальный пример в нашем проекте, живая плотина.
Нам нужно, чтобы сообщение сначала переместилось в середину экрана, а сообщение должно оставаться не менее 2 секунд.Если сообщение слишком длинное, сообщение должно быть匀速滚动, затем соскользните с экрана.

1. скользить в
2. Пауза, если сообщение слишком длинное, сообщение должно прокручиваться с постоянной скоростью
3. выскользнуть

Сложность в том, что в фазе паузы время прокрутки сообщений не определяется и его нужно вычислять. В настоящее время анимация на чистом CSS3 немного сложнее, гораздо проще использовать Web Animations API, естественно совместимый с JS.

Первый взгляд на эффект

Код просто разделен на три части: вставка, пауза и выскальзывание.
Из-за естественной поддержки промисов код очень лаконичен, а логика очень ясна.

async function startAnimate() {
    // 滑入
    const totalWidth = stageWidth + DANMU_WITH;
    const centerX = stageWidth * 0.5 - DANMU_WITH * 0.5;
    const kfsIn = {
        transform: [`translateX(${totalWidth}px)`, `translateX(${centerX}px)`]
    }
    await danmuEl.animate(kfsIn, {
        duration: 2000,
        fill: 'forwards',
        easing: 'ease-out'
    }).finished;

    // 暂停部分
    const contentEl = danmuEl.querySelector(".danmu-content");
    const itemWidth = contentEl.getBoundingClientRect().width;
    const gapWidth = Math.max(0, itemWidth - DANMU_WITH);
    const duration = Math.max(0, Math.floor(gapWidth / 200) * 1000);

    const translateX = duration > 0 ? gapWidth : 0;
    const kfsTxt = {
        transform: [`translateX(0px)`, `translateX(-${gapWidth}px)`]
    };
    await contentEl.animate(kfsTxt, {
        duration,
        delay: 2000,
        fill: 'forwards',
        easing: 'linear',
    }).finished;

    // 滑出
    const kfsOut = {
        transform: [`translateX(${centerX}px)`, `translateX(-${DANMU_WITH}px)`]
    };
    await danmuEl.animate(kfsOut, {
        duration: 2000,
        fill: "forwards",
        easing: 'ease-in'
    }).finished;

    if (danmuEl) {
        stageEl.removeChild(danmuEl);
    }
    isAnimating = false
}

Два основных объекта API веб-анимации

1. KeyframeEffect описывает свойство анимации
2. Анимация управляет воспроизведением

KeyframeEffect

Коллекция, описывающая свойства анимации, называемаяkeyframesиAnimation Effect Timing Properties. Затем вы можете использоватьAnimationконструктор для игры.

Он имеет три метода построения,Сосредоточьтесь на втором, указанный после параметра.

new KeyframeEffect(target, keyframes);
new KeyframeEffect(target, keyframes, options)
new KeyframeEffect(source)

Конечно, мы можем явно создавать ключевоеframefecfectectectect, а затем доставить его в анимацию для игры. Но нам обычно не нужно делать это, есть более простой API, что мы будем говорить о позжеElement.animate.

См. пример мультиплексирования KeyframeEffect,new KeyframeEffect(kyEffect)На основе текущей копии, затем используется в нескольких местах.

const box1ItemEl = document.querySelector(".box1");
const box2ItemEl = document.querySelector(".box2");

const kyEffect = new KeyframeEffect(null, {
    transform: ['translateX(0)', 'translateX(200px)']
},
{ duration: 3000, fill: 'forwards' })

const ky1 = new KeyframeEffect(kyEffect);
ky1.target = box1ItemEl;

const ky2 = new KeyframeEffect(kyEffect);
ky2.target = box2ItemEl;

new Animation(ky1).play();
new Animation(ky2).play();

Animation

Временная шкала, которая предоставляет элементы управления воспроизведением, узлы анимации или источники. приемлемо для использованияKeyframeEffectОбъект, созданный конструктором, принимает в качестве параметра.

const box1ItemEl = document.querySelector(".box1");

const kyEffect = new KeyframeEffect(box1ItemEl, {
    transform: ['translateX(0)', 'translateX(200px)']
},
{ duration: 3000, fill: 'forwards' })

const ani1 = new Animation(kyEffect);
ani1.play();

Часто используемые методы

• cancel()Отмена
• finish()Заканчивать
• pause()Пауза
• play()играть в
• reverse()Обратное направление воспроизведения

Слушатель событий анимации

Существует две формы мониторинга:

1. режим события

Поскольку он наследуется от EventTarget, у всех по-прежнему есть две формы.

animation.onfinish = function() {
  element.remove();
}

animation.addEventListener("finish", function() {
  element.remove();
}

2. Форма обещания

animation.finished.then(() =>
  element.remove()
)

Например, очень полезная сцена после того, как все анимации сделаны:

Promise.all( element.getAnimations().map(ani => ani.finished)
 ).then(function() {           
    // do something cool 
  })

Общие обратные вызовы событий

• oncancelОтмена
• onfinishЗаканчивать
• onremoveУдалить

удобныйElement.animate

любойElementУ всех есть этот метод, его синтаксис:

animate(keyframes, options)

его параметры иnew KeyframeEffect(target, keyframes, options)Последние два параметра в основном одинаковы, и возвращается объект Animation.

Ключевые кадры первого параметра

Есть две формы ключевых кадров: одна — форма массива, а другая — форма объекта.

форма массива

Массив объектов (ключевых кадров), состоящий из свойств и значений для повторения.
Смещение ключевого кадра можно получить, указавoffsetчтобы указать , значение должно быть в[0.0, 1.0]внутри этого диапазона и должны быть отсортированы в порядке возрастания.Простым пониманием является дробное значение процента прогресса.

element.animate([ { opacity: 1 },
                  { opacity: 0.1, offset: 0.7 },
                  { opacity: 0 } ],
                2000);

Не все ключевые кадры должны быть установленыoffset. не определенoffsetКлючевые кадры будут равномерно удалены от соседних ключевых кадров.

форма объекта

A, содержащий ключи "ключ-значение"对象Необходимо содержать свойство для анимации и значение для цикла.数组.

element.animate({
  opacity: [ 0, 0.9, 1 ],
  offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
  easing: [ 'ease-in', 'ease-out' ],
}, 2000);

Варианты второго параметра

иnew KeyframeEffect(target, keyframes, options)Третий параметр практически такой же, но есть необязательный атрибут, то есть id, который используется для обозначения анимации, что также удобно использовать вElement.getAnimationsТочный поиск в результатах.

имя параметра	значение
delay	Количество миллисекунд для задержки запуска анимации. По умолчанию 0.
direction	направление движения анимации
duration	Количество миллисекунд, которое требуется для завершения каждой итерации анимации. По умолчанию 0
easing	Функция кривой анимации, можно настроить
endDelay	Количество миллисекунд задержки после окончания анимации. В основном это используется для сортировки анимаций по времени окончания другой анимации. По умолчанию 0.
fill	Состояние значения свойства после окончания анимации
iterationStart	Описывает, когда анимация должна начинаться в итерации. 0,5 означает начало в середине первой итерации, с этим набором значений анимация с двумя итерациями завершится в середине третьей итерации. По умолчанию 0,0
iterations	Сколько раз должна повторяться анимация. Значение по умолчанию равно 1, но также может принимать значение Infinity, чтобы оно повторялось до тех пор, пока существует элемент.
composite	Комбинации между анимациями и другими отдельными анимациями. Это расширенная функция, по умолчанию используется замена, которая заменяет упомянутую анимацию.
iterationComposite	Как изменения значения анимированного свойства накапливаются или перезаписывают друг друга при каждой итерации анимации

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

Подробнее см.KeyframeEffect

Element.getAnimations

Мы добавляем много анимации в Element через Element.animate или создаем Animation, с помощью этого метода мы можем получить все экземпляры Animation.

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

Например, анимация пакетной паузы:

box1ItemEl.getAnimations()
    .forEach(el=> el.pause()) // 暂停全部动画

Преимущество

1. Относительно более гибкие CSS анимация
2. По сравнению с анимацией requestAnimation/setTimeout/setInterval производительность лучше, а код более лаконичен.
3. 天然支持Promise，爽爽爽！！！

По какой причине вы отказываетесь от нее?

Сравните CSS-анимацию

Таблица сравнения ключей свойств параметра анимации

Web Animation API	CSS
delay	animation-delay
duration	animation-duration
iterations	animation-iteration-count
direction	animation-direction
easing	animation-timing-function
fill	animation-fill-mode

Различия в значениях настройки параметров

1. durationПараметр поддерживает только миллисекунды
2. Количество итераций не ограничено при использовании JSInfinity, а не строка"infinite"
3. Анимированный Безье по умолчаниюlinear, вместо cssease

совместимость

В целом неплохо, отклонение Сафари.
Если нет, добавьте разделительweb-animations-js.

Мы использовали его в реальных настольных проектах, очень гибкий, приятный!

Суммировать

API веб-анимаций и CSS-анимации, а не кто кого заменяет. Комбинированное использование, эффект лучше.

Сложные логические анимации — лучший выбор из-за естественной близости API веб-анимации и JS.

напиши в конце

Ваши лайки и комментарии - самая большая мотивация для меня двигаться вперед.

Пожалуйста, посетите группу технического обменаПодойди сюда. Или добавьте мое облако похорон WeChat и учитесь вместе.

Цитировать

Web Animations API
Using the Web Animations API
CSS Animations vs Web Animations API