티스토리 뷰
3) CSS3 transition활용
- requestAnimationFrame은 애니메이션 동작 자체를 재귀 호출을 하고 연속적으로 자바스크립트 함수가 호출되면서 속성을 바꾸는 그런 방법이었는데 transition이라는 CSS3의 속성을 이용하면 좀 더 애니메이션을 빠르고 부드럽고 적은 성능으로도 구현할 수 있어 애니메이션 관련 기능 구현을 이 속성에 위임 할 수 있습니다.
CSS 기법으로 애니메이션 구현
- transition을 이용한 방법입니다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있습니다. 특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현합니다.
- css에 transition 값을 주면 좀 더 부드럽게 움직일 수 있습니다.
|
<html> <header> <style> .outside{ position: relative; background-color: blueviolet; width: 100px; font-size: 0.8em; color: #fff; left: 100px; top: 100px; transform: scale(1); transition: all 2s; // transition이 있다면 훨씬 부드럽게 효과가 나타납니다. all은 모든 속성을 의미하고 2s는 2초동안 변화하라는 의미입니다. all 대신 transform을 쓰면 transform만 변합니다. 즉, 오른쪽으로 바로 이동하지만 2초동안 scale이 커집니다. } </style> </header> <body> <div class="outside">제가 좋아하는 과일은요..</div> </body> </html> |
|
// transform의 scale 값을 바꿔서 크기를 늘려주는 코드 window.onload=function(){ // onload 이전에 스크립트가 실행되면 transition 적용 안됨. var base = document.querySelector(".outside"); base.style.transform = "scale(2)"; // css inline으로 문자열로 들어감. 크기가 2배로 커짐. base.style.left = "300px"; // left위치 값이 변함. 오른쪽으로 감. } |
- 버튼 같은 객체를 주고 자바스크립트를 이용하여 transition을 제어할 수 있습니다.
|
<html> <header> <style> .outside{ position: relative; background-color: blueviolet; width: 100px; font-size: 0.8em; color: #fff; left: 100px; top: 100px; transform: scale(1); transition: all 1s; } </style> </header> <body> <div class="outside" style="left:100px;">제가 좋아하는 과일은요..</div> <button>right</button> </body> </html> |
|
var target = document.querySelector(".outside"); var btn = document.querySelector("button");
btn.addEventListener("click", function(){ var pre = parseInt(target.style.left); target.style.left = pre + 10 + "px"; }); |
더 빠른 css3 애니메이션 관련 속성들
- GPU 가속을 이용하는 속성을 사용하면 애니메이션 처리가 빠릅니다.
- GPU 가속을 이용한다는 것은 메인 스레드에서 처리되는 게 아니고 그래픽 카드에서, 그래픽 처리를 그쪽에 위임해주는 것입니다. 이거는 멀티 프로세스랑 병렬로 이쪽에서 애니메이션을 처리해줄 수 있기 때문에 메인 스레드를 방해하지 않고 GPU에게 위임해서 처리를 가능하게 되어있습니다.
- 속성들로는 translate3D라든가 이런 것들이 있고 scale, rotate, opacity 이런 것들이 다 굉장히 빠르게 GPU 가속을 이용하는 거라 이런 것들을 처리해보면 좋습니다.
- transform : translateXX();
- transform : scale();
- transform : rotate();
- opacity
- 다음 링크에는 GPU 가속을 이용하는 방법들, 속성들이 나오니까 참고해서 쓰시기 바랍니다.
링크 바로가기 - CSS 애니메이션까지 좀 알아봤고요. 직접 한번 실험을 해보셔야 되는데 뭘 해보냐면 특정 element를 만들고, transition 속성을 주고 그다음에 hover를 했을 때 좌측 상단에서 우측 하단으로 애니메이션 되면서 scale이나 opacity, 이런 걸 주면서 쭉 변경이 된다거나 이런 것들을 한번 해보시면 좋을 것 같습니다.
- 그리고 또 하나 vendor prefix라는 게 있습니다. 예를 들어서 transition나 transform 같은 효과는 CSS3에서 나오는 기능인데 브라우저 지원 범위가 좀 낮습니다. 지원범위가 높아졌다고는 하지만 IE9라든가 옛날 브라우저, 이런 데까지 지원해야 된다면 그럴 때는 vendor prefix라는 게 좀 필요합니다.
| vendor prefix는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. |
| ex) <style> .button { background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 --> background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 --> background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 --> background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 --> background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 --> background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 --> } </style> |
| 출처: http://tcpschool.com/css/css3_module_vendorPrefix |
생각해보기
- 특정 엘리먼트를 만들고, 그 엘리먼트에 transition 속성을 주고, hover했을 때 좌측 상단에서, 우측 하단으로 움직이는 animation을 만들어보세요.
- vendor prefix가 무엇이고, 왜 필요한지 알아봅니다.
참고 자료
[참고링크] 하드웨어 가속에 대한 이해와 적용 http://d2.naver.com/helloworld/2061385
[참고링크] CSS Transitions and Transforms for Beginners
https://robots.thoughtbot.com/transitions-and-transforms
[참고링크] window.requestAnimationFrame()
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글
| 5. WEB UI - FE (2) (0) | 2019.08.03 |
|---|---|
| 5. WEB UI - FE (1) (0) | 2019.08.03 |
| 4. Web Animation - FE (2) (0) | 2019.08.02 |
| 4. Web Animation - FE (1) (0) | 2019.08.02 |
| 3. Ajax - FE (2) (0) | 2019.08.02 |