106.9K+İndir
Kullanım kılavuzuna geç
SVG Animationsyazan supermemoryai

SVG Animations Skill'i.

Düzenlenebilir SVG yol, ikon ve illüstrasyon animasyonları oluşturun.

  • SVG
  • Vektör hareketi
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · svg-animationsSKILL.md
Görev Düzenlenebilir SVG yol, ikon ve illüstrasyon animasyonları oluşturun. Çıktılar Seçilen animasyon mekanizmasıyla düzenlenebilir SVG işaretlemesi. Başlamadan önce SVG’yi veya şekil brief’ini getirin; tetikleyiciyi, son durumu ve gömme hedefini belirtin. Satır içi işaretleme ve görsel olarak gömme; etkileşim, etiketleme ve azaltılmış hareket için ayrı kontroller gerektirir.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Düzenlenebilir SVG yol, ikon ve illüstrasyon animasyonları oluşturun

SVG çizimi, yol hareketi, şekil dönüşümü ve grup dönüşümlerini; gömme, son durum ve azaltılmış hareket kontrolleriyle keşfedin.

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

Çalışma Yaklaşımı

svg-animations, elle yazılan vektör hareketi için pratik bir referanstır. SVG koordinat sistemlerini, şekilleri, yolları, grupları, maskeleri ve filtreleri kapsar; bunları CSS veya SMIL animasyonuna bağlar. Tipik çıktılar çizilen çizgiler, yollarda ilerleyen nesneler, değişen ikonlar ve hareketli illüstrasyonlardır.

Kaynak doğruluğu etkileyen mekanikleri açıklar: çizilerek açılma yol uzunluğunu kullanır, morphing uyumlu komut yapıları gerektirir ve grup dönüşümleri genel hareketi yerel ayrıntılardan ayırabilir. Erişilebilir etiketler ve azaltılmış hareket davranışı da ister; bunlar gerçek gömme biçiminde ve animasyon modunda doğrulanmalıdır.

Beklenen Çıktılar

  • Seçilen animasyon mekanizmasıyla düzenlenebilir SVG işaretlemesi.
  • Vektör ikon, illüstrasyon, logo veya yükleme durumu animasyonu.
  • Hedef web bağlamı için gömme ve yedek davranış notları.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Koordinat sistemini kurun

    viewBox tanımlayıp çizimi temel şekillerden, yollardan ve gruplardan oluşturun. Yeniden kullanılabilir maskeleri, gradyanları ve filtreleri tanımlar bölümünde tutun.

  2. 02
    Animasyon mekanizmasını seçin

    Çizgi çizimi, yol izleme veya morphing için gereken öznitelikleri ve zamanlama modelini kullanın. Tahmin etmek yerine uzunlukları ölçüp yol komutlarını uyumlu hâle getirin.

  3. 03
    Gömme bağlamını kontrol edin

    Dönüşümleri, son durumları ve döngü birleşimlerini gerçek sayfada veya görsel olarak gömmede inceleyin. Seçilen mekanizmanın etiketlerini ve azaltılmış hareketini test edin.

02 Kullanım Alanları

Ne zaman kullanılır

SVG’yi veya şekil brief’ini getirin; tetikleyiciyi, son durumu ve gömme hedefini belirtin. Satır içi işaretleme ve görsel olarak gömme; etkileşim, etiketleme ve azaltılmış hareket için ayrı kontroller gerektirir.

İyi Bir Uyum

  • Vektör çizime küçük ölçekli hareket gerekiyorsaİşaretleme olarak düzenlenebilir kalması gereken ikonlar, yükleme grafikleri ve illüstrasyonlarda kullanın.
  • Yol efekti teknik rehberlik gerektiriyorsaReferans çizimi, hareketi ve uyumlu şekillerin enterpolasyonunu açıklar.

Kontrol Edilecek Sınırlar

  • Tarayıcı davranışı test edilmelidirKaynak genel uyumluluk ifadeleri içerir; tek tek CSS yol ve SMIL özellikleri hedef tarayıcılarda kontrol edilmelidir.
  • CSS kuralları her motoru kapsamazTek bir azaltılmış hareket CSS bloğu SMIL zaman çizelgesini durdurmayabilir. Gerçek animasyon mekanizmasına uygun bir yedek davranış gerekir.

Bu Girdileri Getirin

  • Vektör çizim veya şekil brief’iSVG ya da oluşturulacak yolların ve şekillerin açıklamasını sağlayın.
  • Hareket davranışıAçılma, döngü, morphing veya yol izleme eylemini ve tetikleyicisini belirtin.
  • Gömme hedefiSatır içi SVG’yi veya görsel gömmeyi, hedef tarayıcıları ve erişilebilirlik gereksinimlerini tanımlayın.

03 Önemli Kararlar

Önemli kararlar

  1. Geometri düzenlenebilir kalır

    İşlenmiş klibi değiştirmek yerine yollar ve gruplar doğrudan düzeltilebilir.

  2. Ölçülmüş çizim uzunlukları

    Gerçek yol uzunluğunu kullanmak eksik çizgiyi veya erken açılmayı önler.

  3. Ayrılmış dönüşümler

    Grup düzeyindeki hareket, amaçlanan orijini kaybetmeden yerel değişimlerle birlikte bulunabilir.

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

SVG ya da oluşturulacak yolların ve şekillerin açıklamasını sağlayın.

Üst Kaynak Dosyası
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/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
Ödeme sayfam için küçük bir başarı illüstrasyonu oluşturmak üzere svg-animations kullan. Dairesel konturu çiz, ardından onay işaretini göster ve bitmiş durumu koru. Çizimi SVG olarak düzenlenebilir tut; gerçek yol uzunluklarını ölç. Açıklayıcı title içeren satır içi gömme ve azaltılmış hareket için statik sürüm sağla. Her animasyon özelliğinin aynı davrandığını varsaymak yerine dönüşüm orijinlerini ve çizgilerin tamamlanmasını hedef tarayıcılarda test et. İnceleme için tekrar oynatma tetikleyicisi ekle; başarı göstergesini sonsuz, dikkat çeken döngüye dönüştürme.

Sonucu inceleyin

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

  • Yol uzunluklarını, morphing komut uyumluluğunu ve dönüşüm orijinlerini kontrol edin.
  • Son durumları ve döngü sınırlarını gerçek gösterim boyutunda inceleyin.
  • Erişilebilir etiketlemeyi ve seçilen mekanizmanın azaltılmış hareket yedeğini test edin.

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
supermemoryai
Depo
supermemoryai/skills
Skill Dosyası
SKILL.md
Lisans
Not confirmed
İncelenen Sürüm
2026-11-02 · 64e285d5a4a5

Okuma Notları

  1. Lisans kapsamıBilinmiyor; kamu malı değildir. Başka dosya adları veya dış koşullar bulunabilir; incelemenin eksiksizliği doğrulanmamıştır.
Editoryal Kaynak Özeti
Düzenlenebilir SVG yol, ikon ve illüstrasyon animasyonları oluşturun.

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

Bir çizgi kendini nasıl çizer?

Kaynak, ölçülen uzunluğa göre stroke-dashoffset değerini değiştirerek çizgiyi açar. Bu, yolun ne kadarının göründüğünü kontrol eder.

Her iki şekil birbirine dönüşebilir mi?

Doğrudan yol enterpolasyonu uyumlu komut yapıları gerektirir. Farklı komutları olan şekiller hazırlık veya başka morphing yaklaşımı gerektirir.

Tek bir azaltılmış hareket CSS kuralı yeterli mi?

Animasyon mekanizmasına bağlıdır. CSS animasyonu, JavaScript ve SMIL farklı işlem gerektirebilir; bu yüzden gömülü sonuç çalıştırılarak test edilmelidir.

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/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md