Merge pull request #2351 from vsemozhetbyt/7.3
Fix typos in 7.3 (JavaScript animations)
This commit is contained in:
commit
38407b17b0
2 changed files with 5 additions and 5 deletions
|
@ -2,7 +2,7 @@ To bounce we can use CSS property `top` and `position:absolute` for the ball ins
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
|
To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
|
||||||
|
|
||||||
Here's the final code for the animation:
|
Here's the final code for the animation:
|
||||||
|
|
||||||
|
|
|
@ -77,7 +77,7 @@ setInterval(animate3, 20);
|
||||||
|
|
||||||
These several independent redraws should be grouped together, to make the redraw easier for the browser and hence load less CPU load and look smoother.
|
These several independent redraws should be grouped together, to make the redraw easier for the browser and hence load less CPU load and look smoother.
|
||||||
|
|
||||||
There's one more thing to keep in mind. Sometimes when 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`.
|
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](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
|
||||||
|
|
||||||
|
@ -227,7 +227,7 @@ See in action (click to activate):
|
||||||
|
|
||||||
[iframe height=40 src="quad" link]
|
[iframe height=40 src="quad" link]
|
||||||
|
|
||||||
...Or the cubic curve or event greater `n`. Increasing the power makes it speed up faster.
|
...Or the cubic curve or even greater `n`. Increasing the power makes it speed up faster.
|
||||||
|
|
||||||
Here's the graph for `progress` in the power `5`:
|
Here's the graph for `progress` in the power `5`:
|
||||||
|
|
||||||
|
@ -397,7 +397,7 @@ The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
|
- <span style="color:#EE6B47">Red</span> is the regular variant of `circ` (`easeIn`).
|
||||||
- <span style="color:#8DB173">Green</span> -- `easeOut`.
|
- <span style="color:#8DB173">Green</span> -- `easeOut`.
|
||||||
- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
|
- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
|
||||||
|
|
||||||
|
@ -405,7 +405,7 @@ As we can see, the graph of the first half of the animation is the scaled down `
|
||||||
|
|
||||||
## More interesting "draw"
|
## More interesting "draw"
|
||||||
|
|
||||||
Instead of moving the element we can do something else. All we need is to write the write the proper `draw`.
|
Instead of moving the element we can do something else. All we need is to write the proper `draw`.
|
||||||
|
|
||||||
Here's the animated "bouncing" text typing:
|
Here's the animated "bouncing" text typing:
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue