OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <div> | |
3 <object id="svg-content" data="./resources/Bamboo.svg" width="400px" height= "400px" type="image/svg+xml"> | |
pdr.
2015/08/26 21:19:40
Nit: just data="resources/Bamboo.svg"
| |
4 </object> | |
5 </div> | |
6 <script src="../resources/runner.js"></script> | |
7 <script> | |
8 var svgContent; | |
9 var startTime; | |
10 var loop_iterations = 5; | |
11 var ANIMATION_ITERATIONS = 20; | |
12 var animation_loop; | |
13 var offset; | |
14 var state; | |
15 var delta; | |
16 var results = []; | |
17 var now = function(){ | |
18 return window.performance ? performance.now() : Date.now(); | |
19 }; | |
20 var init = function(){ | |
21 animation_loop = ANIMATION_ITERATIONS; | |
22 offset = 0; | |
23 state = 'zoomin'; | |
24 delta = 1; | |
25 startTime = now(); | |
26 requestAnimationFrame(step); | |
27 }; | |
28 var step = function(){ | |
29 animation_loop--; | |
30 if (animation_loop==0){ | |
31 animation_loop = ANIMATION_ITERATIONS; | |
32 switch(state){ | |
33 case 'zoomin': | |
34 state='scroll'; | |
35 delta = 0; | |
36 break; | |
37 case 'scroll': | |
38 state='zoomout'; | |
39 delta = 2; | |
40 break; | |
41 case 'zoomout': | |
42 loop_iterations--; | |
43 results.push(now()-startTime); | |
44 if (loop_iterations>0) | |
45 init(); | |
46 else{ | |
47 PerfTestRunner.logStatistics(results, 'ms', "Time:"); | |
48 if (testRunner) testRunner.notifyDone(); | |
49 } | |
50 return; | |
51 } | |
52 } | |
53 switch(state){ | |
54 case 'zoomin': | |
55 delta += 0.05; | |
56 svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)'; | |
57 break; | |
58 case 'scroll': | |
59 if (animation_loop>ANIMATION_ITERATIONS/2) delta += 20; | |
60 else delta -= 20; | |
61 svgContent.style.transform='matrix(2,0,0,2,'+delta+',0)'; | |
62 break; | |
63 case 'zoomout': | |
64 delta -= 0.05; | |
65 svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)'; | |
66 break; | |
67 } | |
68 requestAnimationFrame(step); | |
69 }; | |
70 window.onload = function(){ | |
71 svgContent = document.getElementById('svg-content').contentDocument.document Element; | |
72 init(); | |
73 } | |
74 </script> | |
OLD | NEW |