Görünümler Arasında Animasyon Oluşturma

Uygulamalarınızda iki görünüm arasında nasıl animasyon uygulayacağınızı öğrenin.

Paul Lewis

İster liste görünümünden ayrıntılar görünümüne, ister kenar çubuğunda gezinme bölmesine geçiş olsun, genellikle kullanıcıları uygulamanızdaki görünümler arasında taşımak istersiniz. Bu görünümler arasındaki animasyonlar kullanıcıların ilgisini canlı tutar ve projelerinize daha da fazla hayat katar.

  • Görünümler arasında geçiş yapmak için çevirileri kullanın. left, top veya düzeni tetikleyen başka özellikler kullanmaktan kaçının.
  • Kullandığınız animasyonların hızlı ve sürelerin kısa olduğundan emin olun.
  • Ekran boyutları büyüdükçe animasyonlarınızın ve düzenlerinizin nasıl değiştiğini düşünün; küçük ekranlarda çalışan öğeler masaüstü bağlamında kullanıldığında garip görünebilir.

Bu görünüm geçişlerinin nasıl görüneceği ve nasıl davrandığı, inceleme yaptığınız görüntüleme türüne bağlıdır. Örneğin, bir görünümün üzerinde modal yer paylaşımı canlandırmak, liste ve ayrıntılar görünümü arasında geçişten farklı bir deneyim olmalıdır.

Görünümler arasında geçiş yapmak için çevirileri kullanın.

İki görünüm arasında çeviri yapma.

İşinizi kolaylaştırmak için, liste görünümü ve ayrıntılar görünümü olmak üzere iki görünüm olduğunu varsayın. Kullanıcı liste görünümünde bir liste öğesine dokunduğunda, ayrıntılar görünümü kayarak görünüme girer ve liste görünümü kaybolur.

Hiyerarşiyi görüntüleyin.

Bu efekte ulaşmak için, overflow: hidden öğesinin ayarlandığı her iki görünüm için de bir kapsayıcıya ihtiyacınız vardır. Bu şekilde, iki görünüm de herhangi bir yatay kaydırma çubuğu gösterilmeden kapsayıcının içinde yan yana bulunabilir ve her bir görünüm gerektiğinde kapsayıcı içinde yan yana kayabilir.

Kapsayıcının CSS'si:

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

Kapsayıcının konumu relative olarak ayarlandı. Bu, içindeki her bir görünümün tamamen sol üst köşeye yerleştirilebileceği ve daha sonra, dönüştürmelerle hareket ettirilebileceği anlamına gelir. Bu yaklaşım, performans açısından left özelliğini kullanmaktan daha iyidir (çünkü bu, düzeni ve boyamayı tetikler) ve genellikle rasyonelleştirmesi daha kolaydır.

.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 özelliğine transition eklemek güzel bir slayt efekti sağlar. İyi bir his vermek için, Özel Yumuşak Geçiş kılavuzunda ele aldığımız özel bir cubic-bezier eğrisi kullanılır.

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

Ekran dışındaki görünüm sağa çevrilmelidir; dolayısıyla bu durumda ayrıntılar görünümü taşınmalıdır:

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

Artık sınıfları işlemek için az miktarda JavaScript gereklidir. Bu işlem, görünümlerdeki uygun sınıfları açar/kapatır.

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);

Son olarak, bu sınıfların CSS bildirimlerini ekleriz.

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

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

Deneyin

Bunu birden çok görünümü kapsayacak şekilde genişletebilirsiniz ve temel kavram aynı kalmalıdır; görülemeyen her görünümün ekran dışında olması ve gerektiğinde etkin hale getirilmesi gerekir. Ayrıca, o anda ekranda olan görünüm kaldırılmalıdır.

Bu teknik, görünümler arasında geçiş yapmanın yanı sıra kenar çubuğu gezinme öğeleri gibi diğer kayan öğelere de uygulanabilir. Tek gerçek fark, diğer görünümleri taşımanız gerekmemesidir.

Animasyonunuzun büyük ekranlarda çalıştığından emin olma

Hiyerarşiyi büyük ekranda görüntüleyin.

Büyük bir ekranda, liste görünümünü kaldırmak yerine her zaman olduğu gibi tutmalı ve ayrıntılar görünümünü sağ taraftan kaydırmalısınız. Bu işlem, gezinme görünümüyle ilgilenmeye neredeyse benzer.