OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2012 Cameron Adams. All rights reserved. | 2 Copyright (c) 2012 Cameron Adams. All rights reserved. |
3 Copyright (c) 2012 Code Aurora Forum. All rights reserved. | 3 Copyright (c) 2012 Code Aurora Forum. All rights reserved. |
4 Copyright (C) 2013 Google Inc. All rights reserved. | 4 Copyright (C) 2013 Google Inc. All rights reserved. |
5 | 5 |
6 Redistribution and use in source and binary forms, with or without | 6 Redistribution and use in source and binary forms, with or without |
7 modification, are permitted provided that the following conditions are | 7 modification, are permitted provided that the following conditions are |
8 met: | 8 met: |
9 * Redistributions of source code must retain the above copyright | 9 * Redistributions of source code must retain the above copyright |
10 notice, this list of conditions and the following disclaimer. | 10 notice, this list of conditions and the following disclaimer. |
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
125 y += dy * dt; | 125 y += dy * dt; |
126 } else { | 126 } else { |
127 t += collision.dt; | 127 t += collision.dt; |
128 x = collision.x; | 128 x = collision.x; |
129 y = collision.y; | 129 y = collision.y; |
130 dx = collision.dx; | 130 dx = collision.dx; |
131 dy = collision.dy; | 131 dy = collision.dy; |
132 } | 132 } |
133 allParticleKeyframes[index].push(generateKeyframe(t, x, y)); | 133 allParticleKeyframes[index].push(generateKeyframe(t, x, y)); |
134 } | 134 } |
135 | |
136 return keyframes; | |
137 } | 135 } |
138 | 136 |
139 function generateKeyframe(t, x, y) { | 137 function generateKeyframe(t, x, y) { |
140 return {left: x + "px", top: y + "px", offset: t / animationDuration }; | 138 return {left: x + "px", top: y + "px", offset: t / animationDuration }; |
141 } | 139 } |
142 | 140 |
143 function Particle(index) | 141 function Particle(index) |
144 { | 142 { |
145 // Create visual element for the particle. | 143 // Create visual element for the particle. |
146 var domNode = document.createElement('span'); | 144 var domNode = document.createElement('span'); |
147 document.body.appendChild(domNode); | 145 document.body.appendChild(domNode); |
148 | 146 |
149 // Set colour of element. | 147 // Set colour of element. |
150 domNode.style.backgroundColor = colors[Math.floor(Math.random() * colors.len
gth)]; | 148 domNode.style.backgroundColor = colors[Math.floor(Math.random() * colors.len
gth)]; |
151 | 149 |
152 function start() { | 150 function start() { |
153 var player = domNode.animate(allParticleKeyframes[index], {easing: "line
ar", iterations: Infinity, direction: "alternate", duration: animationDuration})
; | 151 var player = domNode.animate(allParticleKeyframes[index], {easing: "line
ar", iterations: Infinity, direction: "alternate", duration: animationDuration *
1000}); |
154 player.pause(); | 152 player.pause(); |
155 this.player = player; | 153 this.player = player; |
156 } | 154 } |
157 | 155 |
158 function destroy() | 156 function destroy() |
159 { | 157 { |
160 document.body.removeChild(domNode); | 158 document.body.removeChild(domNode); |
161 } | 159 } |
162 | 160 |
163 this.start = start; | 161 this.start = start; |
164 this.destroy = destroy; | 162 this.destroy = destroy; |
165 } | 163 } |
166 | 164 |
167 var start = null; | 165 var start = null; |
168 | 166 |
169 function advance(timestamp) | 167 function advance(timestamp) |
170 { | 168 { |
171 if (start == null) | 169 if (start == null) |
172 start = timestamp; | 170 start = timestamp; |
173 for (var x in particles) { | 171 for (var x in particles) { |
174 particles[x].player.currentTime = (timestamp - start) / 1000; | 172 particles[x].player.currentTime = timestamp - start; |
175 } | 173 } |
176 if (particles.length !== 0) | 174 if (particles.length !== 0) |
177 requestAnimationFrame(advance); | 175 requestAnimationFrame(advance); |
178 } | 176 } |
179 | 177 |
180 requestAnimationFrame(advance); | 178 requestAnimationFrame(advance); |
181 | 179 |
182 function onCompletedRun() { | 180 function onCompletedRun() { |
183 testRunning = false; | 181 testRunning = false; |
184 stopTrackingFrameRate(); | 182 stopTrackingFrameRate(); |
185 | 183 |
186 for (var i = 0; i < particles.length; i++) | 184 for (var i = 0; i < particles.length; i++) |
187 particles[i].destroy(); | 185 particles[i].destroy(); |
188 particles = []; | 186 particles = []; |
189 } | 187 } |
190 </script> | 188 </script> |
191 <style id="keyframes"></style> | 189 <style id="keyframes"></style> |
192 </head> | 190 </head> |
193 </html> | 191 </html> |
OLD | NEW |