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

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

Paul Lewis
X Ana sayfa

Genellikle, kullanıcıları uygulamanızdaki görünümler arasında taşımak (ör. bir listeden ayrıntılar görünümüne taşımak) veya kenar çubuğu gezinme menüsü göstermek istersiniz. Bu görünümler arasındaki animasyonlar, kullanıcının ilgisini canlı tutar ve projelerinize daha da fazla canlılık katar.

  • Görünümler arasında geçiş yapmak için çevirileri kullanın; left, top veya düzeni tetikleyen başka bir mülkü kullanmaktan kaçının.
  • Kullandığınız animasyonların hızlı ve sürelerinin 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 göz önünde bulundurun. Daha küçük ekranlarda işe yarayan öğeler, masaüstü bağlamında kullanıldığında garip görünebilir.

Bu görüntü geçişlerinin görünümü ve davranışı, uğraştığınız görüntü türüne bağlıdır. Örneğin, bir görünümün üzerine modal yer paylaşımı animasyonu uygulamak, liste ile ayrıntılar görünümü arasında geçiş yapmaktan farklı bir deneyim olmalıdır.

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

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

İşinizi kolaylaştırmak için iki görünüm olduğunu varsayalım: liste görünümü ve ayrıntılar görünümü. Kullanıcı liste görünümündeki bir liste öğesine dokunduğunda, ayrıntılar görünümü içeri girer ve liste görünümü dışarı kayabilir.

Hiyerarşiyi görüntüleyin.

Bu efekti elde etmek üzere, üzerinde overflow: hidden değeri bulunan her iki görünüm için de bir kapsayıcıya ihtiyacınız vardır. Bu sayede, iki görünüm de yatay kaydırma çubukları göstermeden kapsayıcı içinde yan yana olabilir ve her görünüm gerektiğinde kapsayıcı içinde yan yana kaydırılabilir.

Kapsayıcının CSS'si:

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

Kapsayıcı konumu relative olarak ayarlanmıştır. Bu, içindeki her görünümün kesinlikle sol üst köşeye konumlandırılabileceği ve ardından dönüştürmelerle hareket ettirilebileceği anlamına gelir. Bu yaklaşım, performans açısından left mülkünü kullanmaktan daha iyidir (bu, düzeni ve boyamayı tetiklediği için) ve genellikle mantıklı bir şekilde açıklanması 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. Siteye güzel bir görünüm vermek için, Özel Yumuşak Geçiş rehberinde açıkladığımız özel bir cubic-bezier eğrisi kullanmaktadı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 kaydırılmalıdır. Bu nedenle, bu durumda ayrıntılar görünümünün taşınması gerekir:

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

Artık sınıfları işlemek için az miktarda JavaScript gereklidir. Bu işlem, görünümlerde 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 için CSS beyanları ekleriz.

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

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

Deneyin

Bu yöntemi birden fazla görünümü kapsayacak şekilde genişletebilirsiniz. Temel kavram aynı kalır; görünmeyen her görünüm ekran dışında olmalı ve gerektiğinde ekrana getirilmeli, ekranda görünen görünüm ise ekrandan 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 kaydırarak açılan diğer öğelere de uygulanabilir. Tek fark, diğer görünümleri taşımanız gerekmemesidir.

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

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

Daha büyük bir ekranda, liste görünümünü kaldırmak yerine her zaman açık tutmalı ve sağ taraftan ayrıntılar görünümüne kaydırmalısınız. Bu işlem, gezinme görünümüyle uğraşmakla hemen hemen aynıdır.