Merge pull request #179 from nglazov/7-animation/3-js-animation

7-animation/3-js-animation

7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,12 +1,10 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+Чтобы заставить мячик прыгать, можно использовать CSS-свойство `top` и задать мячику `position:absolute` внутри поля с `position:relative`.
 
-The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
+Нижняя координата поля -- `field.clientHeight`. CSS-свойство `top` относится к верхней границе мяча, которая должна идти от 0 до `field.clientHeight - ball.clientHeight`.
 
-So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
+А чтобы получить эффект "скачущего" мяча, мы можем использовать функцию расчета времени `bounce` в режиме `easeOut`.
 
-Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
-
-Here's the final code for the animation:
+Вот конечный код для анимации:
 
 ```js
 let to = field.clientHeight - ball.clientHeight;

7-animation/3-js-animation/1-animate-ball/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# Анимируйте прыгающий мячик
 
-Make a bouncing ball. Click to see how it should look:
+Создайте прыгающий мячик. Кликните, чтобы посмотреть, как это должно выглядеть:
 
 [iframe height=250 src="solution"]

7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -1,18 +1,18 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+В задаче <info:task/animate-ball> нам надо было анимировать только одно свойство. Теперь необходимо добавить еще одно: `elem.style.left`.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+Горизонтальная координата меняется по другому закону: она не «подпрыгивает», а постепенно увеличивается, сдвигая шар вправо.
 
-We can write one more `animate` for it.
+Для этого мы можем написать еще одну функцию `animate`.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+В качестве временной функции можно использовать `linear`, но `makeEaseOut(quad)` будет выглядеть гораздо лучше.
 
-The code:
+Код:
 
 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;
 
-// animate top (bouncing)
+// анимация top (прыжки)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
@@ -21,7 +21,7 @@ animate({
   }
 });
 
-// animate left (moving to the right)
+// анимация left (движение вправо)
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),

7-animation/3-js-animation/2-animate-ball-hops/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# Анимируйте мячик, прыгающий вправо
 
-Make the ball bounce to the right. Like this:
+Сделайте отскок мяча вправо. Как в примере:
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+Напишите код для анимации. Расстояние слева `100px`.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+Возьмите решение предыдущей задачи <info:task/animate-ball> за основу.