| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 Copyright (c) 2012 Cameron Adams. All rights reserved. | |
| 3 Copyright (c) 2012 Code Aurora Forum. All rights reserved. | |
| 4 Copyright (C) 2013 Google Inc. All rights reserved. | |
| 5 | |
| 6 Redistribution and use in source and binary forms, with or without | |
| 7 modification, are permitted provided that the following conditions are | |
| 8 met: | |
| 9 * Redistributions of source code must retain the above copyright | |
| 10 notice, this list of conditions and the following disclaimer. | |
| 11 * Redistributions in binary form must reproduce the above | |
| 12 copyright notice, this list of conditions and the following disclaimer | |
| 13 in the documentation and/or other materials provided with the | |
| 14 distribution. | |
| 15 * Neither the name of Code Aurora Forum Inc., Google Inc. nor the | |
| 16 names of its contributors may be used to endorse or promote products | |
| 17 derived from this software without specific prior written permission. | |
| 18 | |
| 19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS | |
| 20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT | |
| 21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR | |
| 22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT | |
| 23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, | |
| 24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT | |
| 25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | |
| 26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | |
| 27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
| 28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
| 29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
| 30 | |
| 31 This test is based on code written by Cameron Adams and imported from | |
| 32 http://themaninblue.com/experiment/AnimationBenchmark/html | |
| 33 --> | |
| 34 | |
| 35 <!doctype html> | |
| 36 <head> | |
| 37 <title>Benchmark - Balls Animation using CSS Animations</title> | |
| 38 <style> | |
| 39 html { | |
| 40 height: 100%; | |
| 41 } | |
| 42 | |
| 43 body { | |
| 44 width: 100%; | |
| 45 height: 100%; | |
| 46 overflow: hidden; | |
| 47 margin: 0; | |
| 48 padding: 0; | |
| 49 } | |
| 50 | |
| 51 span { | |
| 52 position: absolute; | |
| 53 width: 12px; | |
| 54 height: 12px; | |
| 55 border-radius: 6px; | |
| 56 } | |
| 57 </style> | |
| 58 <script src="../resources/runner.js"></script> | |
| 59 <script src="resources/framerate.js"></script> | |
| 60 <script> | |
| 61 var stageWidth = 600; | |
| 62 var stageHeight = 600; | |
| 63 var maxParticles = 500; | |
| 64 var minVelocity = 50; | |
| 65 var maxVelocity = 500; | |
| 66 var particleRadius = 6; | |
| 67 var colors = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"]; | |
| 68 var animationDuration = 10; | |
| 69 | |
| 70 var particles = []; | |
| 71 var allParticleKeyframes = []; | |
| 72 | |
| 73 window.onload = function () { | |
| 74 PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps
'}); | |
| 75 | |
| 76 // Create the particles | |
| 77 for (var i = 0; i < maxParticles; i++) { | |
| 78 generateParticleKeyframes(i); | |
| 79 var particle = new Particle(i); | |
| 80 particles.push(particle); | |
| 81 } | |
| 82 for (var i = 0; i < maxParticles; i++) | |
| 83 particles[i].start(); | |
| 84 | |
| 85 startTrackingFrameRate(); | |
| 86 } | |
| 87 | |
| 88 function generateParticleKeyframes(index) { | |
| 89 allParticleKeyframes[index] = []; | |
| 90 | |
| 91 var angle = Math.PI * 2 * PerfTestRunner.random(); | |
| 92 var velocity = minVelocity + ((maxVelocity - minVelocity) * PerfTestRunner.r
andom()); | |
| 93 var x = stageWidth / 2 - particleRadius; | |
| 94 var y = stageHeight / 2 - particleRadius; | |
| 95 var dx = Math.cos(angle) * velocity; | |
| 96 var dy = Math.sin(angle) * velocity; | |
| 97 | |
| 98 function detectCollision(lineX, normalX, lineY, normalY) { | |
| 99 var dtx = Infinity; | |
| 100 var dty = Infinity; | |
| 101 if (dx * normalX < 0) | |
| 102 dtx = (lineX - x) / dx; | |
| 103 if (dy * normalY < 0) | |
| 104 dty = (lineY - y) / dy; | |
| 105 var dt = Math.min(dtx, dty); | |
| 106 var hitX = (dtx < dty); | |
| 107 return { | |
| 108 dt: dt, | |
| 109 x: hitX ? lineX : x + (dx * dt), | |
| 110 y: hitX ? y + (dy * dt) : lineY, | |
| 111 dx: hitX ? -dx : dx, | |
| 112 dy: hitX ? dy : -dy, | |
| 113 }; | |
| 114 } | |
| 115 | |
| 116 var t = 0; | |
| 117 allParticleKeyframes[index].push(generateKeyframe(0, x, y)); | |
| 118 while (t < animationDuration) { | |
| 119 var collisionA = detectCollision(0, 1, 0, 1); | |
| 120 var collisionB = detectCollision(stageWidth, -1, stageHeight, -1); | |
| 121 var collision = collisionA.dt < collisionB.dt ? collisionA : collisionB; | |
| 122 if (t + collision.dt > animationDuration) { | |
| 123 var dt = animationDuration - t; | |
| 124 t = animationDuration; | |
| 125 x += dx * dt; | |
| 126 y += dy * dt; | |
| 127 } else { | |
| 128 t += collision.dt; | |
| 129 x = collision.x; | |
| 130 y = collision.y; | |
| 131 dx = collision.dx; | |
| 132 dy = collision.dy; | |
| 133 } | |
| 134 allParticleKeyframes[index].push(generateKeyframe(t, x, y)); | |
| 135 } | |
| 136 | |
| 137 return keyframes; | |
| 138 } | |
| 139 | |
| 140 function generateKeyframe(t, x, y) { | |
| 141 return {left: x + "px", top: y + "px", offset: t / animationDuration }; | |
| 142 } | |
| 143 | |
| 144 function Particle(index) | |
| 145 { | |
| 146 // Create visual element for the particle. | |
| 147 var domNode = document.createElement('span'); | |
| 148 document.body.appendChild(domNode); | |
| 149 | |
| 150 // Set colour of element. | |
| 151 domNode.style.backgroundColor = colors[Math.floor(Math.random() * colors.len
gth)]; | |
| 152 | |
| 153 function start() { | |
| 154 var player = domNode.animate(allParticleKeyframes[index], {easing: "line
ar", iterations: Infinity, direction: "alternate", duration: animationDuration})
; | |
| 155 } | |
| 156 | |
| 157 function destroy() | |
| 158 { | |
| 159 document.body.removeChild(domNode); | |
| 160 } | |
| 161 | |
| 162 this.start = start; | |
| 163 this.destroy = destroy; | |
| 164 } | |
| 165 | |
| 166 function onCompletedRun() { | |
| 167 testRunning = false; | |
| 168 stopTrackingFrameRate(); | |
| 169 | |
| 170 for (var i = 0; i < particles.length; i++) | |
| 171 particles[i].destroy(); | |
| 172 particles = []; | |
| 173 } | |
| 174 </script> | |
| 175 <style id="keyframes"></style> | |
| 176 </head> | |
| 177 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 299073003:
Web Animations API: Avoid style resolution when calling element.animate() (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master