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

renames

Browse source
This commit is contained in:
Ilya Kantor 2017-05-25 11:56:32 +03:00
parent 787d58a83f
commit 455d300d8d
280 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
3-animation/3-js-animation/1-animate-ball/solution.md Normal file
View file

@ -0,0 +1,21 @@
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`.
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.
Here's the final code for the animation:
```js
let to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw(progress) {
ball.style.top = to * progress + 'px'
}
});
```

51
3-animation/3-js-animation/1-animate-ball/solution.view/index.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<script src="https://js.cx/libs/animate.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
</div>
<script>
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
ball.onclick = function() {
let to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw(progress) {
ball.style.top = to * progress + 'px'
}
});
};
</script>
</body>
</html>

10
3-animation/3-js-animation/1-animate-ball/solution.view/style.css Normal file
View file

@ -0,0 +1,10 @@
#field {
height: 200px;
border-bottom: 3px black groove;
position: relative;
}
#ball {
position: absolute;
cursor: pointer;
}

19
3-animation/3-js-animation/1-animate-ball/source.view/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<script src="https://en.js.cx/libs/animate.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="field">
<img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball">
</div>
</body>
</html>

10
3-animation/3-js-animation/1-animate-ball/source.view/style.css Normal file
View file

@ -0,0 +1,10 @@
#field {
height: 200px;
border-bottom: 3px black groove;
position: relative;
}
#ball {
position: absolute;
cursor: pointer;
}

9
3-animation/3-js-animation/1-animate-ball/task.md Normal file
View file

@ -0,0 +1,9 @@
importance: 5
---
# Animate the bouncing ball
Make a bouncing ball. Click to see how it should look:
[iframe height=250 src="solution"]