jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-05-22 01:14:22 +03:00
parent cfff5c1622
commit db32cd032c
2 changed files with 3 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
7-animation/3-js-animation/1-animate-ball/solution.md
View file

@ -1,10 +1,8 @@
To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
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.
So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
Here's the final code for the animation:

2
7-animation/3-js-animation/article.md
View file

@ -75,7 +75,7 @@ setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);
```
These several independent redraws should be grouped together, to make the redraw easier for the browser (and hence smoother for people).
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`.