106.9K+İndir
Kullanım kılavuzuna geç
UI Animationyazan mblode

UI Animation Skill'i.

Amaçlı arayüz hareketi oluşturun, hatalarını giderin ve ölçün.

  • UI hareketi
  • Azaltılmış hareket
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · ui-animationSKILL.md
Görev Amaçlı arayüz hareketi oluşturun, hatalarını giderin ve ölçün. Çıktılar Hedefli arayüz hareketi uygulaması veya incelemesi. Başlamadan önce Bileşen kodunu veya net referans kaydını, eylem sıklığını ve hedef cihazları sağlayın. Görevin hareket incelemesi mi, uygulama değişikliği mi yoksa ölçülmüş yeniden yapım mı olduğunu belirleyin.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Amaçlı arayüz hareketi oluşturun, hatalarını giderin ve ölçün

UI geçişlerini, yayları ve jestleri inceleyin veya kayıtlardaki hareketi ölçerek eşleştirin; kesinti, kare hızı ve azaltılmış hareketi açıkça kontrol edin.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

ui-animation arayüz hareketini oluşturmayı, incelemeyi ve ölçmeyi kapsar. Etkileşimin amacı ve sıklığıyla başlar, sonra zamanlama ve uygulamayı seçer. Geri bildirim, yön bulma ve süreklilik kararı yönlendirir; sık tekrarlanan eylemler anında kalmalıdır.

İkinci iş akışı kayıttaki hareketi ölçer. Kareleri çıkarır, öğeyi izler ve uygulama parametrelerini üretmeden önce yay veya easing eğrilerini uydurur. Açılış ve kapanış ayrı ele alınır; yeniden kurulan evrelerin korunduğunu kontrol etmek için yeni kayıt referansla karşılaştırılır.

Beklenen Çıktılar

  • Hedefli arayüz hareketi uygulaması veya incelemesi.
  • Kayıttan ölçülmüş easing veya yay tanımı.
  • Zamanlama, özellik evreleri ve doğrulama gözlemleriyle devir.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Durumun neden hareket edeceğine karar verin

    Geri bildirim, süreklilik veya yön bulma ihtiyacını ve eylem sıklığını belirleyin. Görevin anında tamamlanmasını ve klavye odağını koruyun.

  2. 02
    Hareketi seçin veya ölçün

    Bileşen tarifini seçin ya da kaydı gerçek kare hızında çıkarıp ilgili harekete uygun bir eğri belirleyin. Açılış ve kapanış evrelerini ayrı tutun.

  3. 03
    Gerçek etkileşimi test edin

    Hızla yeniden açıp kapatın, yavaş oynatmayı inceleyin; dokunmayı ve azaltılmış hareketi test edin. Yeniden yapımda uygulama kaydını orijinalle karşılaştırın.

02 Kullanım Alanları

Ne zaman kullanılır

Bileşen kodunu veya net referans kaydını, eylem sıklığını ve hedef cihazları sağlayın. Görevin hareket incelemesi mi, uygulama değişikliği mi yoksa ölçülmüş yeniden yapım mı olduğunu belirleyin.

İyi Bir Uyum

  • Etkileşim yanlış hissettiriyorsaKaynak yavaşlığı, sıçramaları ve yanlış tetiklenmeyi belirli zamanlama veya uygulama kontrollerine yönlendirir.
  • Kayıtlı efekti eşleştirmek gerekiyorsaÖlçüm betikleri yayı göz kararı tahmin etmenin ötesinde yol sunar.

Kontrol Edilecek Sınırlar

  • Tüm görsel yönü belirlemezPalet, tipografi ve daha geniş ürün tasarımı ana kapsamın dışındadır.
  • Ölçüm bağımlılıklar gerektirirBetikli kayıt yolu, izleme ve eğri uydurma için FFmpeg ve Python paketleri kullanır.
  • Eğri uydurma eşdeğerliğin kanıtı değildirDüşen kareler, değişken kare hızı ve çok evreli hareket tek bir uydurulmuş eğriyi yanıltıcı kılabilir.

Bu Girdileri Getirin

  • Bileşen veya kayıtİyileştirilecek kodu veya referans etkileşimin net klibini sağlayın.
  • Davranış ve sıklıkKullanıcının eylemini, sonuç durumunu ve tekrar sıklığını açıklayın.
  • Hedef platformUygulama teknolojilerini, cihazları ve erişilebilirlik gereksinimlerini belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Süslemeden önce amaç

    Karar çerçevesi animasyonu önermenin yanı sıra gereksiz animasyonu reddedebilir.

  2. Kesinti yönetimi

    Hızlı açıp kapatma, normal oynatmanın kaçırdığı yeniden başlatma ve hedef değiştirme sorunlarını gösterir.

  3. Ölçülmüş devir

    Özelliklere ayrı zamanlama ve uydurulmuş parametreler yeniden yapımı hassaslaştırır.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

İyileştirilecek kodu veya referans etkileşimin net klibini sağlayın.

Üst Kaynak Dosyası
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Sağladığım kayıt ve React bileşenindeki çekmece etkileşimini ui-animation ile teşhis et. Açılış ve kapanışı kaydın gerçek kare hızında ayrı ölç. Algılanan gecikmenin easing’den, erken duraklamadan veya ana iş parçacığını engelleyen işten kaynaklanıp kaynaklanmadığını belirle. Klavye odağını anında, mevcut çekmece davranışını korunmuş tut. En küçük uygulama değişikliğini öner; sonra hızlı açıp kapatmayı ve azaltılmış hareketi test et. Yay veya eğri uydurursan sınırlarını bildir; yalnızca parametrelerden görsel eşleşme iddia etmek yerine düzeltilmiş etkileşimin kaydını referansla karşılaştır.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Hızlı hedef değiştirmeyi ve iki yönde yavaş oynatmayı test edin.
  • Kare çıkarma ve eğri uydurma kare hızlarını eşleştirin.
  • Aynı görevi azaltılmış hareket ve dokunmatik girişle deneyin.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
mblode
Depo
mblode/agent-skills
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 391508702523
Editoryal Kaynak Özeti
Amaçlı arayüz hareketi oluşturun, hatalarını giderin ve ölçün.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Animasyon eklenecek yerleri bulabilir mi?

Evet. Keşif yolu amaç ve sıklığa dayalı fırsatları, reddettiği önerilerle birlikte raporlar. Keşif tek başına uygulama izni değildir.

Açılış ve kapanış neden ayrı ölçülür?

Çoğunlukla zamanlamaları ve karakterleri farklıdır. Kaynak, tek yönü uydurup yalnızca tersine çevirmeye karşı uyarır.

CSS azaltılmış hareket kuralı her şeyi kapsar mı?

Her zaman değil. Kaynak, JavaScript tabanlı hareketin kendi azaltılmış hareket işlemesini gerektirdiğini ve gerçek etkileşimle test edilmesi gerektiğini belirtir.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md