Ringtail Animation
13.04 Ringtail animation. Vector from https://plus.google.com/111311916570668380146/posts/DEa8HFPFH7s and values rounded to the nearest integer.
<div id="container">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
(function() {
(function() {var face = [
188, 489, 177, 500, 177, 566, 254, 643, 254, 621, 199, 566,
265, 566, 265, 588, 254, 621, 254, 632, 265, 621,
288, 621, 298, 632, 298, 621, 287, 588, 287, 566,
353, 566, 298, 621, 298, 643, 375, 566, 375, 500, 364, 489,
364, 511, 353, 522, 342, 511, 342, 500, 331, 500, 331, 489, 320, 489, 309, 478,
243, 478, 232, 489, 221, 489, 221, 500, 210, 500, 210, 511, 199, 522, 188, 511
];
var faceComponents = [
[188, 489, 188, 467, 199, 456, 221, 456, 243, 478, 199, 478],
[364, 489, 364, 467, 353, 456, 331, 456, 309, 478, 353, 478],
[257, 569, 256, 571, 256, 588, 243, 588, 243, 582],
[295, 569, 292, 571, 292, 588, 309, 588, 309, 582]
];
var tail = [ // Clockwise from bottom, always from top-left/-most corner of polygon
[120, 518, 155, 472, 166, 472, 132, 522],
[114, 480, 136, 462, 142, 465, 121, 487],
[73, 465, 133, 438, 146, 438, 87, 478],
[69, 431, 114, 420, 114, 425, 78, 445],
[35, 398, 128, 392, 128, 405, 49, 418],
[31, 361, 91, 366, 96, 377, 31, 377],
[14, 312, 107, 332, 107, 339, 7, 339],
[20, 278, 86, 299, 93, 312, 20, 292],
[7, 199, 100, 279, 100, 292, 0, 226],
[27, 172, 99, 246, 92, 252, 27, 193],
[42, 126, 128, 232, 121, 246, 27, 146],
[85, 100, 135, 193, 128, 206, 71, 119],
[128, 49, 171, 193, 164, 199, 99, 60],
[186, 33, 200, 159, 186, 166, 157, 46],
[251, 0, 243, 166, 222, 173, 215, 7],
[281, 10, 317, 10, 281, 143, 266, 143],
[351, 7, 387, 13, 323, 159, 301, 166],
[421, 33, 450, 46, 371, 159, 356, 153],
[481, 60, 510, 80, 387, 199, 373, 186],
[525, 106, 541, 142, 439, 206, 425, 186],
[567, 159, 582, 193, 438, 266, 431, 239],
[575, 223, 582, 256, 474, 292, 467, 266]
];
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600
});
var tailLayer = new Kinetic.Layer();
var faceLayer = new Kinetic.Layer();
var sizeMultiplier = .6;
var animationMultiplier = 30;
var fadeInTail = function(section, timeout) {
setTimeout(function() {
new Kinetic.Tween({
node: section,
opacity: 1,
duration: .25
}).play(); }, timeout);};
var fadeInFace = function(section, timeout) {
faceLayer.add(section);
setTimeout(function() {
new Kinetic.Tween({
node: section,
opacity: 1,
duration: .5
}).play(); }, timeout);}
var positionedPoints = function(points) {
return _.map(points, function(num, key) {
if (key % 2 === 0) { // x
return (num + 100) * sizeMultiplier;
} else { // y
return (num + 100) * sizeMultiplier;
}
});
}
for (var i = 0; i < tail.length; i++) {
var rect = new Kinetic.Polygon({
points: positionedPoints(tail[i]),
fill: '#dd4814',
opacity: 0
});
tailLayer.add(rect);
fadeInTail(rect, i * animationMultiplier);
}
var facePoly = new Kinetic.Polygon({
points: positionedPoints(face),
fill: '#dd4814',
opacity: 0
});
fadeInFace(facePoly, tail.length * animationMultiplier);
for (var i = 0; i < faceComponents.length; i++) {
var component = new Kinetic.Polygon({
points: positionedPoints(faceComponents[i]),
fill: '#dd4814',
opacity: 0
});
fadeInFace(component, (tail.length * animationMultiplier) + 250);
}
stage.add(tailLayer);
stage.add(faceLayer);
})();