OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 3 <script src="resources/web-animations-api-check.js"></script> |
| 4 <container id="container"></container> |
| 5 <script> |
| 6 var N = 1000; |
| 7 var duration = 1000; |
| 8 var players = []; |
| 9 var prevTime = null; |
| 10 |
| 11 for (var i = 0; i < N; i++) { |
| 12 var target = document.createElement('target'); |
| 13 container.appendChild(target); |
| 14 |
| 15 var animation = new Animation(target, [ |
| 16 {opacity: '0.0'}, |
| 17 {opacity: '1.0'}, |
| 18 ], { |
| 19 duration: duration, |
| 20 iterations: Infinity, |
| 21 }); |
| 22 var player = document.timeline.play(animation); |
| 23 player.pause(); |
| 24 players.push(player); |
| 25 } |
| 26 |
| 27 function setCurrentTime(time) { |
| 28 if (prevTime == null) { |
| 29 prevTime = time; |
| 30 } |
| 31 var delta = time - prevTime; |
| 32 players.forEach(function(player) { |
| 33 player.currentTime += delta; |
| 34 }); |
| 35 prevTime = time; |
| 36 |
| 37 requestAnimationFrame(setCurrentTime); |
| 38 } |
| 39 requestAnimationFrame(setCurrentTime); |
| 40 |
| 41 requestAnimationFrame(function() { |
| 42 window.measurementReady = true; |
| 43 }); |
| 44 </script> |
| 45 <style> |
| 46 body { |
| 47 margin: 0; |
| 48 overflow: hidden; |
| 49 } |
| 50 container { |
| 51 display: flex; |
| 52 flex-flow: row wrap; |
| 53 width: 550px; |
| 54 height: 800px; |
| 55 background: magenta; |
| 56 } |
| 57 target { |
| 58 display: inline-block; |
| 59 width: 9px; height: 9px; |
| 60 background: orange; |
| 61 } |
| 62 </style> |
OLD | NEW |