Hareketli arayüzlerde kontrolü kullanıcıya bırakmak

Hareketli bir karakter, bir ürünü tanıtmak veya arayüzde yol göstermek için kullanılabilir. Kullanıcının okumak, yazmak ya da bir bağlantıya tıklamak istediği anlarda ise geri çekilmesi gerekir. bluedev'deki ajantikmuhasebe karakterini geliştirirken hareketin kendisi kadar bu durma koşullarına da odaklandık.

Önce hareketi durdurma koşullarını tanımlayın

Tarayıcıdaki hareket azaltma tercihini izleyin. Bu tercihte karakterin kaybolması gerekmez; kendi kendine gezinmek yerine sabit durabilir ve tanıtımını beklemeden gösterebilir. Dokunmatik ekranda hareketli bir hedefi yakalamak zorlaşacağı için otomatik gezinme yerine taşıma ve dokunmayla açma daha uygun olabilir.

Sekme görünür değilken, kullanıcı bir form alanına yazarken veya bir pencere açıkken gezinmeyi durdurun. Page Visibility API sekmenin görünürlüğünü bildirir; tek başına bir öğenin ekranda ne kadarının göründüğünü söylemez. Bu ayrımı, yalnızca görünür öğelerde çizim yaparken ayrıca ele almak gerekir.

Konumu görünümden ayrı tutun

Sürükleme sırasında sık değişen koordinatların her seferinde bütün uygulamayı yeniden çizdirmesi gerekmez. Geçici konumu bir referansta tutup küçük bir kapsayıcının transform değerini güncelleyebilirsiniz. Tanıtımın açık olup olmadığı gibi arayüz durumlarını ise React durumunda tutun.

Web Animations API bir kapsayıcıyı iki konum arasında hareket ettirebilir. Hareket yarıda durdurulacaksa önce ekranda görülen konumu alın, animasyonu iptal edin ve kapsayıcıyı bu konuma yerleştirin. Aksi hâlde karakter başlangıç noktasına sıçrayabilir.

Sürüklemeyi tıklamadan ayırın

Pointer capture, basılı tutma başladıktan sonra gelen işaretçi olaylarını aynı öğeye yönlendirir. Kullanıcı öğenin dışına çıktığında da hareketi izleyebilirsiniz. pointerup ve pointercancel durumlarında taşıma bilgisini temizleyin; yakalamanın kaybolmasını da ele alın.

Küçük bir hareketi sürükleme sayıp tanıtım tıklamasını kaybetmeyin. Belirlediğiniz eşik aşıldığında sürüklemeye geçin; taşıma bittikten sonraki tıklamanın kendiliğinden bir bağlantı açmasını önleyin. Bu eşik cihazın ve hedefin boyutuna göre değerlendirilmelidir.

Özelliğin varlığını gerçekten kontrol edin

Bir tarayıcı nesnesinin bulunması, bütün yöntemlerinin bulunduğu anlamına gelmez. Aynı durum test ortamları ve tarayıcı uyarlamaları için de geçerlidir. Opsiyonel bir dinleyiciyi yalnızca çağrılabilir olduğunda ekleyin:

type Connection = {
  saveData?: boolean;
  addEventListener?: EventTarget["addEventListener"];
};
const connection = (
  navigator as Navigator & { connection?: Connection }
).connection;
if (typeof connection?.addEventListener === "function") {
  connection.addEventListener("change", onChange);
}

Bu örnekte onChange uygulamanın değişiklik işleyicisidir. Eklenen dinleyiciyi bileşen kapanırken kaldırın. Animasyon yöntemi yoksa aynı kontrolü ona da uygulayın ve karakterin sabit görünümünü koruyun. Testlerde yöntemi kaldırarak gezinmenin sayfayı bozmadığını doğrulayabilirsiniz.

Tanıtım balonunu ve odağı koruyun

Karakter ekranın sağında olsa bile balonun sağ kenarı ekran dışında kalmamalıdır. Balonun yerini mevcut genişlikten hesaplayın; üstte veya altta kalan boşluğa göre açılma yönünü belirleyin. Dar ekranlarda içeriğin kendi içinde kaydırılmasına izin verin.

Hover ile açılan içerik, fare balona geçerken kapanmamalıdır. Klavye odağında hareketi durdurun; Escape ile tanıtımı kapatın. Taşımak için ok tuşları, gizlemek için bir düğme ve tekrar göstermek için görünür bir kontrol sunun. Hareket, kullanıcının işini kolaylaştırdığı sürece arayüzde kalmalıdır.