Skip to main content
LanguageTürkçe
Fizik ve Jetonlar4 dakikalık okumaEkim 2026

Hareket belirteçleri nedir ve tasarım sistemlerinde nasıl çalışırlar?

Kısa cevap

Hareket belirteçleri, animasyon için tasarım sistemi değerleri olarak adlandırılır: süreler, gevşeme eğrileri, yay ayarları ve bazen mesafeler. Ekipler, her bileşene 300 ms'lik hareket hızı yazmak yerine motion.duration.medium veya motion.spring.gentle gibi adlar kullanıyor, böylece hareket tutarlı kalıyor ve tek bir yerden değiştirilebiliyor.

Ana nokta

  • Hareket belirteçleri zamanlama kararlarını saklar: süre, gevşeme, yay sertliği ve sönümleme
  • Bunları amaca (giriş, çıkış, vurgu) veya boyuta (kısa, orta, uzun) göre adlandırın
  • Küçük bir set tutun: birkaç süre ve birkaç eğri veya yay
  • Erişilebilirlik için hareketi azaltılmış bir varyant ekleyin
  • Bunları renk ve aralıkla aynı jeton hattında saklayın

Tasarım sistemleri halihazırda renk, aralık ve tipografi için belirteçler kullanıyor. Hareket belirteçleri aynı fikri animasyona da uygular. "Küçük öğeler hızla hareket eder ve yavaşça yerleşir" gibi kararları, her tasarımcı ve geliştiricinin kullandığı adlandırılmış değerlere dönüştürürler.

Tipik bir set, süreleri (kısa, orta, uzun), gevşeme eğrilerini (standart, giriş, çıkış) ve gittikçe artan şekilde sertlik, sönümleme ve kütle ile tanımlanan yayları içerir. Yaylar popülerdir çünkü doğal hissettirirler ve koddaki kesintileri iyi bir şekilde giderirler.

Ad vermek önemlidir. Motion.enter veya motion.emphasis gibi amaca dayalı adların doğru şekilde uygulanması ham sayılara göre daha kolaydır. Seti küçük tutun. Her bileşen kendi eğrisine sahip olursa tokenlar işlerini yapmayı bırakır.

Erişilebilirlik de jetonlara aittir. Kullanıcı azaltılmış hareketi açtığında ne olacağını tanımlayın; örneğin büyük hareket yerine daha kısa soluklaşmalar, böylece her bileşen bunu aynı şekilde ele alır.

Tokenlar genellikle JSON'te saklanır ve bir token oluşturma aracıyla CSS değişkenlerine, Swift, Kotlin veya JavaScript'e dönüştürülür. Ücretsiz Motion Token Oluşturucumuz uyarlayabileceğiniz bir başlangıç ​​seti üretir.

Sık sorulan sorular

Kaç tane hareket jetonuna ihtiyacım var?

Düşündüğünüzden daha az. Üç veya dört süre ve iki veya üç gevşeme eğrisi veya yay çoğu ürünü kapsar.

Hareket belirteçleri yayları mı yoksa süreleri mi kullanmalı?

Her ikisi de çalışabilir. Yaylar, etkileşimli ve kesintiye uğrayan hareket için daha doğal bir his verir; solma ve CSS geçişleri için süreler daha basittir.

Hareket belirteçleri azaltılmış hareketi nasıl ele alır?

Kullanıcı azaltılmış hareketi açtığında geçerli olacak daha kısa veya yalnızca opaklık geçişleri gibi alternatif değerleri tanımlayın.

Figma hareket belirteçlerini saklayabilir mi?

Sayısal değerleri Figma değişkenlerinde saklayabilirsiniz ancak bunların prototip geçişlerine bağlanma şekli sınırlıdır. Çoğu ekip gerçeğin kaynağını bir simge dosyasında tutar.

İlgili rehberler ve örnekler

Başlangıç ​​hareket belirteçleri kümesi oluşturun

Süreleri, hareket hızını ve yayları seçin, önizleyin ve CSS ve JSON için belirteçleri dışa aktarın. Özgür.

Jeton oluşturucuyu açın
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →