2016-12-16

참고 http://animateyourhtml5.appspot.com/pres/

위 자료를 참고로 해당 문서에 있는 효과들을 하나씩 아래에 구현해 볼 예정이다.
해당 기능들은 모바일에서는 레이아웃이 깨지거나, 제대로 안보일 수 있고, IE에서는 제대로 동작하지 않는 것이 많을 것이다.

<style>
#svg_1 path{
	fill:#fff;
	stroke:#000;
	stroke-dasharray: 400;
	animation: anime1 4s  ease-in-out infinite;
}

@keyframes anime1 {
	from {stroke-dashoffset: 400;}
	50% {stroke-dashoffset: 0;}
	to {stroke-dashoffset: 400;}
}
</style>

<svg viewBox="0 0 600 150" id="svg_1">
	<path d="M46.707,51.246v21.242c1.872-1.8,4.68-3.672,10.225-3.672c10.513,0,15.193,9.001,15.193,18.073
		c0,9.073-4.68,17.93-15.193,17.93c-5.905,0-8.713-2.088-10.585-4.248l-2.953,4.176h-1.08V59.095c0-2.521-1.224-3.313-4.464-3.313
		l-0.288-1.152L46.707,51.246z M46.707,98.338c1.512,2.016,3.6,4.033,8.713,4.033c8.424,0,11.881-7.633,11.881-15.482
		c0-7.848-3.457-15.625-11.881-15.625c-5.185,0-7.201,2.088-8.713,4.032V98.338z"/>
	<path d="M87.386,103.666v-1.8c6.913,0,9.865-1.008,9.865-4.608V60.895c0-2.592-1.512-3.601-4.608-3.601h-6.265v-1.44
		c6.984-0.72,11.089-2.592,15.409-5.256v46.66c0,3.601,3.313,4.608,10.297,4.608v1.8H87.386z"/>
	<path d="M125.545,103.666v-1.8c3.313,0,4.752-0.647,4.752-3.528V76.376c0-1.872-0.792-3.24-4.824-3.24l-0.216-1.08l9.361-3.24
		v29.522c0,2.881,1.08,3.528,4.824,3.528v1.8H125.545z M136.346,54.27c0,1.8-1.296,3.601-3.816,3.601c-2.592,0-3.744-1.8-3.744-3.601
		c0-1.8,1.152-3.6,3.744-3.6C135.05,50.67,136.346,52.47,136.346,54.27z"/>
	<path d="M161.257,69.248v1.8c-2.952,0-4.176,0.288-4.176,1.152c0,0.288,0.216,0.792,0.648,1.296l7.993,9.937l7.921-9.792
		c0.432-0.576,0.648-1.008,0.648-1.368c0-0.864-1.224-1.224-4.032-1.224v-1.8h13.177v1.8c-3.96,0-6.12,1.008-7.705,2.952
		l-8.929,10.873l11.737,14.545c1.512,1.801,3.096,2.448,6.192,2.448v1.8H169.61v-1.8c3.168,0,4.249-0.288,4.249-1.008
		c0-0.36-0.288-0.792-0.648-1.368l-9.001-11.377l-8.425,10.152c-0.648,0.937-0.936,1.656-0.936,2.16c0,1.08,1.296,1.44,4.249,1.44
		v1.8h-13.609v-1.8c3.313,0,5.185-0.433,8.569-4.392l9.001-10.802l-10.153-12.529c-1.656-2.088-3.24-3.096-6.265-3.096v-1.8H161.257z
		"/>
</svg>

우선 위 글자처럼 보이는 도형을 svg로 만드는 방법부터 소개해 보겠다
http://b1ix.net/285에서 언급한 svg를 가지고 직접 계산해서 무언가 복잡한 도형이나 그래프르 만드는데는 많은 시간이 걸린다.
그래서 보통은 일러스트레이터와 같은 툴을 이용해서 쉽게 svg파일을 만들어서 이용한다.
위는 일러스트레이터를 이용하여,
글자를 쓴후에 -> 윤곽선 만들기 -> 그룹풀기 -> svg파일로 저장
의 과정으로 쉽게 만들 수 있다.

그 다음으로 그려지는 듯한 애니메이션 효과를 주려면 아래 속성들을 이용해야 한다.

• stroke-dasharray : path 전체의 길이 값
• stroke-dashoffset : path의 시작점

<style>
#svg_2 path{
	stroke:#000000;
	stroke-width:5;
}

#svg_2 path:nth-child(1){
	stroke-dasharray:10;
}

#svg_2 path:nth-child(2){
	stroke-dasharray:100;
	stroke-dashoffset:100;
}
#svg_2 path:nth-child(3){
	stroke-dasharray:100;
	stroke-dashoffset:70;
}
#svg_2 path:nth-child(4){
	stroke-dasharray:100;
	stroke-dashoffset:30;
}
#svg_2 path:nth-child(5){
	stroke-dasharray:100;
	stroke-dashoffset:0;
}

#svg_2 path:nth-child(6), #svg_2 path:nth-child(7){
	stroke:#aaa;
	stroke-width:1;
}
</style>

<svg viewBox="0 0 600 200" id="svg_2">
	<path d="M 0,0 l 100,0"/>
	<path d="M 0,40 l 100,0"/>
	<path d="M 0,80 l 100,0"/>
	<path d="M 0,120 l 100,0"/>
	<path d="M 0,160 l 100,0"/>
	
	<path d="M 0,-5 l 0,170"/>
	<path d="M 100,-5 l 0,170"/>
	<text x=-10 y=190>0px</text>
	<text x=90 y=190>100px</text>
	<text x=110 y=40>stroke-dasharray:100; stroke-dashoffset:100;</text>
	<text x=110 y=80>stroke-dasharray:100; stroke-dashoffset:70;</text>
	<text x=110 y=120>stroke-dasharray:100; stroke-dashoffset:30;</text>
	<text x=110 y=160>stroke-dasharray:100; stroke-dashoffset:0;</text>
</svg>

위의 예제를 보면, stroke-dasharray와 stroke-dashoffset의 관계를 잘 알 수 있을 것이다.



http://b1ix.net/287 에서 계속....