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

added hover event on crocodile

master
Yohei Shimomae 2013-10-15 22:42:29 -07:00
parent f8d7d64735
commit e0fe0cd2b0
2 changed files with 131 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
demos/animated-crocodile/crocodile.svg
View File

@ -1,77 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="260px" height="250px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve">
<g>
<path id="symbol" opacity="0.2" fill="#848383" d="M185.631,140.915l5.02,10.86l8.145-3.765l-5.02-10.86L185.631,140.915z
M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
<g id="head">
<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523
119.387,206.523 119.387,167.64"/>
<polygon opacity="0.2" fill="#FFFFFF" points="-0.252,146.703 11.712,170.631 26.667,140.721
8.721,146.703"/>
<polyline opacity="0.2" fill="#FFFFFF" points="8.718,146.703 20.685,152.685 26.665,140.721"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 53.613,163.667 17.694,143.712
26.667,140.721"/>
</g>
<g id="upper-head">
<g id="upper-jaw">
<g>
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
l14.914,6.085l-6.602-14.691L188.572,90.655z M201.039,77.746l14.913,6.085L209.35,69.14L201.039,77.746z M221.816,56.23
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
<path opacity="0.4" fill="#FFFFFF" d="M155.329,125.08l10.758,10.388l-6.602-14.691L155.329,125.08
z M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,137.989z M130.396,150.898l10.758,10.389l-6.602-14.692
L130.396,150.898z M167.796,112.171l10.757,10.388l-6.603-14.692L167.796,112.171z M180.261,99.261l10.758,10.389l-6.602-14.692
L180.261,99.261z M192.728,86.352l10.758,10.388l-6.602-14.691L192.728,86.352z M205.195,73.443l10.757,10.388L209.35,69.14
L205.195,73.443z M221.816,56.23l-4.156,4.303l10.758,10.389L221.816,56.23z"/>
</g>
<polygon fill="#09B39C" points="215.135,33 200.18,33 197.189,46.955 92,125 88.355,171.706 106.387,180.64 236.072,47.955"/>
<polygon opacity="0.2" fill="#FFFFFF" points="92,125 97.423,150.703 197.189,46.955"/>
<polyline opacity="0.2" fill="#FFFFFF" points="197.189,46.955 185.207,76.892 92,125"/>
<polygon opacity="0.2" fill="#FFFFFF" points="200.18,33 236.072,47.955 215.135,33"/>
<polygon opacity="0.2" fill="#FFFFFF" points="197.189,46.955 215.135,33 200.18,33"/>
</g>
<polygon fill="#09B39C" points="92,125 65.55,126.757 44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64
107.897,156.377"/>
<polygon opacity="0.2" fill="#FFFFFF" points="92,125 102.423,145.703 65.55,126.757"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 102.423,145.703 92,125 65.55,126.757"/>
<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703 83.495,139.721 95.459,145.703 80.505,154.676"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 44.613,158.667 92,125 65.55,126.757"/>
</g>
<g id="bottom-jaw">
<g>
<polygon fill="#E0CAB1" points="152.531,185.586 158.513,170.631 164.495,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="164.495,185.586 158.513,170.631 158.513,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="170.477,185.586 176.459,170.631 182.441,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="182.441,185.586 176.459,170.631 176.459,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="188.423,185.586 194.405,170.631 200.387,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="200.387,185.586 194.405,170.631 194.405,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="206.369,185.586 212.351,170.631 218.333,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="218.333,185.586 212.351,170.631 212.351,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="224.315,185.586 230.297,170.631 236.279,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="236.279,185.586 230.297,170.631 230.297,185.586"/>
</g>
<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64 109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604
-4,200.541 -4,206.523 79.747,206.523 156.522,206.523 187.432,198.55 235.288,189.577 244.252,179.604"/>
<polygon opacity="0.3" fill="#FFFFFF" points="119.594,167.64 91.711,167.64 79.747,179.604"/>
<polygon opacity="0.3" fill="#FFFFFF" points="91.711,167.64 79.747,206.523 79.747,179.604"/>
<polygon opacity="0.1" fill="#534741" points="235.288,189.577 160.513,195.559 115.639,206.523
156.522,206.523 187.432,198.55"/>
<polygon opacity="0.1" fill="#534741" points="187.432,198.55 160.513,195.559 156.522,206.523
156.522,206.523"/>
<polygon opacity="0.3" fill="#FFFFFF" points="-4,200.541 46.847,194.559 79.747,179.604"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

183
demos/animated-crocodile/index.html
View File

@ -17,64 +17,143 @@
limitations under the License.">
<title>Snap</title>
<script src="../../dist/snap.svg-min.js"></script>
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="260px" height="250px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve"
sodipodi:docname="crocodile.svg">
<g>
<path id="symbol" opacity="0.2" fill="#848383" d="M185.631,140.915l5.02,10.86l8.145-3.765l-5.02-10.86L185.631,140.915z
M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
<g id="head">
<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523
119.387,206.523 119.387,167.64"/>
<polygon opacity="0.2" fill="#FFFFFF" points="-0.252,146.703 11.712,170.631 26.667,140.721
8.721,146.703"/>
<polyline opacity="0.2" fill="#FFFFFF" points="8.718,146.703 20.685,152.685 26.665,140.721"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 53.613,163.667 17.694,143.712
26.667,140.721"/>
</g>
<g id="upper-head">
<g id="upper-jaw">
<g>
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
l14.914,6.085l-6.602-14.691L188.572,90.655z M201.039,77.746l14.913,6.085L209.35,69.14L201.039,77.746z M221.816,56.23
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
<path opacity="0.4" fill="#FFFFFF" d="M155.329,125.08l10.758,10.388l-6.602-14.691L155.329,125.08
z M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,137.989z M130.396,150.898l10.758,10.389l-6.602-14.692
L130.396,150.898z M167.796,112.171l10.757,10.388l-6.603-14.692L167.796,112.171z M180.261,99.261l10.758,10.389l-6.602-14.692
L180.261,99.261z M192.728,86.352l10.758,10.388l-6.602-14.691L192.728,86.352z M205.195,73.443l10.757,10.388L209.35,69.14
L205.195,73.443z M221.816,56.23l-4.156,4.303l10.758,10.389L221.816,56.23z"/>
</g>
<polygon fill="#09B39C" points="215.135,33 200.18,33 197.189,46.955 92,125 88.355,171.706 106.387,180.64 236.072,47.955"/>
<polygon opacity="0.2" fill="#FFFFFF" points="92,125 97.423,150.703 197.189,46.955"/>
<polyline opacity="0.2" fill="#FFFFFF" points="197.189,46.955 185.207,76.892 92,125"/>
<polygon opacity="0.2" fill="#FFFFFF" points="200.18,33 236.072,47.955 215.135,33"/>
<polygon opacity="0.2" fill="#FFFFFF" points="197.189,46.955 215.135,33 200.18,33"/>
</g>
<polygon fill="#09B39C" points="92,125 65.55,126.757 44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64
107.897,156.377"/>
<polygon opacity="0.2" fill="#FFFFFF" points="92,125 102.423,145.703 65.55,126.757"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 102.423,145.703 92,125 65.55,126.757"/>
<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703 83.495,139.721 95.459,145.703 80.505,154.676"/>
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703 44.613,158.667 92,125 65.55,126.757"/>
</g>
<g id="bottom-jaw">
<g>
<polygon fill="#E0CAB1" points="152.531,185.586 158.513,170.631 164.495,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="164.495,185.586 158.513,170.631 158.513,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="170.477,185.586 176.459,170.631 182.441,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="182.441,185.586 176.459,170.631 176.459,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="188.423,185.586 194.405,170.631 200.387,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="200.387,185.586 194.405,170.631 194.405,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="206.369,185.586 212.351,170.631 218.333,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="218.333,185.586 212.351,170.631 212.351,185.586"/>
</g>
<g>
<polygon fill="#E0CAB1" points="224.315,185.586 230.297,170.631 236.279,185.586"/>
<polygon opacity="0.4" fill="#FFFFFF" points="236.279,185.586 230.297,170.631 230.297,185.586"/>
</g>
<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64 109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604
-4,200.541 -4,206.523 79.747,206.523 156.522,206.523 187.432,198.55 235.288,189.577 244.252,179.604"/>
<polygon opacity="0.3" fill="#FFFFFF" points="119.594,167.64 91.711,167.64 79.747,179.604"/>
<polygon opacity="0.3" fill="#FFFFFF" points="91.711,167.64 79.747,206.523 79.747,179.604"/>
<polygon opacity="0.1" fill="#534741" points="235.288,189.577 160.513,195.559 115.639,206.523
156.522,206.523 187.432,198.55"/>
<polygon opacity="0.1" fill="#534741" points="187.432,198.55 160.513,195.559 156.522,206.523
156.522,206.523"/>
<polygon opacity="0.3" fill="#FFFFFF" points="-4,200.541 46.847,194.559 79.747,179.604"/>
</g>
</g>
</svg>
<script>
window.onload = function () {
var g = Snap();
Snap.load("crocodile.svg", function (f) {
var gr = f.select("g"),
head = f.select("#upper-head"),
jaw = f.select("#upper-jaw"),
symbol = f.select("#symbol"),
top = g.g();
var pivots = [
[44, 147],
[92, 126]
];
function close() {
head.animate({
transform: "r" + [8, pivots[0][0], pivots[0][1]]
}, 500, mina.backin);
jaw.animate({
transform: "r" + [37, pivots[1][0], pivots[1][1]]
}, 500, mina.backin);
setTimeout(function() {
symbol.animate({
transform: "t" + (-70) + "," + (40) + "r" + (40)
}, 100);
}, 400);
setTimeout(open, 1000);
}
function open() {
head.animate({
transform: "r" + [0, pivots[0][0], pivots[0][1]]
}, 700, mina.elastic);
jaw.animate({
transform: "r" + [0, pivots[1][0], pivots[1][1]]
}, 700, mina.elastic);
symbol.animate({
transform: "t" + (0) + "," + (0) + "r" + (0)
}, 500, mina.elastic);
setTimeout(close, 1000);
}
var croc = Snap.select("#crocodile"),
head = croc.select("#upper-head"),
jaw = croc.select("#upper-jaw"),
symbol = croc.select("#symbol"),
clearId = [];
var pivots = [
[44, 147],
[92, 126]
];
top.add(gr);
function clearTimer() {
for (var i = 0; i < clearId.length; i++) {
clearTimeout(clearId[i]);
}
clearId = [];
}
close();
function close() {
clearTimer();
head.animate({
transform: "r" + [8, pivots[0][0], pivots[0][1]]
}, 500, mina.backin);
jaw.animate({
transform: "r" + [37, pivots[1][0], pivots[1][1]]
}, 500, mina.backin);
clearId.push( setTimeout(function() {
symbol.animate({
transform: "t" + (-70) + "," + (40) + "r" + (40)
}, 100);
}, 400));
}
function open() {
clearTimer();
head.animate({
transform: "r" + [0, pivots[0][0], pivots[0][1]]
}, 700, mina.elastic);
jaw.animate({
transform: "r" + [0, pivots[1][0], pivots[1][1]]
}, 700, mina.elastic);
symbol.animate({
transform: "t" + (0) + "," + (0) + "r" + (0)
}, 500, mina.elastic);
}
clearId.push( setTimeout(close, 500) );
croc.hover(open,
function() {
clearId.push(setTimeout(close, 200));
});
};
</script>