| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style type="text/css"> | |
| 5 #animatable { | |
| 6 position: absolute; | |
| 7 left: 0; | |
| 8 top: 0; | |
| 9 height: 100px; | |
| 10 width: 100px; | |
| 11 background-color: green; | |
| 12 -webkit-border-radius: 10px; | |
| 13 -webkit-transition: -webkit-transform 1s; | |
| 14 } | |
| 15 | |
| 16 #poster { | |
| 17 font-family: 'Georgia', serif; | |
| 18 font-size: 36px; | |
| 19 font-weight: bold; | |
| 20 text-align: center; | |
| 21 margin-top: 28px; | |
| 22 } | |
| 23 | |
| 24 #text { | |
| 25 position: absolute; | |
| 26 left: 20px; | |
| 27 top: 400px; | |
| 28 } | |
| 29 | |
| 30 #text > p { | |
| 31 font-family: 'Verdana', serif; | |
| 32 font-size: 12px; | |
| 33 font-weight: bold; | |
| 34 } | |
| 35 </style> | |
| 36 <script type="text/javascript"> | |
| 37 const initialValues = [ | |
| 38 "translate3d(100px, 100px, 0px)", | |
| 39 "rotate3d(0, 1, 0, 0deg)", | |
| 40 "scale3d(1, 1, 1)", | |
| 41 "perspective(10000)", | |
| 42 "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)", | |
| 43 "skew(0deg, 0deg)" | |
| 44 ]; | |
| 45 | |
| 46 const targetValues = [ | |
| 47 "translate3d(250px, 250px, 0px)", | |
| 48 "rotate3d(0, 1, 0, 30deg)", | |
| 49 "scale3d(2, 2, 2)", | |
| 50 "perspective(200)", | |
| 51 "matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)", | |
| 52 "skew(10deg, 10deg)" | |
| 53 ]; | |
| 54 | |
| 55 var i = 1; | |
| 56 var iterations = Math.pow(2, initialValues.length); | |
| 57 var oldStyle = ""; | |
| 58 | |
| 59 // For the buffon needle experiment below. | |
| 60 var hits = 0; | |
| 61 var trials = 0; | |
| 62 var estimate = 0; | |
| 63 | |
| 64 function triggerTransition() | |
| 65 { | |
| 66 var style = ""; | |
| 67 var elem = document.getElementById("animatable"); | |
| 68 | |
| 69 for (var j = 0; j < initialValues.length; ++j) { | |
| 70 if (j > 0) | |
| 71 style += " "; | |
| 72 | |
| 73 var values = initialValues; | |
| 74 if (Math.floor(i / Math.pow(2, j)) % 2 == 1) | |
| 75 values = targetValues; | |
| 76 | |
| 77 style += values[j]; | |
| 78 } | |
| 79 | |
| 80 elem.style.webkitTransform = style; | |
| 81 i++; | |
| 82 | |
| 83 document.getElementById("from").innerHTML = "From:<br> " + oldStyle; | |
| 84 document.getElementById("to").innerHTML = "To:<br> " + style; | |
| 85 document.getElementById("estimate").innerHTML = "Buffon estimate of pi aft
er " + trials.toString() + " needle drops:<br>" + estimate.toString(); | |
| 86 | |
| 87 oldStyle = style; | |
| 88 | |
| 89 if (i < iterations) | |
| 90 setTimeout(triggerTransition, 1000); | |
| 91 } | |
| 92 | |
| 93 function buffonStep() | |
| 94 { | |
| 95 for (var step = 0; step < 100000; ++step) { | |
| 96 var x = 2.0 * Math.random(); | |
| 97 x = Math.min(x, 2.0 - x); | |
| 98 | |
| 99 if (Math.cos(Math.PI * Math.random() * 0.5) > x) | |
| 100 hits++; | |
| 101 | |
| 102 trials++; | |
| 103 | |
| 104 if (hits > 0) | |
| 105 estimate = 2 * trials / hits; | |
| 106 } | |
| 107 | |
| 108 if (i < iterations) | |
| 109 setTimeout(buffonStep, 0); | |
| 110 } | |
| 111 | |
| 112 function startExperiment() | |
| 113 { | |
| 114 triggerTransition(); | |
| 115 buffonStep(); | |
| 116 } | |
| 117 | |
| 118 window.addEventListener('load', startExperiment, false); | |
| 119 </script> | |
| 120 </head> | |
| 121 <body> | |
| 122 <div id="animatable"><p id="poster">Hi!</p></div> | |
| 123 <div id="text"> | |
| 124 <p id="from">From:</p> | |
| 125 <p id="to">To:</p> | |
| 126 <p id="estimate">Estimate:</p> | |
| 127 </div> | |
| 128 </body> | |
| 129 </html> | |
| 130 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 11787013:
Rename animations pageset to tough_animation_cases (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src