zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated crocodile 2 demo

master
Yohei Shimomae 2013-10-17 19:51:49 -07:00
parent 2048c9a542
commit bb4dfeb5ed
1 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demos/snap-mascot/crocodile-2.html
View File

@ -33,10 +33,11 @@
if (animating[key]) return; if (animating[key]) return;
clearTimeout(cleartimers[key]); clearTimeout(cleartimers[key]);
animating[key] = true; animating[key] = true;
var element = elements[key]; var element = elements[key],
x = element[0].getBBox().x,
offset = x/2 + 25;
element[0].attr({ element[0].attr({
opacity: 0, transform: "translate("+offset+",80) scale(0.5, 0.5)"
transform: "translate(50,50) scale(0.5, 0.5)"
}); });
setTimeout(function() { setTimeout(function() {
element[0].animate({opacity:1,transform:""}, 500, mina.elastic); element[0].animate({opacity:1,transform:""}, 500, mina.elastic);
@ -50,30 +51,13 @@
function cycle() { function cycle() {
show(elementkeys[j]); show(elementkeys[j]);
j++; j++;
if (j < elementkeys.length) setTimeout(cycle, 300); if (j < elementkeys.length) setTimeout(cycle, 200);
} }
cycle(); cycle();
} }
function hide(key) {
if (animating[key]) return;
animating[key] = true;
var element = elements[key];
element[0].animate({opacity:0}, 200);
element[1].animate({opacity:0}, 200);
setTimeout(function(){animating[key] = false}, 200);
}
function hoverIn() { function hoverIn() {
hide( this.node.id.replace('hit-', '') ); show( this.node.id.replace('hit-', '') );
}
function hoverOut() {
var key = this.node.id.replace('hit-', '');
show(key);
cleartimers[key] = setTimeout(function() {
show( key );
}, 200);
} }
@ -82,7 +66,7 @@
diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}), diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}),
path = diagramgroup.select("#path-" + key).attr({opacity:0}), path = diagramgroup.select("#path-" + key).attr({opacity:0}),
hitarea = diagramgroup.select("#hit-" + key); hitarea = diagramgroup.select("#hit-" + key);
hitarea.hover(hoverIn, hoverOut); hitarea.hover(hoverIn);
elements[key] = [diagram, path]; elements[key] = [diagram, path];
} }