From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../using_the_web_animations_api/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'files/ru/web/api/web_animations_api') diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index 6ab2f90b3d..f061c5e714 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -58,7 +58,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API

Представляя кадры

-

В первую очередь мы должны сосздать Keyframe Object соответствующего нашему CSS @keyframes блоку:

+

В первую очередь мы должны создать Keyframe Object соответствующего нашему CSS @keyframes блоку:

var aliceTumbling = [
   { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
@@ -91,7 +91,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
 

-
Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию animation-timing-function это просто, в веб-анимации API для ослаблеия по умолчанию используется линейная зависимость - котрые мы используем здесь

+
Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию animation-timing-function это просто, в веб-анимации API для ослабления по умолчанию используется линейная зависимость - которые мы используем здесь

 

 
 
Собираем части вместе.

@@ -129,7 +129,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate

 
-
Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (провериить полный код можно на сайте full code on Codepen):

+
Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (проверить полный код можно на сайте full code on Codepen):

 
 
Playing the growing and shrinking game with Alice.

 
@@ -262,7 +262,7 @@ document.addEventListener("touchstart", goFaster);
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
-

эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (котрые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержиться ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.

+

эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.

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

@@ -280,7 +280,7 @@ drinking.pause();

Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.

-

Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденого торта или выпитой бутылки. Изображение у игрока будет зависить от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации currentTime и разделив ее на activeDuration:

+

Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации currentTime и разделив ее на activeDuration:

var endGame = function() {
 
@@ -320,7 +320,7 @@ drinking.pause();

Здесь мы устанавливаем обратный вызов для бутылки, кекса и Алисы, чтобы запустить функцию endGame.

-- cgit v1.2.3-54-g00ecf