JavaScript-Problems-and-Solution/MakeBouncingBall.html at master · evitajain15/JavaScript-Problems-and-Solution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
	<title>Ball animation</title>
	<script src="https://js.cx/libs/animate.js"></script>
	<style>
		#field {
		  height: 200px;
		  border-bottom: 3px black groove;
		  position: relative;
		}

		#ball {
		  position: absolute;
		  cursor: pointer;
		}
	</style>
</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>