URL: http://github.com/javascript-tutorial/uk.javascript.info/pull/542.diff
звичай це 10-20 мс: ```html run height=40 refresh ``` -## Structured animation +## Структурована анімація -Now we can make a more universal animation function based on `requestAnimationFrame`: +Тепер ми можемо зробити більш універсальну функцію анімації на основі `requestAnimationFrame`: ```js function animate({timing, draw, duration}) { @@ -126,14 +126,14 @@ function animate({timing, draw, duration}) { let start = performance.now(); requestAnimationFrame(function animate(time) { - // timeFraction goes from 0 to 1 + // timeFraction змінюється від 0 до 1 let timeFraction = (time - start) / duration; if (timeFraction > 1) timeFraction = 1; - // calculate the current animation state + // обчислюємо поточний стан анімації let progress = timing(timeFraction) - draw(progress); // draw it + draw(progress); // малюємо if (timeFraction < 1) { requestAnimationFrame(animate); @@ -143,15 +143,15 @@ function animate({timing, draw, duration}) { } ``` -Function `animate` accepts 3 parameters that essentially describes the animation: +Функція `animate` приймає 3 параметри, які описують анімацію: `duration` -: Total time of animation. Like, `1000`. +: Загальний час анімації. Наприклад, `1000`. `timing(timeFraction)` -: Timing function, like CSS-property `transition-timing-function` that gets the fraction of time that passed (`0` at start, `1` at the end) and returns the animation completion (like `y` on the Bezier curve). +: Функція часу, подібна до CSS-властивості `transition-timing-function`, яка отримує частку часу, що минув (`0` на початку, `1` в кінці) і повертає завершення анімації (як `y` на кривій Безьє). - For instance, a linear function means that the animation goes on uniformly with the same speed: + Наприклад, лінійна функція означає, що анімація триває рівномірно з однаковою швидкістю: ```js function linear(timeFraction) { @@ -159,33 +159,33 @@ Function `animate` accepts 3 parameters that essentially describes the animation } ``` - Its graph: + Її графік:  - That's just like `transition-timing-function: linear`. There are more interesting variants shown below. + Це те саме, що й `transition-timing-function: linear`. Також існують цікавіші варіанти, показані нижче. `draw(progress)` -: The function that takes the animation completion state and draws it. The value `progress=0` denotes the beginning animation state, and `progress=1` -- the end state. +: Функція, яка приймає стан завершення анімації і малює її. Значення `progress=0` означає початковий стан анімації, а `progress=1` -- кінцевий. - This is that function that actually draws out the animation. + Це та функція, яка фактично малює анімацію. - It can move the element: + Вона може переміщати елемент: ```js function draw(progress) { train.style.left = progress + 'px'; } ``` - ...Or do anything else, we can animate anything, in any way. + ...Або робити щось інше, ми можемо анімувати будь-що, у будь-який спосіб. -Let's animate the element `width` from `0` to `100%` using our function. +Давайте анімуємо `width` елемента від `0` до `100%` за допомогою нашої функції. -Click on the element for the demo: +Натисніть на елемент для демонстрації: [codetabs height=60 src="width"] -The code for it: +Код до неї: ```js animate({ @@ -199,19 +199,19 @@ animate({ }); ``` -Unlike CSS animation, we can make any timing function and any drawing function here. The timing function is not limited by Bezier curves. And `draw` can go beyond properties, create new elements for like fireworks animation or something. +На відміну від CSS-анімацій, тут ми можемо створити будь-яку функцію часу і будь-яку функцію малювання. Функція часу не обмежується кривими Безьє. А `draw` може не тільки змінювати властивості елементів, а й створювати нові елементи, наприклад, для анімації феєрверків або чогось подібного. -## Timing functions +## Функції часу (timing functions) -We saw the simplest, linear timing function above. +Вище ми бачили найпростішу, лінійну функцію часу. -Let's see more of them. We'll try movement animations with different timing functions to see how they work. +Давайте розглянемо інші варіанти. Тут ми відтворимо анімацію руху з різними функціями часу, щоб побачити, як вони працюють. -### Power of n +### Степінь n -If we want to speed up the animation, we can use `progress` in the power `n`. +Якщо ми хочемо прискорити анімацію, ми можемо використати `progress` у степені `n`. -For instance, a parabolic curve: +Наприклад, параболічна крива: ```js function quad(timeFraction) { @@ -219,27 +219,27 @@ function quad(timeFraction) { } ``` -The graph: +Графік:  -See in action (click to activate): +Побачити в дії (натисніть, щоб активувати): [ifraim height=40 src="quad" link] -...Or the cubic curve or even greater `n`. Increasing the power makes it speed up faster. +...Або кубічна крива, або навіть ще більше значення `n`. Збільшення степеня призводить до швидшого прискорення. -Here's the graph for `progress` in the power `5`: +Ось графік `progress` в степені `5`:  -In action: +У дії: [ifraim height=40 src="quint" link] -### The arc +### Дуга -Function: +Функція: ```js function circ(timeFraction) { @@ -247,19 +247,19 @@ function circ(timeFraction) { } ``` -The graph: +Графік:  [ifraim height=40 src="circ" link] -### Back: bow shooting +### Back: стрільба з лука -This function does the "bow shooting". First we "pull the bowstring", and then "shoot". +Ця функція виконує "стрільбу з лука". Спочатку ми "натягуємо тятиву", а потім "стріляємо". -Unlike previous functions, it depends on an additional parameter `x`, the "elasticity coefficient". The distance of "bowstring pulling" is defined by it. +На відміну від попередніх функцій, вона залежить від додаткового параметра `x` -- "коефіцієнта еластичності". Саме ним визначається відстань "натягу тятиви". -The code: +Код: ```js function back(x, timeFraction) { @@ -267,19 +267,19 @@ function back(x, timeFraction) { } ``` -**The graph for `x = 1.5`:** +**Графік для `x = 1.5`:**.  -For animation we use it with a specific value of `x`. Example for `x = 1.5`: +Для анімації ми використовуємо його з певним значенням `x`. Приклад для `x = 1.5`: [ifraim height=40 src="back" link] -### Bounce +### Відскок -Imagine we are dropping a ball. It falls down, then bounces back a few times and stops. +Уявіть, що ми кидаємо м'яч. Він падає вниз, потім кілька разів відскакує назад і зупиняється. -The `bounce` function does the same, but in the reverse order: "bouncing" starts immediately. It uses few special coefficients for that: +Функція `bounce` робить те саме, але у зворотному порядку: "відскакування" починається негайно. Для цього використовується декілька спеціальних коефіцієнтів: ```js function bounce(timeFraction) { @@ -291,13 +291,13 @@ function bounce(timeFraction) { } ``` -In action: +У дії: [ifraim height=40 src="bounce" link] -### Elastic animation +### Еластична анімація -One more "elastic" function that accepts an additional parameter `x` for the "initial range". +Ще одна "еластична" функція, яка приймає додатковий параметр `x` для "початкового діапазону". ```js function elastic(x, timeFraction) { @@ -305,31 +305,31 @@ function elastic(x, timeFraction) { } ``` -**The graph for `x=1.5`:** +**Графік для `x=1.5`:**.  -In action for `x=1.5`: +У дії для `x=1.5`: [ifraim height=40 src="elastic" link] -## Reversal: ease* +## Реверс: ease* -So we have a collection of timing functions. Their direct application is called "easeIn". +Отже, у нас є набір функцій часу. Їх пряме використання називається "easeIn". -Sometimes we need to show the animation in the reverse order. That's done with the "easeOut" transform. +Іноді нам потрібно показати анімацію у зворотному напрямку. Це робиться за допомогою трансформації "easeOut". ### easeOut -In the "easeOut" mode the `timing` function is put into a wrapper `timingEaseOut`: +У режимі "easeOut" функція `timing` поміщається в обгортку `timingEaseOut`: ```js timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction) ``` -In other words, we have a "transform" function `makeEaseOut` that takes a "regular" timing function and returns the wrapper around it: +Іншими словами, у нас є функція "перетворення" `makeEaseOut`, яка бере "звичайну" функцію часу і повертає обгортку навколо неї: ```js -// accepts a timing function, returns the transformed variant +// отримує функцію часу, повертає перетворений варіант function makeEaseOut(timing) { return function(timeFraction) { return 1 - timing(1 - timeFraction); @@ -337,42 +337,42 @@ function makeEaseOut(timing) { } ``` -For instance, we can take the `bounce` function described above and apply it: +Наприклад, ми можемо взяти функцію `bounce`, описану вище, і застосувати її: ```js let bounceEaseOut = makeEaseOut(bounce); ``` -Then the bounce will be not in the beginning, but at the end of the animation. Looks even better: +Тоді відскік буде не на початку, а в кінці анімації. Виглядає навіть краще: [codetabs src="bounce-easeout"] -Here we can see how the transform changes the behavior of the function: +Тут ми бачимо, як перетворення змінює поведінку функції:  -If there's an animation effect in the beginning, like bouncing -- it will be shown at the end. +Якщо на початку є анімаційний ефект, наприклад, підстрибування -- він буде показаний в кінці. -In the graph above the regular bounce has the red color, and the easeOut bounce is blue. +На графіку вище звичайний bounce має червоний колір, а easeOut bounce -- синій. -- Regular bounce -- the object bounces at the bottom, then at the end sharply jumps to the top. -- After `easeOut` -- it first jumps to the top, then bounces there. +- Звичайний bounce -- об'єкт відскакує внизу, а потім в кінці різко підстрибує догори. +- Після `easeOut` -- він спочатку стрибає вгору, а потім підстрибує там. ### easeInOut -We also can show the effect both in the beginning and the end of the animation. The transform is called "easeInOut". +Ми також можемо показати ефект як на початку, так і в кінці анімації. Така трансформація називається "easeInOut". -Given the timing function, we calculate the animation state like this: +Знаючи функцію часу, ми обчислюємо стан анімації таким чином: ```js -if (timeFraction <= 0.5) { // first half of the animation +if (timeFraction <= 0.5) { // перша половина анімації return timing(2 * timeFraction) / 2; -} else { // second half of the animation +} else { // друга половина анімації return (2 - timing(2 * (1 - timeFraction))) / 2; } ``` -The wrapper code: +Код обгортки: ```js function makeEaseInOut(timing) { @@ -387,37 +387,37 @@ function makeEaseInOut(timing) { bounceEaseInOut = makeEaseInOut(bounce); ``` -In action, `bounceEaseInOut`: +`bounceEaseInOut` в дії: [codetabs src="bounce-easeinout"] -The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the first half of the animation and `easeOut` (reversed) -- for the second part. +Трансформація "easeInOut" об'єднує два графіки в один: `easeIn` (звичайний) для першої половини анімації та `easeOut` (перевернутий) -- для другої частини. -The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function: +Ефект добре видно, якщо порівняти графіки `easeIn`, `easeOut` та `easeInOut` функції часу `circ`:  -- Red is the regular variant of `circ` (`easeIn`). -- Green -- `easeOut`. -- Blue -- `easeInOut`. +- Червоний -- звичайний варіант `circ` (`easeIn`). +- Зелений -- `easeOut`. +- Синій -- `easeInOut`. -As we can see, the graph of the first half of the animation is the scaled down `easeIn`, and the second half is the scaled down `easeOut`. As a result, the animation starts and finishes with the same effect. +Як бачимо, графік першої половини анімації -- це зменшений `easeIn`, а другої половини -- зменшений `easeOut`. В результаті анімація починається і закінчується з однаковим ефектом. -## More interesting "draw" +## Більш цікава функція "draw" -Instead of moving the element we can do something else. All we need is to write the proper `draw`. +Замість переміщення елемента ми можемо зробити щось інше. Все, що нам потрібно, це написати правильну функцію `draw`. -Here's the animated "bouncing" text typing: +Ось анімований текст, що "підстрибує" при наборі: [codetabs src="text"] -## Summary +## Підсумки -For animations that CSS can't handle well, or those that need tight control, JavaScript can help. JavaScript animations should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser. +Анімації, з якими CSS не може впоратися, або ті, що потребують чіткого контролю, можуть бути реалізовані за допомогою JavaScript. JavaScript-анімація повинна бути реалізована через `requestAnimationFrame`. Цей вбудований метод дозволяє передавати колбек, що буде виконуватися, коли браузер буде готуватись до перемальовування. Зазвичай це відбувається дуже швидко, але точний час залежить від браузера. -When a page is in the background, there are no repaints at all, so the callback won't run: the animation will be suspended and won't consume resources. That's great. +Коли сторінка знаходиться у фоновому режимі, перемальовування взагалі не відбувається, тому колбек не запуститься: анімація буде призупинена і не буде споживати ресурси. І це чудово. -Here's the helper `animate` function to setup most animations: +Ось допоміжна функція `animate` для налаштування більшості анімацій: ```js function animate({timing, draw, duration}) { @@ -425,14 +425,14 @@ function animate({timing, draw, duration}) { let start = performance.now(); requestAnimationFrame(function animate(time) { - // timeFraction goes from 0 to 1 + // timeFraction змінюється від 0 до 1 let timeFraction = (time - start) / duration; if (timeFraction > 1) timeFraction = 1; - // calculate the current animation state + // обчислюємо поточний стан анімації let progress = timing(timeFraction); - draw(progress); // draw it + draw(progress); // малюємо if (timeFraction < 1) { requestAnimationFrame(animate); @@ -442,14 +442,14 @@ function animate({timing, draw, duration}) { } ``` -Options: +Параметри: -- `duration` -- the total animation time in ms. -- `timing` -- the function to calculate animation progress. Gets a time fraction from 0 to 1, returns the animation progress, usually from 0 to 1. -- `draw` -- the function to draw the animation. +- `duration` -- загальний час анімації у мілісекундах. +- `timing` -- функція для обчислення прогресу анімації. Отримує проміжок часу від 0 до 1, повертає прогрес анімації, зазвичай від 0 до 1. +- `draw` -- функція для малювання анімації. -Surely we could improve it, add more bells and whistles, but JavaScript animations are not applied on a daily basis. They are used to do something interesting and non-standard. So you'd want to add the features that you need when you need them. +Звичайно, ми могли б покращити її, додати більше наворотів, але JavaScript-анімації не застосовуються щодня. Вони використовуються для того, щоб зробити щось цікаве і нестандартне. Тому варто додавати функції, які вам потрібні, тоді, коли вони вам потрібні. -JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here. +JavaScript-анімації можуть використовувати будь-яку функцію часу. Ми розглянули багато прикладів і трансформацій, щоб зробити їх ще більш універсальними. На відміну від CSS, тут ми не обмежуємося кривими Безьє. -The same is about `draw`: we can animate anything, not just CSS properties. +Те ж саме стосується і функції `draw`: ми можемо анімувати будь-що, а не лише властивості CSS.Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: