106.9K+İndir
Kullanım kılavuzuna geç
Isometric Animationyazan iart-ai

Isometric Animation Skill'i.

İzometrik yığınlar, patlatılmış diyagramlar ve katmanlı web animasyonları oluşturun.

  • İzometrik
  • Açıklayıcı animasyon
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · isometric-animationSKILL.md
Görev İzometrik yığınlar, patlatılmış diyagramlar ve katmanlı web animasyonları oluşturun. Çıktılar Seçilen render yaklaşımıyla bağımsız HTML izometrik sahne. Başlamadan önce Katmanları ve fiziksel sıralarını listeleyin; kurulum veya patlatma ve birleştirme sekansı seçin. Uygulamayı seçmeden önce tarayıcı etkileşimi mi render edilmiş film mi gerektiğini belirtin.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

İzometrik yığınlar, patlatılmış diyagramlar ve katmanlı web animasyonları oluşturun

Tutarlı derinlik, yüzey gölgelendirmesi, sıralı montaj ve sabit zamanlı görsel kontrollerle paralel izdüşüm sahneleri oluşturun.

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

Çalışma Yaklaşımı

isometric-animation, paralel izdüşüm görünümünde katmanlı diyagramlar, yığınlar ve patlatılmış görünümler oluşturur. Küçük DOM sahnelerini CSS dönüşümlerine, geometrik infografikleri SVG’ye, gerçek örtüşme veya gölge gerektiren sahneleri ortografik Three.js kameraya yönlendirir.

İş akışı geometri ve derinliği inceleme hedefi olarak ele alır. Yığın fiziksel sırayla kurulmalı, yüzeyler tek aydınlatma yönünü paylaşmalı ve ayrılmış katmanlar oturdukları konumlara dönmelidir. Sabit zamanlı önizleme yanlış örtüşmeleri, titreyen yüzeyleri ve eksik montajı görünür kılar.

Beklenen Çıktılar

  • Seçilen render yaklaşımıyla bağımsız HTML izometrik sahne.
  • Zamanda gezinilebilen kurulum veya patlatma ve birleştirme sekansı.
  • İzdüşümü, derinlik sırasını ve son hizalamayı gösteren temsilî sabit kareler.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    İzdüşümü ve ortamı seçin

    Gerçek izometriyi piksel sanatının dimetrik kurallarından ayırın. Sahnenin derinlik ve örtüşme ihtiyaçlarına göre CSS, SVG veya ortografik 3D seçin.

  2. 02
    Tutarlı geometri oluşturun

    Uyumlu eksenler ve yüzey gölgelendirmesi kullanın. Katmanları derinlik yönünde ayırın ve görünme sıralarını fiziksel konumlarına göre düzenleyin.

  3. 03
    Montajı sabit zamanlarda inceleyin

    Başlangıcı, kısmi kurulumu ve son durumu dondurun. Tam hareketi incelemeden önce örtüşmeyi, kırpılmayı ve katmanların yerine oturmasını kontrol edin.

02 Kullanım Alanları

Ne zaman kullanılır

Katmanları ve fiziksel sıralarını listeleyin; kurulum veya patlatma ve birleştirme sekansı seçin. Uygulamayı seçmeden önce tarayıcı etkileşimi mi render edilmiş film mi gerektiğini belirtin.

İyi Bir Uyum

  • Sistemin katmanlı açıklamaya ihtiyacı varsaMimari yığınlar, bileşen katmanları veya patlatılmış ürün diyagramı için kullanın.
  • İnfografik boyutsal yapı gerektiriyorsaParalel izdüşüm, derinliği gösterirken tekrarlanan blokları boyut bakımından karşılaştırılabilir tutabilir.

Kontrol Edilecek Sınırlar

  • Perspektif kamera görünümü değiştirirKaynağın izometrik yolu, uzaktaki nesnelerin küçülmesi yerine paralel izdüşüme dayanır.
  • Karmaşık derinlik gerçek geometri gerektirirNesnelerin dönmesi, gölge oluşturması veya birbirini doğru örtmesi gerektiğinde CSS ya da düz SVG yetersiz kalabilir.

Bu Girdileri Getirin

  • Katman envanteriHer bileşeni, sırasını ve sahnenin açıklaması gereken ilişkileri tanımlayın.
  • Görsel yaklaşımGeometrik izometri veya piksel/karo stilini, renkleri ve etiketleri belirtin.
  • Etkileşim ve çıktıKurulum, patlatma, hover veya kamera kayması seçin; web ya da video teslimini belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Mantıklı görünme sırası

    Aşağıdan yukarı veya fiziksel sıralı kurulum, izleyicinin yapıyı takip etmesini sağlar.

  2. Tutarlı derinlik ipuçları

    Ortak ışık ve izdüşüm, blokların ilgisiz diyagramlardan birleştirilmiş görünmesini önler.

  3. Geri döndürülebilir montaj

    Ortak boşluk parametresi, ayrılma ve geri dönüş konumlarını uyumlu tutabilir.

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

Her bileşeni, sırasını ve sahnenin açıklaması gereken ilişkileri tanımlayın.

Üst Kaynak Dosyası
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/isometric-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
Arayüz, servis katmanı ve veritabanından oluşan üç katmanlı uygulama yığını için isometric-animation ile web açıklaması oluştur. Tutarlı ışık ve okunabilir etiketlerle ortografik görünüm kullan. Katmanlar birleşik başlasın, ilişkileri göstermek için ayrılsın ve her katman ilk konumuna dönsün. Gerçek örtüşme gereksinimlerine göre CSS, SVG veya Three.js seçip gerekçelendir. Tam zamana atlama ve statik azaltılmış hareket durumu olan tek HTML önizlemesi teslim et. Orta ve son kareleri yanlış derinlik sırası, etiket kırpılması ve yerine oturmayan katmanlar açısından incele.

Sonucu inceleyin

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

  • İzdüşüm tutarlılığını ve tekrarlanan öğelerin eşit boyutlarını kontrol edin.
  • Örtüşmeyi, yüzey gölgelendirmesini ve çakışan yüzeylerdeki titremeyi inceleyin.
  • Son birleşik durumu ve statik azaltılmış hareket alternatifini doğrulayın.

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
iart-ai
Depo
iart-ai/explainer-video-skills
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 3e2d411b725d
Editoryal Kaynak Özeti
İzometrik yığınlar, patlatılmış diyagramlar ve katmanlı web 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

Hangi uygulamayı seçmeliyim?

Kaynak birkaç DOM katmanı için CSS, çok sayıda düz geometrik blok için SVG, gerçek örtüşme, gölge veya dönüş için ortografik Three.js önerir.

Perspektif kamera kullanabilir miyim?

Bu perspektif kaynaklı boyut değişimleri oluşturur. Belgelenen izometrik yol, mesafenin eşit nesneleri küçültmemesi için paralel izdüşüm kullanır.

Çıktı her zaman video mu?

Hayır. Birincil bağımsız yol HTML’dir. Render edilmiş video, kaynağın açıkladığı ayrı kompozisyon ve dışa aktarma yolunu gerektirir.

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/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/isometric-animation/SKILL.md