Snap.svg animation test Open & Close & Smash
SRC: https://dribbble.com/shots/1625088-Open-Close-Smash
SRC: https://dribbble.com/shots/1625088-Open-Close-Smash
script(src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js")
script(src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js")
**
box-sizing border-box
bodybackground-image url(http://cs621825.vk.me/v621825414/12654/s6st9fid6I0.jpg)
background-size cover
background-attachment fixed
margin 0
padding 0
overflow hidden
svgborder 2px dashed #fff
margin auto
g
cursor pointer
var TestAnim, animSpan, anm, colors, i, ii, j, len, s, text, x;
var TestAnim, animSpan, anm, colors, i, ii, j, len, s, text, x;
s = Snap(window.innerWidth, window.innerHeight);
TestAnim = (function() {
function TestAnim(Snap1, anim, color, speed) {
var darken, i;
this.Snap = Snap1;
this.anim = anim;
this.color = color;
if (speed) {
this.speed = speed;
} else {this.speed = 500;
}
i = Snap.color(this.color);
darken = Snap.rgb(i.r - (i.r * 1 / 4), i.g - (i.g * 1 / 4), i.b - (i.b * 1 / 4));
this.shd = this.Snap.filter(Snap.filter.shadow(3, 3, 3, darken));
this.pathStyle = {
stroke: '#fff',
fill: 'none',
strokeWidth: 5,
filter: this.shd
};
return this;
}
TestAnim.prototype.draw = function(x, y) {
var c, g, long, pahtCenter, pahtTop, pathBottom, r, sBottom, sTop, size, toggle, xBottom, xTop;
r = this.Snap.rect(x - 30, y - 35, 100, 100).attr({
fill: this.color
});
c = this.Snap.circle(x + 20, y + 15, 35).attr(this.pathStyle).transform("S .6 0");
size = 1;
long = 4;
sTop = "M " + x + " " + y + " l" + (long * 10 / 2) + " 0 l" + (long * 10 / 2) + " 0";
sBottom = "M " + x + " " + (y + 30) + " l" + (long * 10 / 2) + " 0 l" + (long * 10 / 2) + " 0";
pahtTop = this.Snap.path(sTop);
pahtCenter = this.Snap.path("M " + x + " " + (y + 15) + " h" + (long * 10));
pathBottom = this.Snap.path(sBottom);
pahtTop.attr(this.pathStyle);
pahtCenter.attr(this.pathStyle);
pathBottom.attr(this.pathStyle);
xTop = "M " + (x + 5) + " " + y + " l" + (long * 10 / 2 - 5) + " 15 l" + (long * 10 / 2 - 5) + " -15";
xBottom = "M " + (x + 5) + " " + (y + 30) + " l" + (long * 10 / 2 - 5) + " -15 l" + (long * 10 / 2 - 5) + " 15";
toggle = 0;
g = this.Snap.g(r, c, pahtTop, pahtCenter, pathBottom).click(function() {
if (toggle = !toggle) {
pahtCenter.stop().animate({
opacity: 0
}, this.speed * 0.3, this.anim);
c.stop().animate({
transform: "S 1 1"
}, this.speed, this.anim);
pahtTop.stop().animate({
d: xTop
}, this.speed, this.anim);
return pathBottom.stop().animate({
d: xBottom
}, this.speed, this.anim);
} else {c.stop().animate({
transform: "S .6 0"
}, this.speed * 0.7, this.anim, function() {
return pahtCenter.attr({
opacity: 1
});
});
pahtTop.stop().animate({
d: sTop
}, this.speed, this.anim);
return pathBottom.stop().animate({
d: sBottom
}, this.speed, this.anim);
}
});
g.speed = this.speed;
g.anim = this.anim;
return this;
};
return TestAnim;
})();
colors = ['#3FC2C9', '#33D533', '#6975E0', '#E820CA', '#FF090F', '#D9EE1A', '#A4A4A4', '#4A393D'];
text = ['linear', 'easeout', 'easein', 'easeinout', 'backin', 'backout', 'elastic', 'bounce'];
animSpan = [mina.linear, mina.easeout, mina.easein, mina.easeinout, mina.backin, mina.backout, mina.elastic, mina.bounce];
x = 1;
for (i = j = 0, len = animSpan.length; j < len; i = ++j) {
anm = animSpan[i];
if (i >= 4) {
x = 2;
ii = i - 3;
} else {ii = i + 1;
}
new TestAnim(s, anm, colors[i]).draw(110 * ii, 110 * x);
s.text(110 * ii, 110 * x - 22, text[i]);
}