PathAnimate.js - SVG 패스 애니메이션 라이브러리

PathAnimate.js

var PathAnimate = (function(global){
	'use strict';

	// ——————————————————————————————————————
	// PRIVATE
	// ——————————————————————————————————————
	function getLength(el) {
		if(el.nodeName) {
			var tagName = el.nodeName.toLowerCase(), d;
			if(tagName === 'path') {
				d = el.getTotalLength();
			} else if(tagName === 'circle') {
				d = 2 * Math.PI * global.parseFloat(el.getAttribute('r'), 10);
			} else if(tagName === 'rect') {
				d = 2 * el.getAttribute('width') + 2 * el.getAttribute('height');
			} else if(tagName === 'line') {
				var x1 = el.getAttribute('x1');
				var x2 = el.getAttribute('x2');
				var y1 = el.getAttribute('y1');
				var y2 = el.getAttribute('y2');
				d = Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
			}
			return d;
		}
	}
	function setupPath(el, length, start, end, opacity) {
		el.style.strokeOpacity = opacity;
		start = global.parseFloat(start.substring(0, start.indexOf('%')), 10);
		end = global.parseFloat(end.substring(0, end.indexOf('%')), 10);
		var dash = (end - start);
		var gap = (100 - (end - start));
		var offset = (100 - start);
		el.style.strokeDasharray = ((dash/100) * length) + ' ' + ((gap/100) * length);
		el.style.strokeDashoffset = (offset/100) * length;
	}
	function setPosition(el, options) {
		if(el.style) {
			var length = getLength(el);
			var visibility = (options.visibility !== undefined) ? options.visibility : 1;
			if(visibility === 0) {
				el.style.visibility = 'hidden';
			} else if(visibility === 1) {
				el.style.visibility = 'visible';
			} else {
				el.style.visibility = 'visible';
			}
			setupPath(el, length, options.start, options.end, options.opacity);
		}
	}
	function anim(el, options) {
		if(el.style) {
			el.getBoundingClientRect();
			var length = getLength(el);
			var opacity = (options.opacity !== undefined) ? options.opacity : 1;
			var visibility = (options.visibility !== undefined) ? options.visibility : 1;
			if(visibility === 0) {
				el.style.visibility = 'hidden';
			} else if(visibility === 1) {
				el.style.visibility = 'visible';
			} else {
				el.style.visibility = 'visible';
			}
			var duration = (options.duration) ? options.duration : 0.4;
			var delay = (options.delay) ? options.delay : 0;
			var easing = (options.easing) ? convertEasing(options.easing) : 'linear';
			el.style.transition = el.style.WebkitTransition = 'none';

			el.style.transition = el.style.WebkitTransition =
				'stroke-dashoffset '+duration+'s ' + easing
				+ ', stroke-dasharray '+duration+'s ' + easing;
			setTimeout(function() {
				setupPath(el, length, options.start, options.end, opacity);
			}.bind(this), delay * 1000);
		}
	}
	function convertEasing(easing) {
		easing = easing.replace(/-([a-z])/g, function(g){ return g[1].toUpperCase(); });
		switch(easing) {
			// Base
			case 'linear':
				return 'linear';
			case 'ease':
				return 'ease';
			case 'easeIn':
				return 'ease-in';
			case 'easeOut':
				return 'ease-out';
			case 'easeInOut':
				return 'ease-in-out';
			// Sine
			case 'easeInSine':
				return 'cubic-bezier(0.47, 0, 0.745, 0.715)';
			case 'easeOutSine':
				return 'cubic-bezier(0.39, 0.575, 0.565, 1)';
			case 'easeInOutSine':
				return 'cubic-bezier(0.445, 0.05, 0.55, 0.95)';
			// Cubic
			case 'easeInCubic':
				return 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
			case 'easeOutCubic':
				return 'cubic-bezier(0.215, 0.61, 0.355, 1)';
			case 'easeInOutCubic':
				return 'cubic-bezier(0.645, 0.045, 0.355, 1)';
			// Quint
			case 'easeInQuint':
				return 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
			case 'easeOutQuint':
				return 'cubic-bezier(0.23, 1, 0.32, 1)';
			case 'easeInOutQuint':
				return 'cubic-bezier(0.86, 0, 0.07, 1)';
			// Circ
			case 'easeInCirc':
				return 'cubic-bezier(0.6, 0.04, 0.98, 0.335)';
			case 'easeOutCirc':
				return 'cubic-bezier(0.075, 0.82, 0.165, 1)';
			case 'easeInOutCirc':
				return 'cubic-bezier(0.785, 0.135, 0.15, 0.86)';
			// Quad
			case 'easeInQuad':
				return 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
			case 'easeOutQuad':
				return 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
			case 'easeInOutQuad':
				return 'cubic-bezier(0.455, 0.03, 0.515, 0.955)';
			// Quart
			case 'easeInQuart':
				return 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
			case 'easeOutQuart':
				return 'cubic-bezier(0.165, 0.84, 0.44, 1)';
			case 'easeInOutQuart':
				return 'cubic-bezier(0.77, 0, 0.175, 1)';
			// Expo
			case 'easeInExpo':
				return 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
			case 'easeOutExpo':
				return 'cubic-bezier(0.19, 1, 0.22, 1)';
			case 'easeInOutExpo':
				return 'cubic-bezier(1, 0, 0, 1)';
			// Back
			case 'easeInBack':
				return 'cubic-bezier(0.6, -0.28, 0.735, 0.045)';
			case 'easeOutBack':
				return 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';
			case 'easeInOutBack':
				return 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
		}
	}

	// ——————————————————————————————————————
	// PUBLIC
	// ——————————————————————————————————————
	return {
		put: function(el, options) {
			if(el.length) {
				for(var i in el) {
					setPosition(el[i], options);
				}
			} else {
				setPosition(el, options);
			}
		},
		animate: function(el, options) {
			if(el.length) {
				for(var i in el) {
					anim(el[i], options);
				}
			} else {
				anim(el, options);
			}
			return this;
		}
	};

})(window);