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

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;
}