애플?홈의?아이폰 4S 제폼 웹페이지에서 메인 비주얼를 장식하는 슬라이드는 총 6개의 애니메이션 시퀀스로 구분된 제품 특징들로 구성되어 있습니다. 이 제품 슬라이드를 구현하는 CSS 애니메이션과?자바스크립트?코드를 사례로 효과적인 애니메이션을 구현하는 방법에 대하여 공부해 봅시다.
아래의 데모는 작동원리를 이해하기 위해 약 20% 수준으로 축소한 것이며, 브라우저의 뷰포트를 확인하기 위한 가상 요소(browser)가 포함되어 있습니다. 슬라이드 요소들이 커다란 하나의 맵(phone-stage)으로 구성되어 있고?아이폰?검정색(bphone)만 별도의 레이어로 취급되고 있습니다. 그리고 슬라이드 6번은 1번 슬라이드와 절묘하게 교차하면서 반복된다는 사실을 알 수 있습니다. 그러나 실제 버전에는 각 슬라이드에 사용된 이미지와 텍스트가 개별 요소들로 구분되어 보다 많은 구성 요소들로 이루어져 있으며, 링크와?텍스트?애니메이션 정보 등의 처리까지 포함하고 있지만 이 데모에서는 그 것을 통합하거나 생략한 것입니다.
데모 출처:?http://johnbhall.com/iphone-4s/?via John B. Hall
슬라이드 기능을 만드는?자바스크립트?핵심 함수는?Slide와?Sequencer?클래스입니다.?Sequencer는 재생/정지 상태를 관장하고 정해진 시간에 다음 시퀀스를 재생합니다.?Slide는 애니메이션 대상 요소와 이벤트 핸들러, CSS?transform과?transition?속성에 사용될?translate,?rotate?등의 값들로 구성된 인스턴스를 생산합니다. 대상이 된 HTML 요소에 스타일(style) 속성이 인라인으로 갱신되면서 애니메이션이 발생하는 것입니다. 파이어버그?또는 돔인스펙터(개발자 도구)를 열고 “phone-stage”의 스타일 속성을 감시해 보세요. 위 대모에 사용된 코드는 다음과 같습니다.
[[code]]czozMjQ6XCIgdmFyIHBob25lU3RhZ2UgPSAkKFxcXCJwaG9uZS1zdGFnZVxcXCIpLCBicGhvbmUgPSAkKFxcXCJicGhvbmVcXFwiKTsgdmFyIHEgPXtbJiomXX0gbmV3IFNsaWRlKFt7IGVsOiBwaG9uZVN0YWdlLCB4OiAtMzI1LCB5OiAtMjM0LCByOiAtMzAgfSwgeyBlbDogYnBob25lLCB4OiAwe1smKiZdfSwgeTogMCwgcjogLTMwIH1dKSwgdCA9IG5ldyBTbGlkZShbeyBlbDogcGhvbmVTdGFnZSwgeDogLTI2NCwgeTogLTMxNiwgcjogLTB7WyYqJl19IH0sIHsgZWw6IGJwaG9uZSwgeDogLTMwMCwgeTogLTMwMCwgcjogLTMwIH1dKSwgLi4uIGIgPSBuZXcgU2VxdWVuY2VyKFtxLCB0LHtbJiomXX0geiwgdSwgaiwgZiwgdl0pOyBiLnBsYXkoKTtcIjt7WyYqJl19[[/code]]
즉, 이 슬라이드에서 발생하는 애니메이션은 전부 CSS로 처리하지만 이것을 제어하는 것은?자바스크립트입니다.?자바스크립트는 시퀀스를 구성하는 transition과 transform 속성을 만들어 해당 요소의 인라인 스타일 속성에 대입해 주는 거죠. 이 간단한 원리로 얻어지는 가치는 무엇일까요? 자, 우리는 일반적으로 애니메이션을 처리할 때 jQuery에서 제공하는?.animate?또는 Prototype &?Scriptaculous의?.morph와 같은?자바스크립트?기반 애니메이션 함수를 사용해 왔습니다. 왜냐하면 사용자의 미세한 행동들 까지도 감지하여 화면에 응답하는 것을 만들어야 했기 때문입니다. 그리고 이 애니메이션 함수들은 Frame-by-Frame으로 연산하기 때문에 생각보다 많은 처리 비용이 든다는 사실을 여러분은 잘 알고 있을 것입니다.
CSS로 처리되는 애니메이션을?자바스크립트로 제어한다는 것은 곧 화면상의 상호작용을 직접 제어할 수 있게 되는 것을 의미합니다. 이것은 매우 흥미롭습니다.?.animate나?.morph를 사용하는 대신에 CSS 속성을 활용하여 브라우저의 자원을 효율적으로 분산 처리하는 효과적인 애니메이션 구현 기법입니다. 이렇게 확보된 자원으로 더욱 복잡한?애플리케이션을 구상할 수 있고, 아름다운 그래픽 애니메이션도 지원 받을 수 있습니다. 특히 CSS transitions는?하드웨어?가속을 지원하기 때문에?자바스크립트?연산으로는 도저히 답이 안나오는 여러가지 사치성(호화로운) 애니메이션 효과들을 제품에 적용여 네이티브?애플리케이션에 하이킥을 날리는?레알?웹애플리케이션을 만들어 낼 수 있습니다.
분석 😕http://johnbhall.com/iphone-4s/
진짜:?http://www.apple.com/iphone/