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

32
3-animation/3-js-animation/2-animate-ball-hops/solution.md Normal file
View file

@ -0,0 +1,32 @@
In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
We can write one more `animate` for it.
As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
The code:
```js
let height = field.clientHeight - ball.clientHeight;
let width = 100;
// animate top (bouncing)
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw: function(progress) {
ball.style.top = height * progress + 'px'
}
});
// animate left (moving to the right)
animate({
duration: 2000,
timing: makeEaseOut(quad),
draw: function(progress) {
ball.style.left = width * progress + "px"
}
});
```

61
3-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html Normal file
View file

@ -0,0 +1,61 @@
<!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)
}
}
}
function quad(timeFraction) {
return Math.pow(timeFraction, 2);
}
ball.onclick = function() {
let height = field.clientHeight - ball.clientHeight;
let width = 100;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw: function(progress) {
ball.style.top = height * progress + 'px'
}
});
animate({
duration: 2000,
timing: makeEaseOut(quad),
draw: function(progress) {
ball.style.left = width * progress + "px"
}
});
}
</script>
</body>
</html>

10
3-animation/3-js-animation/2-animate-ball-hops/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;
}

13
3-animation/3-js-animation/2-animate-ball-hops/task.md Normal file
View file

@ -0,0 +1,13 @@
importance: 5
---
# Animate the ball bouncing to the left
Make the ball bounce to the left. Like this:
[iframe height=250 src="solution"]
Write the animation code. The distance to the right is `100px`.
Take the solution of the previous task <info:task/animate-ball> as the source.