From 808d561a2568dda7390c146ffbbede966cd1e39e Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Mon, 25 Apr 2011 15:06:26 +0200
Subject: [PATCH] test performance of svg transform vs css transform

---
 source/js/Ox.UI/{List => Map}/Ox.ListMap.js   |  0
 source/js/Ox.UI/Ox.UI.js                      | 30 +++++++++++-
 source/svg/Ox.UI.classic/symbolLoading.svg    | 48 +++++--------------
 .../Ox.UI.classic/symbolLoadingAnimated.svg   | 40 ++++++++++++++++
 4 files changed, 80 insertions(+), 38 deletions(-)
 rename source/js/Ox.UI/{List => Map}/Ox.ListMap.js (100%)
 create mode 100644 source/svg/Ox.UI.classic/symbolLoadingAnimated.svg

diff --git a/source/js/Ox.UI/List/Ox.ListMap.js b/source/js/Ox.UI/Map/Ox.ListMap.js
similarity index 100%
rename from source/js/Ox.UI/List/Ox.ListMap.js
rename to source/js/Ox.UI/Map/Ox.ListMap.js
diff --git a/source/js/Ox.UI/Ox.UI.js b/source/js/Ox.UI/Ox.UI.js
index 3dbaf1fe..92df78a5 100644
--- a/source/js/Ox.UI/Ox.UI.js
+++ b/source/js/Ox.UI/Ox.UI.js
@@ -75,7 +75,7 @@ Ox.load.UI = function(options, callback) {
         browserSupported ? showIcon() : showWarning(); 
 
         function showIcon() {
-            var src = Ox.PATH + 'svg/Ox.UI.' + options.theme + '/symbolLoading.svg'
+            var src = Ox.PATH + 'svg/Ox.UI.' + options.theme + '/symbolLoadingAnimated.svg'
             Ox.loadFile(src, function() {
                 Ox.element('<img>')
                     .attr({
@@ -83,13 +83,39 @@ Ox.load.UI = function(options, callback) {
                     })
                     .css(Ox.extend({
                         width: '32px',
-                        height: '32px',
+                        height: '32px'
                     }, css))
                     .mousedown(function(e) {
                         e.preventDefault()
                     })
                     .appendTo(div);
             });
+            var deg = 0, element, interval,
+                src = Ox.PATH + 'svg/Ox.UI.' + options.theme + '/symbolLoading.svg'
+            Ox.loadFile(src, function() {
+                element = Ox.element('<img>')
+                    .attr({
+                        src: src
+                    })
+                    .css({
+                        position: 'absolute',
+                        top: '250px',
+                        left: '500px',
+                        width: '32px',
+                        height: '32px'
+                    })
+                    .mousedown(function(e) {
+                        e.preventDefault()
+                    })
+                    .appendTo(div);
+                interval = setInterval(function() {
+                    deg = (deg + 30) % 360;
+                    element.css({
+                        MozTransform: 'rotate(' + deg + 'deg)',
+                        WebkitTransform: 'rotate(' + deg + 'deg)'
+                    });
+                }, 83);
+            });
         }
 
         function showWarning() {
diff --git a/source/svg/Ox.UI.classic/symbolLoading.svg b/source/svg/Ox.UI.classic/symbolLoading.svg
index e87df9ed..c9cb836e 100644
--- a/source/svg/Ox.UI.classic/symbolLoading.svg
+++ b/source/svg/Ox.UI.classic/symbolLoading.svg
@@ -1,40 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
     <g transform="translate(128, 128)" stroke="#000000" stroke-linecap="round" stroke-width="28">
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1">
-            <animate attributeName="opacity" from="1" to="0" begin="0s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(30)" opacity="0.083333">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.916667s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(60)" opacity="0.166667">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.833333s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(90)" opacity="0.25">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.75s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(120)" opacity="0.333333">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.666667s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(150)" opacity="0.416667">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.583333s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(180)" opacity="0.5">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.5s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(210)" opacity="0.583333">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.416667" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(240)" opacity="0.666667">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.333333s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(270)" opacity="0.75">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.25s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(300)" opacity="0.833333">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.166667s" dur="1s" repeatCount="indefinite"></animate>
-        </line>
-        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(330)" opacity="0.916667">
-            <animate attributeName="opacity" from="1" to="0" begin="-0.083333" dur="1s" repeatCount="indefinite"></animate>
-        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(30)" opacity="0.083333"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(60)" opacity="0.166667"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(90)" opacity="0.25"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(120)" opacity="0.333333"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(150)" opacity="0.416667"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(180)" opacity="0.5"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(210)" opacity="0.583333"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(240)" opacity="0.666667"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(270)" opacity="0.75"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(300)" opacity="0.833333"/>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(330)" opacity="0.916667"/>
     </g>
 </svg>
\ No newline at end of file
diff --git a/source/svg/Ox.UI.classic/symbolLoadingAnimated.svg b/source/svg/Ox.UI.classic/symbolLoadingAnimated.svg
new file mode 100644
index 00000000..e87df9ed
--- /dev/null
+++ b/source/svg/Ox.UI.classic/symbolLoadingAnimated.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <g transform="translate(128, 128)" stroke="#000000" stroke-linecap="round" stroke-width="28">
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1">
+            <animate attributeName="opacity" from="1" to="0" begin="0s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(30)" opacity="0.083333">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.916667s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(60)" opacity="0.166667">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.833333s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(90)" opacity="0.25">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.75s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(120)" opacity="0.333333">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.666667s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(150)" opacity="0.416667">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.583333s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(180)" opacity="0.5">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.5s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(210)" opacity="0.583333">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.416667" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(240)" opacity="0.666667">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.333333s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(270)" opacity="0.75">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.25s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(300)" opacity="0.833333">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.166667s" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+        <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(330)" opacity="0.916667">
+            <animate attributeName="opacity" from="1" to="0" begin="-0.083333" dur="1s" repeatCount="indefinite"></animate>
+        </line>
+    </g>
+</svg>
\ No newline at end of file