Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
6 changes: 3 additions & 3 deletions 7-animation/3-js-animation/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ These several independent redraws should be grouped together, to make the redraw

There's one more thing to keep in mind. Sometimes CPU is overloaded, or there are other reasons to redraw less often (like when the browser tab is hidden), so we really shouldn't run it every `20ms`.

But how do we know about that in JavaScript? There's a specification [Animation timing](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
But how do we know about that in JavaScript? There's a specification [Animation timing](https://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.

The syntax:
```js
Expand All @@ -96,7 +96,7 @@ The returned value `requestId` can be used to cancel the call:
cancelAnimationFrame(requestId);
```

The `callback` gets one argument -- the time passed from the beginning of the page load in microseconds. This time can also be obtained by calling [performance.now()](mdn:api/Performance/now).
The `callback` gets one argument -- the time passed from the beginning of the page load in milliseconds. This time can also be obtained by calling [performance.now()](mdn:api/Performance/now).

Usually `callback` runs very soon, unless the CPU is overloaded or the laptop battery is almost discharged, or there's another reason.

Expand Down Expand Up @@ -159,7 +159,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
}
```

It's graph:
Its graph:
![](linear.svg)

That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
Expand Down
2 changes: 1 addition & 1 deletion 7-animation/3-js-animation/text.view/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
timing: bounce,
draw: function(progress) {
let result = (to - from) * progress + from;
textArea.value = text.substr(0, Math.ceil(result))
textArea.value = text.slice(0, Math.ceil(result))
}
});
}
Expand Down