01. vivus.js
vivus는 가벼운 자바스크립트 기반의 svg 애니메이션이 드로잉되는 효과를 구현해주는 라이브러리이다.
다양한 다른 애니메이션을 위해 vivus 홈페이지에서 여러가지 옵션들을 만들어 두었다. 예를 들어 애니메이션 타입에 Delayed, Sync, OneByOne이 있고 하나씩 시작하고 같은 delay값이 들어간 것이 Delayed, 애니메이션이 함께 종료되는 Sync, 하나씩 path가 그려지면서 구현되는 OneByOne이 있다.
https://maxwellito.github.io/vivus/
vivus.js - svg animation
Timing function To give more freedom, it's possible to override the animation of each path and/or the entire SVG. It works a bit like the CSS animation timing function. But instead of using a cubic-bezier function, it use a simple JavaScript function. It m
maxwellito.github.io
02. 적용 방법
02-1. 일러스트레이터에서 SVG code 가져오기
[ 01 ] 먼저 vivus 효과를 적용하기 위해서는 간단하게 path로 그린 svg 파일이 필요하다.
위와 같이 일러스트를 이용하여 path로 고양이를 그려주었다고 해보자.
[ 02 ] 상단의 메뉴에서 [ file ] - [ Save as ] - [확장자 Svg]를 선택하면 위와 같은 창이 뜬다. 이 과정은 SVG를 html에 삽입하기 위해 코드로써 가져오기 위한 과정으로 이렇게 하면 위와 같은 Svg Option이 뜨게 되는데 여기서 Svg Code를 누른다.
- 참고로 원본파일은 수정할 수 있도록 일러스트 확장자로 저장해두자.
- export 로도 svg code를 가져올수는 있지만 디바이스의 환경차이인지 나같은 경우는 코드에 오류가 생기는 경우가 많아서 위의 방법으로 코드를 가져오는 것을 추천한다.
[ 03 ] 그러면 상당히 복잡해보이는 이러한 코드가 나타나게 되는데 <?xml version> 부분이나 <!--Generator:> 부분은 필요하지 않고 <svg version> 부터 </svg>까지만 필요한 영역이니 이 부분을 복사해서 html 에 붙여넣기 해주면 된다.
여기까지 하면 일차적으로 필요한 svg 파일의 작업은 끝이 났다.
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 450" style="enable-background:new 0 0 500 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#F47400;stroke-width:3;stroke-miterlimit:10;}
</style>
<path class="st0" d="M283.6,191.1c-12.5-0.2-25.2,1.6-35.1,12.4c-5,5-11,10-14,23s12,28,19,30"/>
<path class="st0" d="M332.5,239.5c0-7-9-22-14-27c-4-4-9.2-14.3-18.7-18.8"/>
<path class="st0" d="M292.5,257.5c0,0,132,74,152,78c5,1,5-2,8-1s11,1,12,5s-1,7-5,8c-2,1-4,5-9,3c-2,0-4,2-9,1s-13-2-16-5
s-89-10-99-21c-3-1-37,7-52-4c-5-2-80,28-149-46c-0.6-0.6-1.7-1.1-2.9-1.3c-4.5-0.7-11,2.7-3.1,19.3c10,21,9,23,13,25c1,1,8-2,10,3
s5,15,0,15c-1,0-8,5-11,1c-1-1-7.4,4-15.7-1.5c-3.3-2.5-33.3-41.5-32.3-60.5c0-11-17.9-27.3-29.4-50.7s-34.6-74.3-20.6-97.3
s48-39,73-33s57,19,74,59s28,47,36,54s17.7,20.9,17.7,20.9"/>
<path class="st0" d="M122.5,274.5c0,0,20,35,24,36s2.9-1,5.4,0s11.6,6,11.6,10s-1,8-6,8s-11.1,0.7-13.1-1.1"/>
<path class="st0" d="M315.8,270.4c8.7,0.1,17.7-4.9,17.7-9.9s-3-6-3-10s2-8,2-11"/>
<path class="st0" d="M324.7,275.3c0,0,112.8,47.2,119.8,48.2s9.4-2,12.7,0s8.3-1,9.3,5s-3.2,9.2-3.2,9.2"/>
<path class="st0" d="M311,203.2c-0.5-8.7,6.5-12.7,4.5-16.7s-4-3-4-3s-11,3-12,6s-0.7,3.2-0.7,3.2"/>
<path class="st0" d="M306,212c0,0-8.3-25.8-13.8-28.5c-5.5-2.8-10.8,8.3-13.2,14.3s-2.4,11.5-0.6,12.4"/>
</svg>
[ 04 ] html에 붙여넣은 svg파일이 잘 나타나고 있는지 확인해보면 아래와 같이 잘 나타나고 있는 것을 볼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vivus.js 라이브러리 사용하여 svg 드로잉 효과 넣기</title>
</head>
<body>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 500 450" style="enable-background:new 0 0 500 450;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #F47400;
stroke-width: 3;
stroke-miterlimit: 10;
}
</style>
<path class="st0" d="M283.6,191.1c-12.5-0.2-25.2,1.6-35.1,12.4c-5,5-11,10-14,23s12,28,19,30" />
<path class="st0" d="M332.5,239.5c0-7-9-22-14-27c-4-4-9.2-14.3-18.7-18.8" />
<path class="st0" d="M292.5,257.5c0,0,132,74,152,78c5,1,5-2,8-1s11,1,12,5s-1,7-5,8c-2,1-4,5-9,3c-2,0-4,2-9,1s-13-2-16-5
s-89-10-99-21c-3-1-37,7-52-4c-5-2-80,28-149-46c-0.6-0.6-1.7-1.1-2.9-1.3c-4.5-0.7-11,2.7-3.1,19.3c10,21,9,23,13,25c1,1,8-2,10,3
s5,15,0,15c-1,0-8,5-11,1c-1-1-7.4,4-15.7-1.5c-3.3-2.5-33.3-41.5-32.3-60.5c0-11-17.9-27.3-29.4-50.7s-34.6-74.3-20.6-97.3
s48-39,73-33s57,19,74,59s28,47,36,54s17.7,20.9,17.7,20.9" />
<path class="st0" d="M122.5,274.5c0,0,20,35,24,36s2.9-1,5.4,0s11.6,6,11.6,10s-1,8-6,8s-11.1,0.7-13.1-1.1" />
<path class="st0" d="M315.8,270.4c8.7,0.1,17.7-4.9,17.7-9.9s-3-6-3-10s2-8,2-11" />
<path class="st0" d="M324.7,275.3c0,0,112.8,47.2,119.8,48.2s9.4-2,12.7,0s8.3-1,9.3,5s-3.2,9.2-3.2,9.2" />
<path class="st0" d="M311,203.2c-0.5-8.7,6.5-12.7,4.5-16.7s-4-3-4-3s-11,3-12,6s-0.7,3.2-0.7,3.2" />
<path class="st0" d="M306,212c0,0-8.3-25.8-13.8-28.5c-5.5-2.8-10.8,8.3-13.2,14.3s-2.4,11.5-0.6,12.4" />
</svg>
</body>
</html>
02-2. CSS에서 해당 svg 파일 크기 줄이기
위의 미리보기에서 보듯이 나는 500*450px 사이즈에서 작업했음에도 불구하고 전체화면에 꽉 차게 SVG파일이 나타나는 것을 볼 수 있다. 그림파일로 사용되는 png와 jpg는 width, height 값으로 그 크기를 조절할 수 있는데 svg는 viewport와 viewbox라는 다른 개념으로써 크기가 조절되기 때문이다. 간단하게 말하자면 현재 svg에서 설정되어진 viewport의 값이 없기에 웹의 크기인 1920*1080 사이즈를 viewport를 기준삼아 이미지가 확대되어진 상태이다.
💡 svg viewbox, viewport, preserveAspectRatio 이해해보기 : https://sosol1016.tistory.com/62
SVG viewbox, viewport, preserveAspectRatio 개념 이해하기
나를 이해시키기 위해서 적어보는 SVG 개념 이해하기 😵 01. 벡터 이미지 일차적으로 svg의 viewbox를 이해하기 위해서는 svg가 vector 이미지라는 것을 알아야한다. 웹에서 이미지를 표현할때는 크게
sosol1016.tistory.com
svg{
width: 500px;
height: 450px;
background-color: #eee;
}
02-3. vivus.js에서 CDN 가져오기
기초적인 svg 작업이 끝이 났으니 vivus.js 사이트에서 CDN을 가지고 오자.
[ 01 ] vivus.js 홈페이지에 들어가면 가장 먼저 보이는 화면이다. vivus가 어떠한 라이브러리인지에 대한 간단한 소개글과 함께 아래에 [ View on GitHub ]라는 버튼이 보인다. 눌러서 들어가자.
[ 02 ] github 안에도 vivus 라이브러리에 대한 소개와 함께 이곳에서 CDN 링크를 가져올 수 있는 링크를 보여준다. 클릭해서 들어가면 위에서 보이는 부분이 있는데 vivus.min.js라는 것을 복사해서 head에 넣어주면 된다.
- 참고로 min.js 와 그냥 .js는 압축파일과 아닌 파일의 차이점으로 될 수있으면 가벼운 min.js를 사용하는 것을 추천한다.
- <script>태그 없이 주소뿐이기 때문에 <script src=" "></script> 노랑색 박스안에 주소를 넣어줄 것!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vivus CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js"></script>
<title>vivus.js 라이브러리 사용하여 svg 드로잉 효과 넣기</title>
</head>
<style>
svg{
width: 500px;
height: 450px;
background-color: #eee;
}
</style>
<body>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 500 450" style="enable-background:new 0 0 500 450;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #F47400;
stroke-width: 3;
stroke-miterlimit: 10;
}
</style>
<path class="st0" d="M283.6,191.1c-12.5-0.2-25.2,1.6-35.1,12.4c-5,5-11,10-14,23s12,28,19,30" />
<path class="st0" d="M332.5,239.5c0-7-9-22-14-27c-4-4-9.2-14.3-18.7-18.8" />
<path class="st0" d="M292.5,257.5c0,0,132,74,152,78c5,1,5-2,8-1s11,1,12,5s-1,7-5,8c-2,1-4,5-9,3c-2,0-4,2-9,1s-13-2-16-5
s-89-10-99-21c-3-1-37,7-52-4c-5-2-80,28-149-46c-0.6-0.6-1.7-1.1-2.9-1.3c-4.5-0.7-11,2.7-3.1,19.3c10,21,9,23,13,25c1,1,8-2,10,3
s5,15,0,15c-1,0-8,5-11,1c-1-1-7.4,4-15.7-1.5c-3.3-2.5-33.3-41.5-32.3-60.5c0-11-17.9-27.3-29.4-50.7s-34.6-74.3-20.6-97.3
s48-39,73-33s57,19,74,59s28,47,36,54s17.7,20.9,17.7,20.9" />
<path class="st0" d="M122.5,274.5c0,0,20,35,24,36s2.9-1,5.4,0s11.6,6,11.6,10s-1,8-6,8s-11.1,0.7-13.1-1.1" />
<path class="st0" d="M315.8,270.4c8.7,0.1,17.7-4.9,17.7-9.9s-3-6-3-10s2-8,2-11" />
<path class="st0" d="M324.7,275.3c0,0,112.8,47.2,119.8,48.2s9.4-2,12.7,0s8.3-1,9.3,5s-3.2,9.2-3.2,9.2" />
<path class="st0" d="M311,203.2c-0.5-8.7,6.5-12.7,4.5-16.7s-4-3-4-3s-11,3-12,6s-0.7,3.2-0.7,3.2" />
<path class="st0" d="M306,212c0,0-8.3-25.8-13.8-28.5c-5.5-2.8-10.8,8.3-13.2,14.3s-2.4,11.5-0.6,12.4" />
</svg>
<script>
</script>
</body>
</html>
[ 03 ] 위와 같은 코드가 완성된다. 마지막으로 script에서 vivus 효과를 넣어주기만 하면 된다.
위의 CDN을 가져왔던 github아래로 내려가면 사용방법에 대한 설명이 나와있는데 거기에 있는 코드를 가져오면 된다.
new Vivus('my-svg', {duration: 200}, myCallback);
[ 04 ] 위의 코드에서 고쳐야할 부분은 'my-svg'. 여기에 들어가야할 것은 id값으로 svg파일을 가져올때 보였던 id값을 가져오면 된다. 나의 경우는 'Layer_2'로 svg태그의 id값이 설정되어 있기 때문에 이 이름을 넣어주면 된다. 그러면 아래와 같은 코드가 완성된다.
- 위에서도 간단히 설명하였지만 이 id값은 레이어 이름이며 자신의 사용성에 맞춰서 변경해도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vivus CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js"></script>
<title>vivus.js 라이브러리 사용하여 svg 드로잉 효과 넣기</title>
</head>
<style>
svg{
width: 500px;
height: 450px;
background-color: #eee;
}
</style>
<body>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 500 450" style="enable-background:new 0 0 500 450;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #F47400;
stroke-width: 3;
stroke-miterlimit: 10;
}
</style>
<path class="st0" d="M283.6,191.1c-12.5-0.2-25.2,1.6-35.1,12.4c-5,5-11,10-14,23s12,28,19,30" />
<path class="st0" d="M332.5,239.5c0-7-9-22-14-27c-4-4-9.2-14.3-18.7-18.8" />
<path class="st0" d="M292.5,257.5c0,0,132,74,152,78c5,1,5-2,8-1s11,1,12,5s-1,7-5,8c-2,1-4,5-9,3c-2,0-4,2-9,1s-13-2-16-5
s-89-10-99-21c-3-1-37,7-52-4c-5-2-80,28-149-46c-0.6-0.6-1.7-1.1-2.9-1.3c-4.5-0.7-11,2.7-3.1,19.3c10,21,9,23,13,25c1,1,8-2,10,3
s5,15,0,15c-1,0-8,5-11,1c-1-1-7.4,4-15.7-1.5c-3.3-2.5-33.3-41.5-32.3-60.5c0-11-17.9-27.3-29.4-50.7s-34.6-74.3-20.6-97.3
s48-39,73-33s57,19,74,59s28,47,36,54s17.7,20.9,17.7,20.9" />
<path class="st0" d="M122.5,274.5c0,0,20,35,24,36s2.9-1,5.4,0s11.6,6,11.6,10s-1,8-6,8s-11.1,0.7-13.1-1.1" />
<path class="st0" d="M315.8,270.4c8.7,0.1,17.7-4.9,17.7-9.9s-3-6-3-10s2-8,2-11" />
<path class="st0" d="M324.7,275.3c0,0,112.8,47.2,119.8,48.2s9.4-2,12.7,0s8.3-1,9.3,5s-3.2,9.2-3.2,9.2" />
<path class="st0" d="M311,203.2c-0.5-8.7,6.5-12.7,4.5-16.7s-4-3-4-3s-11,3-12,6s-0.7,3.2-0.7,3.2" />
<path class="st0" d="M306,212c0,0-8.3-25.8-13.8-28.5c-5.5-2.8-10.8,8.3-13.2,14.3s-2.4,11.5-0.6,12.4" />
</svg>
<script>
new Vivus('Layer_2', {duration: 200}, myCallback);
</script>
</body>
</html>
02-4. option값 보면서 나만의 스타일로 변경하기
위와 같이 작업을 했다해도 아무런 변화가 없을 것이다.(기본적인 duration값 외에는 아무것도 들어가 있지 않기 때문이다) 아무런 option값을 넣지 않았기 때문인데 vivus의 github에서 제공해주는 option list를 보면서 값을 변경해보자.
type은 onebyone으로 start값은 autostart로 주었다.
autostart로 값을 주었기 때문에 window가 로딩되면 바로 드로잉 효과가 나타나는 것을 볼 수 있다.
new Vivus('Layer_2', {
duration: 200, //;이 아니라 ,으로 끝났다라는 표시를 해주자(안해주면 오류남)
type: 'oneByOne', //string이기 때문에 ''으로 들고와야한다.
start: 'autostart',
}); //myCallback 제거
최종적으로 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vivus CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js"></script>
<title>vivus.js 라이브러리 사용하여 svg 드로잉 효과 넣기</title>
</head>
<style>
svg{
width: 500px;
height: 450px;
background-color: #eee;
}
</style>
<body>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 500 450" style="enable-background:new 0 0 500 450;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #F47400;
stroke-width: 3;
stroke-miterlimit: 10;
}
</style>
<path class="st0" d="M283.6,191.1c-12.5-0.2-25.2,1.6-35.1,12.4c-5,5-11,10-14,23s12,28,19,30" />
<path class="st0" d="M332.5,239.5c0-7-9-22-14-27c-4-4-9.2-14.3-18.7-18.8" />
<path class="st0" d="M292.5,257.5c0,0,132,74,152,78c5,1,5-2,8-1s11,1,12,5s-1,7-5,8c-2,1-4,5-9,3c-2,0-4,2-9,1s-13-2-16-5
s-89-10-99-21c-3-1-37,7-52-4c-5-2-80,28-149-46c-0.6-0.6-1.7-1.1-2.9-1.3c-4.5-0.7-11,2.7-3.1,19.3c10,21,9,23,13,25c1,1,8-2,10,3
s5,15,0,15c-1,0-8,5-11,1c-1-1-7.4,4-15.7-1.5c-3.3-2.5-33.3-41.5-32.3-60.5c0-11-17.9-27.3-29.4-50.7s-34.6-74.3-20.6-97.3
s48-39,73-33s57,19,74,59s28,47,36,54s17.7,20.9,17.7,20.9" />
<path class="st0" d="M122.5,274.5c0,0,20,35,24,36s2.9-1,5.4,0s11.6,6,11.6,10s-1,8-6,8s-11.1,0.7-13.1-1.1" />
<path class="st0" d="M315.8,270.4c8.7,0.1,17.7-4.9,17.7-9.9s-3-6-3-10s2-8,2-11" />
<path class="st0" d="M324.7,275.3c0,0,112.8,47.2,119.8,48.2s9.4-2,12.7,0s8.3-1,9.3,5s-3.2,9.2-3.2,9.2" />
<path class="st0" d="M311,203.2c-0.5-8.7,6.5-12.7,4.5-16.7s-4-3-4-3s-11,3-12,6s-0.7,3.2-0.7,3.2" />
<path class="st0" d="M306,212c0,0-8.3-25.8-13.8-28.5c-5.5-2.8-10.8,8.3-13.2,14.3s-2.4,11.5-0.6,12.4" />
</svg>
<script>
new Vivus('Layer_2', {
duration: 200, //;이 아니라 ,으로 끝났다라는 표시를 해주자(안해주면 오류남)
type: 'oneByOne', //string이기 때문에 ''으로 들고와야한다.
start: 'autostart',
}); //myCallback 제거
</script>
</body>
</html>
03. 복잡한 svg파일, 도형도 구현될까?
엄청나게 복잡한 path가 들어간 그림을 드로잉 효과로 구현하고 싶었는데 안타깝게도 vivus는 너무 무거운 path의 svg는 나타내지 못한다. svg확장자는 래스터이미지보다는 가볍지만 path가 많아진다면 래스터이미지보다 용량이 더 커질 수 있다. 나는 이것을 코드화하여 불러내어 vscode에 집어넣다가 vscode가 렉걸려서 꺼지는걸 처음 경험했다. 하필 작업하던 포폴 html내부에 넣어서 삭제하는데만도 5분이 넘게 걸렸다...... 😅
혹시 내가 그린 svg가 구현이 되지 않는다면 그건 svg 자체가 너무 무거워서 그럴 것이다.
또한, 도형은 구현되지 않는다. path 즉, 선으로 이루어진 것이 아니라 배경색이 설정되어있다면 겉의 path만 나타나고 안의 배경은 여전히 나타나있는 상태에서 애니메이션이 진행될 것이다.
04. 점선으로 나타내고 싶을 땐?
vivus는 점선을 지원하고 있지 않다. path를 점선으로 설정했다고 하더라도 실제 구현되는 것은 실선으로 구현 될것이다. 이것은 CSS에서 설정을 해야한다.
05. 원하는 위치에서 vivus 드로잉 효과 넣기
위의 방법으로 드로잉 효과를 vivus를 구현했지만 문제점은 이것은 윈도우가 로딩되자마자 바로 애니메이션이 시작한다는 것이다. delay값을 준다고 해봤자 사용자가 언제 내가 원하는 위치에 넣은 svg이 실행되는지 그건 개개인에 따라 다르기 때문에 delay값으로도 설정할 수 없다. 그렇기 때문에 자바스크립트를 이용하여 scroll 이벤트를 넣어줘야한다. 아래에서 확인할 수 있다.
https://sosol1016.tistory.com/63
스크롤 이벤트가 들어간 vivus.js 드로잉 효과 구현하기
vivus.js 자바스크립트 라이브러리를 이용하여 svg파일에 드로잉 효과를 구현했었다. 간단한 SVG, vivus.js를 이용하여 그려지는 효과 넣기 01. vivus.js vivus는 가벼운 자바스크립트 기반의 svg 애니메이
sosol1016.tistory.com
