간단하게 멋진 로딩 SVG 애니메이션 만들어보기

 

멋진 로딩 애니메이션을 만드려면 어떤 툴을 사용해야 할까

 

1. Adobe After Effects: 강력한 그래픽 애니메이션 기능을 제공하며, 전문적인 디자인 툴로 유명합니다.
2. Hype: HTML5 기반의 애니메이션 툴로, 웹 브라우저에서 빠르게 작동하며, 사용하기 쉬운 인터페이스를 가지고 있습니다.
3. Lottie: 애니메이션 JSON 데이터를 사용하여 웹 및 모바일 애플리케이션에서 로딩 애니메이션을 만들 수 있는 플랫폼입니다.
4. Principle: 맥OS용 애니메이션 툴로, 간단하게 애니메이션을 만들 수 있으며, 사용하기 쉽고 직관적인 인터페이스를 가지고 있습니다.

 

'animateTransform'을 이해하면

sketch, illustrator로도 SVG 로딩 애니메이션을 만들 수 있다.

 

https://www.youtube.com/watch?v=1lmFMsrLgwM 

 

 

 

코드 없이 간단한 조작으로 SVG 애니메이션을 만들 수 있는 사이트도 있다.

유료인게 흠이지만...

 

https://loading.io/

여러가지 로딩 애니메이션 템플릿을 제공하고, 간단히 제작할 수 있는 툴을 제공한다.

 

loading.io

 

 

https://svgcircus.com/

직관적인 UX로 세부적인 수정이 가능한 로딩 애니메이션 제작 툴

Actors에서 레이어 구성하고

Scenario에서 모션을 넣어주면 금방 완성된다.

Export SVG를 눌러 코드가 추출되고 직접 코드에 붙이거나

SVG 확장자로 저장해주면 완성

아래와 같이 코드가 추출되고

<svg id="SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle id="actor_5" cx="50" cy="75" r="5" opacity="1" fill="#000" fill-opacity="1" stroke="#000" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_4" cx="50" cy="75" r="5" opacity="1" fill="#000" fill-opacity="1" stroke="#000" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_3" cx="50" cy="75" r="5" opacity="1" fill="#000" fill-opacity="1" stroke="#000" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_2" cx="50" cy="75" r="5" opacity="1" fill="#000" fill-opacity="1" stroke="#000" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_1" cx="50" cy="75" r="5" opacity="1" fill="#000" fill-opacity="1" stroke="#000" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle>
<script type="text/ecmascript">
<![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708").getElementById("actor_1"),type:"circle",cx:50,cy:75,dx:10,dy:24,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708").getElementById("actor_2"),type:"circle",cx:50,cy:75,dx:10,dy:24,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708").getElementById("actor_3"),type:"circle",cx:50,cy:75,dx:10,dy:24,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708").getElementById("actor_4"),type:"circle",cx:50,cy:75,dx:10,dy:24,opacity:1};actors.actor_5={node:document.getElementById("SVG-Circus-1fa2287a-bb48-b179-9e09-403903260708").getElementById("actor_5"),type:"circle",cx:50,cy:75,dx:10,dy:24,opacity:1};var tricks={};tricks.trick_1=(function(_,t){t=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(t)%1,t=t*4%1,t=0>t?1+t:t;var a=(_.node,-25*Math.cos(-90*Math.PI/180)),i=25*Math.sin(-90*Math.PI/180);a+=25*Math.cos((-90-360*t*1)*Math.PI/180),i-=25*Math.sin((-90-360*t*1)*Math.PI/180),_._tMatrix[4]+=a,_._tMatrix[5]+=i});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.9?_.setAttribute("opacity",t.opacity-(i-0.9)*(t.opacity/(1-0.9))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4","actor_5"],tricks: [{trick: "trick_1",start:0,end:1},{trick: "trick_2",start:0,end:1}],startAfter:0,duration:6000,actorDelay:160,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}for(c in actors)i=actors[c],i&&i.node&&i._tMatrix&&i.node.setAttribute("transform","matrix("+i._tMatrix.join()+")");_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script></svg>

에디터에 붙여서 SVG확장자로 저장할 수도 있다.

 

 

 

다음엔 animateTransform에 대해 자세히 이해해봐야겠다.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform