Small optimisations for logo animation
parent
78226035f1
commit
ec07510f81
|
@ -15,84 +15,96 @@
|
|||
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.">
|
||||
<title>Snap</title>
|
||||
<title>Snap Logo</title>
|
||||
<script src="../../dist/snap.svg-min.js"></script>
|
||||
|
||||
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
|
||||
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse" x1="175" y1="111.8719" x2="175" y2="-135.0812" gradientTransform="matrix(1 0 0 -1 -50 111)">
|
||||
<stop offset="0" style="stop-color:#002E3B"/>
|
||||
<stop offset="1" style="stop-color:#002639"/>
|
||||
</linearGradient>
|
||||
<polygon id="bottom" fill="url(#bottom_1_)" points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24 51,211.82
|
||||
124.941,247.884 199,211.9 160.771,192.962 "/>
|
||||
<radialGradient id="right_2_" cx="63.3041" cy="235.6129" r="219.7985" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#00BC85"/>
|
||||
<stop offset="1" style="stop-color:#149D91"/>
|
||||
</radialGradient>
|
||||
<polygon id="right" fill="url(#right_2_)" points="51.091,211.945 51.091,174.781 87.749,156.903 125.455,175.5 "/>
|
||||
<radialGradient id="right-2_1_" cx="186.8275" cy="123.7814" r="265.5574" gradientTransform="matrix(1 0 0 -1 -50 111)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#00BC85"/>
|
||||
<stop offset="1" style="stop-color:#149D91"/>
|
||||
</radialGradient>
|
||||
<polygon id="right-2" fill="url(#right-2_1_)" points="165.596,58.995 165.596,117.758 165.596,117.758 165.596,117.758
|
||||
124.611,137.737 162.301,156.506 198.996,138.632 198.996,38.123 "/>
|
||||
<radialGradient id="left_2_" cx="118.0562" cy="143.2378" r="507.5908" gradientTransform="matrix(1 0 0 -1 -50 111)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#004473"/>
|
||||
<stop offset="1" style="stop-color:#00345F"/>
|
||||
</radialGradient>
|
||||
<polygon id="left" fill="url(#left_2_)" points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
||||
51.096,38.088 51.096,138.597 "/>
|
||||
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse" x1="174.922" y1="110.6136" x2="174.922" y2="-135.0903" gradientTransform="matrix(1 0 0 -1 -50 111)">
|
||||
<stop offset="0" style="stop-color:#002E3B"/>
|
||||
<stop offset="1" style="stop-color:#002639"/>
|
||||
</linearGradient>
|
||||
<polygon id="top" fill="url(#top_1_)" points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892 198.844,38.046
|
||||
124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
||||
</svg>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var logo = Snap.select("#snap-logo").attr({display:'none'});
|
||||
var logo = Snap.select("#snap-logo").attr({
|
||||
display: "none"
|
||||
});
|
||||
window.onload = function () {
|
||||
|
||||
var elements = [
|
||||
['top', 0, 20],
|
||||
['left', 20, 0],
|
||||
['bottom', 0, -20],
|
||||
['right', 20, 0],
|
||||
['right-2', -20, 0]
|
||||
["top", [0, 20]],
|
||||
["left", [20, 0]],
|
||||
["bottom", [0, -20]],
|
||||
["right", [-20, 0]]
|
||||
],
|
||||
components = [],
|
||||
i = 0;
|
||||
i;
|
||||
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
var el = elements[i]
|
||||
elid = el[0];
|
||||
element = logo.select("#" + elid);
|
||||
element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
|
||||
components.push(element);
|
||||
var el = elements[i],
|
||||
element = logo.select("#" + el[0]);
|
||||
element.attr({
|
||||
opacity: 0,
|
||||
transform: "t" + el[1]
|
||||
});
|
||||
elements[i] = element;
|
||||
}
|
||||
|
||||
i = 0;
|
||||
|
||||
function animateEach() {
|
||||
if (!components[i]) return;
|
||||
components[i].animate({
|
||||
transform: "t" + (0) + "," + (0),
|
||||
if (!elements[i]) return;
|
||||
elements[i].animate({
|
||||
transform: "t0,0",
|
||||
opacity: 1
|
||||
}, 200, mina.easeout);
|
||||
setTimeout(animateEach, 200);
|
||||
i++;
|
||||
};
|
||||
|
||||
setTimeout(function() {
|
||||
logo.attr({display:'block'});
|
||||
setTimeout(function () {
|
||||
logo.attr({
|
||||
display: "block"
|
||||
});
|
||||
animateEach();
|
||||
}, 500);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="250px" height="250px">
|
||||
<defs>
|
||||
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
|
||||
x1="196" y1="485.6281" x2="196" y2="732.5812"
|
||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
|
||||
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#00BC85"/>
|
||||
<stop offset="1" stop-color="#149D91"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
|
||||
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#004473"/>
|
||||
<stop offset="1" stop-color="#00345F"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
|
||||
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
|
||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
||||
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
||||
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
||||
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
||||
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
||||
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
||||
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
||||
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
||||
51.096,38.088 51.096,138.597 "/>
|
||||
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
||||
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
||||
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue