Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(388)

Unified Diff: pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html b/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html
new file mode 100644
index 0000000000000000000000000000000000000000..8c558842a750dc0c134b6f5b42f7d8f7f56de737
--- /dev/null
+++ b/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html
@@ -0,0 +1,147 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+This test is based on code written by Cameron Adams and imported from
+ http://themaninblue.com/experiment/AnimationBenchmark/html
+-->
+<!doctype html>
+<head>
+<style>
+.ball {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ border-radius: 100%;
+}
+</style>
+</head>
+<script src="perf.js"></script>
+<script src="../../web-animations.js"></script>
+<script>
+'use strict';
+
+var stageWidth = 600;
+var stageHeight = 600;
+var particleCount = 2500;
+var minVelocity = 50;
+var maxVelocity = 500;
+var particleRadius = 6;
+var colors = ['#cc0000', '#ffcc00', '#aaff00', '#0099cc', '#194c99', '#661999'];
+var animationDuration = 10;
+
+var particles = [];
+var player;
+
+var Particle = function() {
+ this.element = document.createElement('div');
+ this.element.className = 'ball';
+ this.element.style.backgroundColor = colors[Math.floor(Perf.random() * colors.length)];
+ this.element.style.left = (stageWidth / 2 - particleRadius) + 'px';
+ this.element.style.top = (stageHeight / 2 - particleRadius) + 'px';
+ document.body.appendChild(this.element);
+};
+
+Particle.prototype.generateAnimation = function(duration) {
+ var keyframes = [];
+
+ var angle = Math.PI * 2 * Perf.random();
+ var velocity = minVelocity + ((maxVelocity - minVelocity) * Perf.random());
+ var x = 0;
+ var y = 0;
+ var dx = Math.cos(angle) * velocity;
+ var dy = Math.sin(angle) * velocity;
+
+ var nextCollision = function(lineX, normalX, lineY, normalY) {
+ var dtx = Infinity;
+ var dty = Infinity;
+ if (dx * normalX < 0)
+ dtx = (lineX - x) / dx;
+ if (dy * normalY < 0)
+ dty = (lineY - y) / dy;
+ var dt = Math.min(dtx, dty);
+ var hitX = (dtx < dty);
+ return {
+ dt: dt,
+ x: hitX ? lineX : x + (dx * dt),
+ y: hitX ? y + (dy * dt) : lineY,
+ dx: hitX ? -dx : dx,
+ dy: hitX ? dy : -dy,
+ };
+ };
+
+ var t = 0;
+ keyframes.push(this.createKeyframe(0, x, y));
+ while (t < duration) {
+ var collisionA = nextCollision(-stageWidth / 2, 1, -stageHeight / 2, 1);
+ var collisionB = nextCollision(stageWidth / 2, -1, stageHeight / 2, -1);
+ var collision = collisionA.dt < collisionB.dt ? collisionA : collisionB;
+ if (t + collision.dt > duration) {
+ var dt = duration - t;
+ t = duration;
+ x += dx * dt;
+ y += dy * dt;
+ } else {
+ t += collision.dt;
+ x = collision.x;
+ y = collision.y;
+ dx = collision.dx;
+ dy = collision.dy;
+ }
+ keyframes.push(this.createKeyframe(t / duration, x, y));
+ }
+
+ return new Animation(this.element, keyframes, duration);
+};
+
+Particle.prototype.createKeyframe = function(offset, x, y) {
+ return {
+ composite: 'add',
+ offset: offset,
+ left: x + 'px',
+ top: y + 'px',
+ };
+};
+
+Particle.prototype.destroy = function() {
+ document.body.removeChild(this.element);
+};
+
+function cleanUp() {
+ player.source = null;
+ for (var i = 0; i < particles.length; i++) {
+ particles[i].destroy();
+ }
+ particles = [];
+}
+
+window.addEventListener('load', function () {
+ var spacing = document.createElement('div');
+ spacing.style.display = 'inline-block';
+ spacing.style.width = '600px';
+ document.body.appendChild(spacing);
+
+ var parGroup = new ParGroup([], {iterations: Infinity, direction: 'alternate'});
+ for (var i = 0; i < particleCount; i++) {
+ var particle = new Particle();
+ parGroup.append(particle.generateAnimation(animationDuration));
+ particles.push(particle);
+ }
+ player = document.timeline.play(parGroup);
+
+ Perf.oncomplete = cleanUp;
+ Perf.start();
+});
+
+</script>

Powered by Google App Engine
This is Rietveld 408576698