Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions 7-animation/3-js-animation/1-animate-ball/solution.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
Para rebotar podemos usar la propiedad CSS `top` y `position:absolute` para la pelota dentro del campo con `position:relative`.

The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
La coordenada inferior del campo es `field.clientHeight`. La propiedad CSS `top` se refiere al borde superior de la bola. Por lo tanto, debe ir desde `0` hasta `field.clientHeight - ball.clientHeight`, que es la posición final más baja del borde superior de la pelota.

To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
Para obtener el efecto de "rebote", podemos usar la función de sincronización `bounce` en el modo `easyOut`.

Here's the final code for the animation:
Aquí está el código final de la animación:

```js
let to = field.clientHeight - ball.clientHeight;
Expand Down
4 changes: 2 additions & 2 deletions 7-animation/3-js-animation/1-animate-ball/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ importance: 5

---

# Animate the bouncing ball
# Animar la pelota que rebota

Make a bouncing ball. Click to see how it should look:
Haz una pelota que rebote. Haz clic para ver cómo debería verse:

[iframe height=250 src="solution"]
14 changes: 7 additions & 7 deletions 7-animation/3-js-animation/2-animate-ball-hops/solution.md
Original file line number Diff line number Diff line change
@@ -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`.
En la tarea <info:task/animate-ball> solo teníamos una propiedad para animar. Ahora necesitamos una más: `elem.style.left`.

The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
La coordenada horizontal cambia por otra ley: no "rebota", sino que aumenta gradualmente desplazando la pelota hacia la derecha.

We can write one more `animate` for it.
Podemos escribir una `animate` más para ello.

As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
Como función de tiempo podríamos usar `linear`, pero algo como `makeEaseOut(quad)` se ve mucho mejor.

The code:
El código:

```js
let height = field.clientHeight - ball.clientHeight;
let width = 100;

// animate top (bouncing)
// animate top (rebotando)
animate({
duration: 2000,
timing: makeEaseOut(bounce),
Expand All @@ -21,7 +21,7 @@ animate({
}
});

// animate left (moving to the right)
// animate left (moviéndose a la derecha)
animate({
duration: 2000,
timing: makeEaseOut(quad),
Expand Down
8 changes: 4 additions & 4 deletions 7-animation/3-js-animation/2-animate-ball-hops/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# Animate the ball bouncing to the right
# Animar la pelota rebotando hacia la derecha

Make the ball bounce to the right. Like this:
Haz que la pelota rebote hacia la derecha. Así:

[iframe height=250 src="solution"]

Write the animation code. The distance to the left is `100px`.
Escribe el código de la animación. La distancia a la izquierda es `100px`.

Take the solution of the previous task <info:task/animate-ball> as the source.
Toma la solución de la tarea anterior <info:task/animate-ball> como fuente.
Loading