0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

test performance of svg transform vs css transform

Browse source
This commit is contained in:
rolux 2011-04-25 15:06:26 +02:00
parent 3b5e04b61e
commit 808d561a25
4 changed files with 80 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
source/js/Ox.UI/List/Ox.ListMap.js → source/js/Ox.UI/Map/Ox.ListMap.js
View file

30
source/js/Ox.UI/Ox.UI.js
View file

@ -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() {

48
source/svg/Ox.UI.classic/symbolLoading.svg
View file

@ -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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

40
source/svg/Ox.UI.classic/symbolLoadingAnimated.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB