-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelastic.html
91 lines (79 loc) · 1.79 KB
/
elastic.html
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="full-screen" content="yes">
<title>pixelImage</title>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
}
#wrap {
margin: 20px auto;
border: 1px solid #000;
width: 400px;
height: 400px;
position: relative;
}
#round {
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
position: absolute;
top: 10px;
left: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="round"></div>
</div>
<div id="run1">run</div>
</body>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
window.RAMT = setTimeout(callback, 1000 / 60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame || window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function(){
clearTimeout(window.RAMT);
};
var dx = 200,
a = 100,
A0 = 0,
s_t = 0,
n_t,t,x;
A0 = dx - round.offsetLeft;
var run = document.getElementById('run1');
run1.addEventListener('click',function(){
s_t = new Date().getTime();
doo();
},false);
function doo(){
requestAnimationFrame(move);
}
function move(){
n_t = new Date().getTime();
t = n_t - s_t;
a -= 5;
x = A0*Math.exp(-t*0.002)*Math.sin(1000*t + Math.PI/3);
console.log(x);
// console.log(a);
round.style.left = (A0 + x) + 'px';
if(Math.abs(x) < 0.01){
cancelAnimationFrame(move);
}
else{
setTimeout(function(){
requestAnimationFrame(move);
},0)
}
}
</script>
</html>