UI Morph Animasyon Tasarımı

Tek Şekil Tüm Filmi Nasıl Taşır

Film 120 BPM'de 14 saniye sürer; kaynak notlar bunu 7 ölçüye böler. Tek bir şekil Generate düğmesi olarak başlar, ardından yükleyiciye, onay işaretine, dinamik adaya, müzik oynatıcıya, ses kaydırıcısına, anahtara, sekme göstergesine, grafiğe, komut paletine ve toast bildirimine dönüşür, sonra düğmeye geri döner.

Bunun bedeli, her durumun bir öncekinden aynı gövdenin yeniden boyutlandırılması ve köşelerinin yeniden yuvarlanmasıyla ulaşılabilir olması gerektiğidir. Bu şekil değişikliğine uymayan içerik atılmalı ya da yeniden tasarlanmalıdır.

Oynatıcı, Sekme ve Palet Karelerini Okumak

Yakalanan üç kare, aynı şeklin ne kadar farklı görünebildiğini gösterir. Oynatıcıda siyah yuvarlatılmış bir kart; gradyan bir karo, “motion study 02”, 0:49 konumunda ve −2:09 kalan süreli bir kaydırma çubuğu, ayrıca önceki, oynat ve sonraki simgelerini taşır. Sekme karesinde beyaz bir hap Day, Week ve Month'u barındırır; Day'in arkasında siyah bir gösterge vardır.

Paletteyse yazılan “frame” kelimesi iki sonuca götürür: “Frame rate · 60fps” ve “Every frame is code”; ilki vurgulanmıştır.

01

Okunaklı Oynatma Durumları

Geçen ve kalan süre etiketleri ilerleme çubuğunun altında durur. Bunlar 14 saniyelik filmin içindeki örnek arayüz içeriğidir, showcase videosunun çalışma süresi değildir. Oynatıcıyı daha küçük bir tuvale uyarlarken iki etiketi de net tutun.

02

Sekme Göstergesi Hareketli Bir Nesnedir

Siyah Day hapı, imleç Month üzerinde gezinirken beyaz bir rayın içinde durur. Gösterge ayrı bir şekil olduğundan, vurguyu değiştirmek yerine etiketler arasında kayabilir ve esneyebilir.

03

Palet Metni Filmle Uyumludur

“Frame rate · 60fps” ve “Every frame is code” sonuçları işin kendisinden söz eder. Bu fikri yeniden kullanın, ancak metinleri kendi ürün sözcük dağarcığınızla değiştirin.

Zamanla Yönlendirilen Yapı ve Ödünleşimleri

Kaynak notlar, tüm kareyi ana zaman çizelgesinin süresinden çizen tek bir render(t) fonksiyonunu anlatır. Görünen her değer, ease, yay veya anahtar kare kullanan saf bir t fonksiyonudur ve kareler arasında durum taşınmaz. Bu nedenle geriye doğru gezinmek aynı kareleri yeniden üretir.

Bu, dışa aktarmayı öngörülebilir kılar ancak yazardan daha fazlasını ister. Olay yöneticileriyle önemsiz olacak etkileşimler, örneğin üzerine gelme veya yazma, zamanlanmış anahtar kareler olarak yazılmalıdır.

1. Tek Bir Saat Tutun

   GSAP ana zaman çizelgesi tek saattir. Katmanlar kendi zamanlayıcılarını çalıştırmak yerine onun geçerli süresini okur.

2. Her Değişiklik İçin Yayları Toplayın

   Uyarlama notları, değişiklik başına toplanan yaylar ister; böylece çakışan hareketler yeniden başlamak yerine birbirine karışır.

3. Her Şeye İmleç Neden Olsun

   Her durum değişikliğinden önce bir işaretçi hareketi gerekir. Bu kural olmadan morph'lar etkileşim yerine süs gibi okunur.

Kaynak ve Kapsam

Bu, @twoclipping tarafından X'te paylaşılan bir hareket işinin resmî OpenDesign kod yeniden yapımı ve uyarlamasıdır. Yayımlanan işten yola çıkılarak kodla yeniden kurulmuştur ve 14 saniyelik ses, kaynaktan alınmış bir ses değil özgün bir bestedir. Atıf olgusal bir referanstır ve özgün yazarın onayı anlamına gelmez.

Bu, kullanılabilir bir arayüz ürünü değil, render edilmiş bir hareket çalışmasıdır. Filmdeki oynatıcı, grafik ve palet girdilere yanıt vermez. Şablon, önerilen bir OpenDesign video iş akışından gelir; kullanılabilirlik kurulu sürüme bağlıdır.

Morph'u Kendi Ürününüze Uyarlamak

Notlar, SHAPE tanımındaki durumları ve içeriklerini değiştirirken üç kuralı korumayı önerir: hiç kesilmeyen tek şekil, değişiklik başına toplanan yaylar ve her değişikliğin arkasında bir imleç. En çok göstermeniz gereken beş ürün durumunu listeleyerek başlayın, sonra bunları en küçük kapsayıcıdan en büyüğe doğru sıralayın.

Döngü istiyorsanız ilk ve son durumları aynı tutun. Durumlarınızın boyutları çok farklıysa ara karelerin gerilmiş görüneceğini unutmayın ve tempoyu buna göre yavaşlatın.