diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md index b9059eee90..4b2a5eb2f7 100644 --- a/7-animation/3-js-animation/1-animate-ball/solution.md +++ b/7-animation/3-js-animation/1-animate-ball/solution.md @@ -1,10 +1,8 @@ -Чтобы заставить мячик прыгать можно использовать CSS-свойство `top` и задать мячику `position:absolute` внутри поля с `position:relative`. +Чтобы заставить мячик прыгать, можно использовать CSS-свойство `top` и задать мячику `position:absolute` внутри поля с `position:relative`. -Нижняя координата поля -- `field.clientHeight`. Но свойство `top` соответствует координате мяча от верхней границы мяча, конечная позиция мяча может быть вычислена так: `field.clientHeight - ball.clientHeight`. +Нижняя координата поля -- `field.clientHeight`. CSS-свойство `top` относится к верхней границе мяча, которая должна идти от 0 до `field.clientHeight - ball.clientHeight`. -Итак мы анимируем свойство `top` от `0` до `field.clientHeight - ball.clientHeight`. - -Теперь, чтобы получить эффект "скачущего" мяча, мы можем использовать временную функцию `bounce` в режиме `easeOut`. +А чтобы получить эффект "скачущего" мяча, мы можем использовать функцию расчета времени `bounce` в режиме `easeOut`. Вот конечный код для анимации: diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md index 92bf3edecd..bb0125df12 100644 --- a/7-animation/3-js-animation/2-animate-ball-hops/task.md +++ b/7-animation/3-js-animation/2-animate-ball-hops/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Создайте анимацию мячика прыгающего вправо +# Анимируйте мячик, прыгающий вправо Сделайте отскок мяча вправо. Как в примере: diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md index b8e6eb7012..8f5daef525 100644 --- a/7-animation/3-js-animation/article.md +++ b/7-animation/3-js-animation/article.md @@ -6,7 +6,7 @@ ## Использование setInterval -Анимация может быть представлена в виде последовательности кадров (каждый кадр немного меняет HTML/CSS-свойства). +Анимация реализуется через последовательность кадров, каждый из которых немного меняет HTML/CSS-свойства. Например, изменение `style.left` от `0px` до `100px` -- двигает элемент. И если мы будем делать это с помощью `setInterval`, изменяя на `2px` с небольшими интервалами времени, например 50 раз в секунду, тогда изменения будут выглядеть плавными. Принцип такой же, как в кино: 24 кадров в секунду достаточно, чтобы создать эффект плавности. @@ -38,7 +38,7 @@ let timer = setInterval(function() { }, 20); -// как timePassed меняет значение от 0 до 2000 +// в то время как timePassed идет от 0 до 2000 // left изменяет значение от 0px до 400px function draw(timePassed) { train.style.left = timePassed / 5 + 'px'; @@ -75,20 +75,20 @@ setInterval(animate2, 20); // в разных местах кода setInterval(animate3, 20); ``` -Независимые перерисовки, сгруппированные вместе, облегчают процесс перерисовки для браузера (и выглядят более плавными для пользователя). +Эти независимые перерисовки лучше сгруппировать вместе, тогда они будут легче для браузера, а значит - не грузить процессор и более плавно выглядеть. -Существует еще одна вещь, про которую надо помнить: когда CPU перегружен или еще по какой-то причине (например, когда вкладка браузера скрыта), нам не следует запускать перерисовку каждые `20ms`. +Существует еще одна вещь, про которую надо помнить: когда CPU перегружен или есть другие причины делать перерисовку реже (например, когда вкладка браузера скрыта), нам не следует делать её каждые `20ms`. -Но как нам узнать об этом в JavaScript? Спецификация о [Animation timing](http://www.w3.org/TR/animation-timing/) описывает функцию `requestAnimationFrame`, которая решает все описанные проблемы и делает даже больше. +Но как нам узнать об этом в JavaScript? Спецификация [Animation timing](http://www.w3.org/TR/animation-timing/) описывает функцию `requestAnimationFrame`, которая решает все описанные проблемы и делает даже больше. Синтаксис: ```js let requestId = requestAnimationFrame(callback) ``` -Такой вызов планирует запуск функции `callback` в ближайшее время, когда браузер сочтёт возможным осуществить анимацию. +Такой вызов планирует запуск функции `callback` на ближайшее время, когда браузер сочтёт возможным осуществить анимацию. -Если в `callback` происходит изменение элемента, тогда оно будет выполнено с другими `requestAnimationFrame` и CSS-анимациями. Таким образом браузер выполнит один геометрический пересчёт и отрисовку, вместо нескольких. +Если в `callback` происходит изменение элемента, тогда оно будет сгруппировано с другими `requestAnimationFrame` и CSS-анимациями. Таким образом браузер выполнит один геометрический пересчёт и отрисовку, вместо нескольких. Значение `requestId` может быть использовано для отмены анимации: ```js @@ -98,9 +98,9 @@ cancelAnimationFrame(requestId); Функция `callback` имеет один аргумент -- время прошедшее с момента начала загрузки страницы в миллисекундах. Это значение может быть получено с помощью вызова [performance.now()](mdn:api/Performance/now). -Существуют причины, когда запуск анимации откладывается (обычно выполняется практически сразу после `requestAnimationFrame`), например CPU перегружен или аккумулятор ноутбука почти разряжен. +Как правило, `callback` запускается очень скоро, если только не перегружен CPU или не разряжена батарея ноутбука, или у браузера нет какой-то ещё причины замедлиться. -Код ниже показывает время проходящее между первыми 10 запусками `requestAnimationFrame`. Обычно оно 10-20 мс: +Код ниже показывает время между первыми 10 запусками `requestAnimationFrame`. Обычно оно 10-20 мс: ```html run height=40 refresh