sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests 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
commit 808d561a25
4 changed files with 80 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

Before After
Before After