로딩바 이미지와 로딩바 만드는 방법 - GIF애니메이션

오늘 작성할 글은....다양한 로딩바 이미지에 관한 글이다.

이미지 뿐 아니라 간단한 작업으로 직접 제작하는 방법도 설명하겠다.

나의 경우엔 GIF애니메이션(움짤)로 제작함.

 

 

 

 

 

 

 

 

 

 

 

 

 

이건 내가 직접 강좌를 보고 만든 애니메이션.

효과를 주고선 씬별로 각도변화를 줘서

흡사 회전하는 것 같은 움직임을 만든 결과물이다.

 

 

 

강좌 링크는 아래...ㅋㅋㅋ

http://www.iceflowstudios.com/2013/tutorials/loading-circle-animation-using-photoshop-cs6/

귀찮으면 아래서 바로보기

보면 알겠지만 만드는 방법이 생각보다 간단하다.

영어로 설명하지만 우린 어차피 화면보며 이해하는거라

크게 어려운거 없이 가능할거다!!!!

 

 

 

사실 내가 사용하는 포토샵 버전과 강좌에서의 버전이 달라

난 위 강좌에서 언급한 대로 안하고

기존의 GIF애니메이션 제작할 때 사용하던

타임라인을 활용하였다.

그래도 개 충분.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

GIF애니메이션이 싫다면 이 소스도 눈여겨 보자.

css를 활용한 html코드만으로 구현하는 로딩바 이미지.

일명 CSS Spinner Animation.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

http://codepen.io/samd21313/pen/Ixlap

봐도 봐도 신기함

https://thomas.vanhoutte.be/miniblog/android-lollipop-animated-loading-gif/

위 링크도 코드로 구현하는 애니메이션 같은데

내가 보기엔 살짝 설명이 부족 한 정도로 어렵다.

원래 항상 보이다가도 필요해서 찾으려면 난감한게 로딩바 같은 요소이다.

일하다 보면 개똥도 약에 쓰려면 없다는 표현이 딱인 상황을

종종 마주하게 됨.

-_-

어찌되었든 조금이라도 유용하게 읽히길 바라며....

 

 

 

 

난 이만

뿅!