FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

JavaScript animations by longo-andrea · Pull Request #287 · javascript-tutorial/it.javascript.info · GitHub

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension .html  (1) .md  (6) All 2 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
        • solution.md
        • task.md
        • solution.md
        • task.md
      • article.md
        • index.html
    • index.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
Per il rimbalzo potete utilizzare la proprietà CSS `top` e `position:absolute` sulla palla dentro il 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.
Le coordinate del fondo del campo sono `field.clientHeight`. La proprietà CSS `top` fa riferimento al bordo alto della palla. Quindi dovrebbe andare da `0` fino a `field.clientHeight - ball.clientHeight`, questa è la posizione finale, quella più bassa rispetto al bordo alto della palla.

To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
Per dare l'effetto di "rimbalzo" possiamo utilizzare la funzione di temporizzazione `bounce` in modalità `easeOut`.

Here's the final code for the animation:

Expand Down
4 changes: 2 additions & 2 deletions 7-animation/3-js-animation/1-animate-ball/task.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ importance: 5

---

# Animate the bouncing ball
# Fate rimbalzare la palla

Make a bouncing ball. Click to see how it should look:
Fate rimbalzare la palla. Clicca per vedere come dovrebbe apparire l'animazione:

[iframe height=250 src="solution"]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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`.
Nell'esercizio <info:task/animate-ball> era richiesto di animare una sola proprietà. Ora dovete animarne una in più: `elem.style.left`.

The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
La coordinata orizzontale varia secondo un'altra regola: non deve limitarsi a rimbalzare, ma deve anche scorrere verso destra.

We can write one more `animate` for it.
Potete scrivere un ulteriore `animate` per questo.

As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
Potreste utilizzare la funzione di temporizzazione `linear`, ma qualcosa come `makeEaseOut(quad)` renderà l'animazione migliore.

The code:
Il codice:

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

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

// animate left (moving to the right)
// anima left (sposta verso destra)
animate({
duration: 2000,
timing: makeEaseOut(quad),
Expand Down
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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
# Fate rimbalzare la palla verso destra

Make the ball bounce to the right. Like this:
Fate rimbalzare la palla verso destra. Come nell'esempio:

[iframe height=250 src="solution"]

Write the animation code. The distance to the left is `100px`.
Scrivete il codice relativo all'animazione. La distanza da sinistra è `100px`.

Take the solution of the previous task <info:task/animate-ball> as the source.
Prendete la soluzione dell'esercizio precedente <info:task/animate-ball> come punto di partenza.
Loading

Back | FazBrowse Home | New Git URL