뷰 간 애니메이션

앱에서 두 뷰 간에 애니메이션을 적용하는 방법을 알아봅니다.

애플리케이션에서 뷰 간에 사용자를 이동(목록에서 세부정보 뷰로 또는 사이드바 탐색을 표시)하려는 경우가 많습니다. 이러한 뷰 간의 애니메이션은 사용자의 참여를 유지하고 프로젝트에 생명력을 불어넣습니다.

• 변환을 사용하여 뷰 간에 이동합니다. left, top 또는 레이아웃을 트리거하는 다른 속성은 사용하지 마세요.
• 사용하는 애니메이션은 짧고 길이를 짧게 유지하세요.
• 화면 크기가 커짐에 따라 애니메이션과 레이아웃이 어떻게 변하는지 고려합니다. 작은 화면에 적합한 애니메이션과 레이아웃이 데스크톱 화면에서는 이상하게 보일 수 있습니다.

이러한 뷰 전환의 모양과 동작은 다루고 있는 뷰의 유형에 따라 다릅니다. 예를 들어 뷰 상단의 모달 오버레이 애니메이션은 목록 뷰와 세부정보 뷰 간 전환과는 다른 경험이어야 합니다.

번역을 사용하여 보기 간에 이동하기

작업을 더 쉽게 하기 위해 목록 뷰와 세부정보 뷰라는 두 가지 뷰가 있다고 가정해 보겠습니다. 사용자가 목록 뷰 내부의 목록 항목을 탭하면 세부정보 뷰가 슬라이드인되고 목록 뷰가 슬라이드아웃됩니다.

이 효과를 얻으려면 overflow: hidden가 설정된 두 뷰에 모두 컨테이너가 필요합니다. 이렇게 하면 두 뷰가 가로 스크롤바를 표시하지 않고 컨테이너 내부에 나란히 있을 수 있으며 각 뷰는 필요에 따라 컨테이너 내부에서 나란히 슬라이드할 수 있습니다.

컨테이너의 CSS는 다음과 같습니다.

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

컨테이너의 위치는 relative로 설정됩니다. 즉, 내부의 각 뷰를 왼쪽 상단에 완전히 배치한 다음 변환을 사용하여 이리저리 이동할 수 있습니다. 이 접근 방식은 레이아웃과 페인트를 트리거하기 때문에 left 속성을 사용하는 것보다 성능이 우수하며 일반적으로 합리화하기 더 쉽습니다.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

transform 속성에 transition를 추가하면 멋진 슬라이드 효과를 얻을 수 있습니다. 좋은 느낌을 주기 위해 맞춤 이징 가이드에서 설명한 맞춤 cubic-bezier 곡선을 사용합니다.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

화면 밖에 있는 뷰는 오른쪽으로 변환되어야 하므로 이 경우 세부정보 뷰를 이동해야 합니다.

.details-view {
  transform: translateX(100%);
}

이제 클래스를 처리하기 위해 약간의 JavaScript가 필요합니다. 그러면 뷰에서 적절한 클래스가 전환됩니다.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

마지막으로 이러한 클래스의 CSS 선언을 추가합니다.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

사용해 보기

이를 확장하여 여러 뷰를 포함할 수 있으며 기본 개념은 동일하게 유지되어야 합니다. 보이지 않는 각 뷰는 화면에서 벗어나서 필요에 따라 가져오고 현재 화면 뷰는 밖으로 이동해야 합니다.

이 기법은 뷰 간 전환 외에도 사이드바 탐색 요소와 같은 다른 슬라이드인 요소에도 적용될 수 있습니다. 유일한 차이점은 다른 뷰를 이동할 필요가 없다는 것입니다.

애니메이션이 더 큰 화면에서 작동하도록 보장

큰 화면의 경우 목록 뷰를 제거하지 않고 항상 유지하고 세부정보 뷰를 오른쪽에서 슬라이드해야 합니다. 탐색 뷰를 다루는 것과 거의 같습니다.