UI. UX3 SVG Line Animation SVG Line Animation SVG 속성을 활용한 애니메이션 최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9 웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속성을 활용해 선을 그리는 애니메이션을 살펴보고자 합니다. SVG 살펴보기 준비운동 느낌으로 SVG에 대해 간단히 살펴봅시다. 아무 SVG 파일을 편집기로 열어보면 코드가 좌르륵 써있는 걸 볼 수 있습니다. SVG 넵, 이게 바로 중요한 점입니다. SVG는 이미지가 아닌 문서라는 거죠! JPG, PNG 등의 래스터 이미지는 크기가 명확하게 정의되어 있습니다. 정확히는 가로 세로 비율이 정해져있습니다. 그래서 강제로 다른 가로/세로 비율을 지정하면 이미지가 무참하게 깨져버립니다. 따라서 보.. 2018. 5. 16. [웹애니메이션] anime.js 튜토리얼 Document anime.js 웹 애니메이션과 anime.js anime.js는, CSS를 주로 다루는 사람들에게 친숙한 구문으로 DOM을 조작해 웹 애니메이션을 구현하는 라이브러리입니다. 웹 애니메이션은 크게 2가지로 나눠볼 수 있는데, 과 입니다. 일반적으로 사용자는 정지 화면보다 움직이는 화면에서 정보를 더 잘 얻는다고 합니다. 따라서 UI/UX 애니메이션을 추가하면, 사용자가 Web사이트를 탐색하거나 특정 작업을 수행하는 과정을 도울 수 있습니다. 한편, 독립 애니메이션은 사이트의 컨셉을 표현하기 위해 사용합니다. CSS3가 나온 지금, 간단한 인터랙션은 CSS만으로 표현할 수 있고 분기가 없는 애니메이션이라면(로딩 애니메이션 등) CSS로 충분히 표현 가능합니다. 대신 관리가 어렵고, 브라우저.. 2018. 4. 25. Snap.svg (포스팅 테스트 중!) Document Snap.svg 평소 공부해야지 아미루고미루던 SVG! 를 웹 애니메이션에 써먹어 보고 싶기 때문에, 이번 포스트는 Snap.svg에 대한 탐구입니다 :-9 왜 라이브러리를 쓸까? SVGDOM은 SVG문서를 프로그램으로 조작하기 위한 api를 규정한 것입니다. HTML5를 지원하는 브라우저라면 이 SVGDOM을 지원하고 있으므로, JS를 가지고 SVG 그래픽을 그릴 수 있습니다....만. 굳이 왜 라이브러리를 쓰냐 하면은, 너무 복잡하거든요. 예를 들어, 직접 SVGDOM을 조작하려면 10줄이나 되는 코드를 써야 하는데, Snap.svg를 통하면 1줄이면 됩니다. 또한 다른 라이브러리와 비교하면 Snap.svg는 좀 더 쉽게 SVG를 다룰 수 있다고 합니다. 아무튼 유지보수 측면도 있고 .. 2018. 4. 18. 이전 1 다음
