You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-animation/3-js-animation/article.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -60,7 +60,7 @@ If we run them separately, each one with its own `setInterval(..., 20)`, then th
60
60
61
61
Each `setInterval` triggers once per `20ms`, but they are independent, so we have several independent runs within `20ms`.
62
62
63
-
These several independant actions should be grouped together, because it's easier for the browser to redraw things once per `20ms`.
63
+
These several independent actions should be grouped together, because it's easier for the browser to redraw things once per `20ms`.
64
64
65
65
In other words, this:
66
66
@@ -105,7 +105,7 @@ The `callback` gets one argument -- the time passed from the beginning of the pa
105
105
106
106
Usually `callback` runs very soon, unless the CPU is overloaded or the laptop battery is almost discharged, or there's another reason.
107
107
108
-
The code below shows the time between first 20 runs fo`requestAnimationFrame`. Usually it's 10-20ms:
108
+
The code below shows the time between first 20 runs for`requestAnimationFrame`. Usually it's 10-20ms:
109
109
110
110
```html run height=40 refresh
111
111
<script>
@@ -148,13 +148,13 @@ function animate({timing, draw, duration}) {
148
148
}
149
149
```
150
150
151
-
Function `animate` accepts 3 parameters that essentially describe the animation:
151
+
Function `animate` accepts 3 parameters that essentially describes the animation:
152
152
153
153
`duration`
154
154
: Total time of animation. Like, `1000`.
155
155
156
156
`timing(timeFraction)`
157
-
: Timing function, like CSS-property `transition-timing-function` that takes 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).
157
+
: 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).
158
158
159
159
For instance, a linear function means that the animation goes on uniformly with the same speed:
160
160
@@ -204,7 +204,7 @@ animate({
204
204
});
205
205
```
206
206
207
-
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 beyound properties, create new elements for like fireworks animation or something.
207
+
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.
208
208
209
209
## Timing functions
210
210
@@ -276,7 +276,7 @@ function back(x, timeFraction) {
276
276
277
277

278
278
279
-
For animation we use it with a concrete value of `x`. Example for `x = 1.5`:
279
+
For animation we use it with a specific value of `x`. Example for `x = 1.5`:
0 commit comments