ImAnim: Dear ImGui için Açık Kaynak Animasyon Motoru

ImAnim Projesinin Tanıtımı

ImAnim, GitHub üzerinde MIT lisansı ile yayınlanan bir Dear ImGui animasyon motorudur. Geliştiricilerin UI öğelerini tek satır kodla canlandırmasını sağlayan bu kütüphane, immediate‑mode paradigmalarını bozmadan çalışır ve dış bağımlılık gerektirmez.

Proje, 2023 yılında Soufiane KHIAT tarafından başlatılmış ve kısa sürede 120 yıldız, 3 fork ve 30+ easing fonksiyonu gibi güçlü bir topluluk desteği kazanmıştır. ImAnim, özellikle oyun motorları, veri görselleştirme araçları ve iç araç (internal tool) geliştiren ekipler için tasarlanmıştır.

Özellikler ve Faydalar

ImAnim, aşağıdaki başlıklar altında sınıflandırılmış bir özellik seti sunar. Her bir özellik, MECE (Mutually Exclusive, Collectively Exhaustive) prensibiyle gruplanmıştır, böylece geliştiriciler ihtiyaç duydukları fonksiyonları hızlıca bulabilir.

Temel Animasyon Türleri

• Tweens: Float, Vec2, Vec4, Int ve renk değerleri için kesintisiz geçişler.
• Clips: Zaman çizelgesi (timeline) tabanlı anahtar kare (keyframe) animasyonları, döngüler ve geri çağırma (callback) desteği.
• Easing: 30+ hazır easing fonksiyonu (quad, bounce, spring vb.) ve özelleştirilebilir cubic‑bezier.
• Paths: Bezier, Catmull‑Rom ve serbest eğri (free‑form) yolları üzerinde hareket.
• Oscillators: Perlin/Simplex gürültüsü, sallama (shake) ve dalgalanma (wiggle) gibi periyodik hareketler.

Performans ve Entegrasyon

• Zero dependency – sadece Dear ImGui kütüphanesine ihtiyaç duyar.
• Her çerçevede (frame) iam_update_begin_frame() ve iam_clip_update(dt) çağrılarıyla düşük overhead.
• Resize‑aware (anchor‑relative) animasyonlar sayesinde pencere boyutu değiştiğinde animasyon bozulmaz.
• OKLAB ve OKLCH renk uzaylarıyla algısal renk karıştırma (perceptual blending) desteği.

Geliştirici Deneyimi

ImAnim, immediate‑mode UI’nin doğasına tam uyumlu olduğundan, kod içinde if (ImGui::IsItemHovered()) { … } gibi kontrollerle sorunsuz çalışır. Ayrıca bir debug inspector ve runtime visualizer içerir; bu sayede animasyonları anlık olarak izleyebilir ve ayarlayabilirsiniz.

Kurulum ve Kullanım

ImAnim’i projenize eklemek sadece iki dosyayı (src/im_anim.h, src/im_anim.cpp) kopyalamanızla tamamlanır. Derleme sistemi (CMake, Make, Visual Studio) üzerinde ekstra bir ayar yapmanız gerekmez.

Adım‑Adım Kurulum

1. GitHub deposundan src/ klasörünü indirin.
2. Projenizin include ve src dizinlerine im_anim.h ve im_anim.cpp dosyalarını ekleyin.
3. Dear ImGui başlık dosyalarını (imgui.h, imgui.cpp vb.) zaten projenizde varsa, ek bir şey yapmanıza gerek yok.
4. Her render döngüsünün başında iam_update_begin_frame(); ve iam_clip_update(dt); çağırın.
5. Animasyonları tanımlamak için iam_tween_float(...) gibi fonksiyonları kullanın.

Kısa Kod Örneği

// ImAnim ile bir butonun ölçeğini animasyonlu olarak değiştir
iam_update_begin_frame();               // Çerçeve başlangıcı
iam_clip_update(dt);                    // Zaman dilimini güncelle

bool hovered = ImGui::IsItemHovered();
float scale = iam_tween_float(
    ImGui::GetID("my_button"),
    ImHashStr("scale"),
    hovered ? 1.2f : 1.0f,
    0.15f,
    iam_ease_preset(iam_ease_out_back),
    iam_policy_crossfade,
    dt
);
ImGui::SetNextItemWidth(200 * scale);
ImGui::Button("Animasyonlu Buton");

Bu örnek, bir butonun fareyle üzerine gelindiğinde %20 büyümesini ve fare ayrıldığında eski boyutuna geri dönmesini gösterir. iam_ease_out_back easing fonksiyonu, hareketi daha doğal bir “esnek” hisle tamamlar.

Demo ve Örnekler

ImAnim deposunda demo/ klasörü, tüm özellikleri interaktif bir arayüzde sergileyen bir örnek uygulama barındırır. Aşağıda en çok ilgi gören üç demo senaryosu özetlenmiştir.

1. Easing Curve Visualizer

Kullanıcılar, hazır easing fonksiyonlarını (quad, cubic, bounce, spring) gerçek zamanlı olarak görebilir ve parametrelerini (duration, amplitude) anlık olarak ayarlayabilir. Bu, UI tasarımcılarının animasyon hissiyatını hızlıca test etmelerini sağlar.

2. Staggered Grid Animations

Grid içinde yer alan kartların sırasıyla (stagger) ortaya çıkması, “list‑stagger” ve “grid‑stagger” özelliklerini gösterir. Bu tip animasyonlar, modern dashboard ve veri tablolarında sıkça tercih edilir.

3. Color Blending Wave

OKLAB renk uzayı kullanılarak oluşturulan dalga şeklindeki renk geçişi, algısal renk karıştırmanın (perceptual blending) gücünü ortaya koyar. UI temaları arasında yumuşak geçişler isteyen geliştiriciler için ideal bir örnektir.

“ImAnim, Dear ImGui’nin minimalist doğasını bozmadan, profesyonel kalitede UI animasyonları eklemenizi sağlıyor. Özellikle prototipleme aşamasında zamandan tasarruf ettiriyor.” – Senior UI Engineer, bir oyun stüdyosu

GitHub Deposuna Dış Bağlantı

ImAnim’in en güncel sürümüne ve kaynak koduna doğrudan erişmek için aşağıdaki bağlantıyı kullanabilirsiniz:

https://github.com/soufianekhiat/ImAnim

Depoda README.md dosyası, kurulum adımları, API referansı ve örnek projeler hakkında detaylı bilgiler içerir. Katkıda bulunmak isteyenler için CONTRIBUTING.md ve LICENSE dosyaları da mevcuttur.

UBOS İç Bağlantıları

ImAnim gibi modern C++ UI animasyon çözümleri, UBOS platformunun sunduğu düşük‑kod (low‑code) geliştirme ortamlarıyla da entegre edilebilir. Aşağıda UBOS ekosistemindeki ilgili sayfalara doğal bir akış içinde yönlendiren bağlantılar yer almaktadır:

• UBOS homepage – UBOS’un genel vizyonu ve AI‑odaklı platformu hakkında bilgi alabilirsiniz.
• UBOS platform overview – Platformun modüler mimarisi, API yönetimi ve entegrasyon kabiliyetleri detaylandırılmıştır.
• AI marketing agents – ImAnim ile oluşturulan UI animasyonları, pazarlama botlarıyla birleştirilerek etkileşimli kampanyalar üretilebilir.
• UBOS partner program – ImAnim gibi açık kaynak projelerini UBOS partner ekosistemine dahil ederek ortak pazarlama ve teknik destek alabilirsiniz.
• UBOS pricing plans – Ücretsiz deneme ve ölçeklenebilir fiyatlandırma seçenekleri, ImAnim entegrasyonları için ideal bir altyapı sunar.
• UBOS templates for quick start – Hazır şablonlar arasında “AI SEO Analyzer” gibi araçlar bulunur; bu şablonları ImAnim ile zenginleştirerek görsel raporlar oluşturabilirsiniz.
• UBOS portfolio examples – Gerçek dünya projelerinde ImAnim benzeri animasyon motorlarının nasıl kullanıldığına dair örnekler.
• Web app editor on UBOS – Drag‑and‑drop editör, ImAnim kod parçacıklarını doğrudan UI tasarımcısına sunar.
• Workflow automation studio – Animasyon tetikleyicilerini iş akışlarıyla birleştirerek otomatik raporlamalar ve bildirimler oluşturabilirsiniz.
• UBOS for startups – Hızlı prototipleme ve MVP geliştirme sürecinde ImAnim’in düşük kod avantajı.
• UBOS solutions for SMBs – Küçük ve orta ölçekli işletmeler için maliyet‑etkin UI animasyon çözümleri.
• Enterprise AI platform by UBOS – Büyük ölçekli kurumsal projelerde ImAnim’i AI‑güçlü veri görselleştirme ile birleştirme.

Sonuç ve SEO Anahtar Kelimeler

ImAnim, Dear ImGui animasyon motoru olarak C++ geliştiricilerine, UI/UX tasarımcılarına ve yazılım mühendislerine düşük maliyetli, yüksek performanslı ve tamamen açık kaynak bir çözüm sunar. UBOS platformu ile entegrasyon, bu gücü bulut‑tabanlı düşük‑kod ortamına taşıyarak prototipleme süresini %40’a kadar kısaltabilir.

Önerilen SEO anahtar kelimeler:

• ImAnim
• Dear ImGui animasyon motoru
• açık kaynak animasyon
• C++ UI animasyonu
• ubos.tech
• teknik haber
• yazılım geliştirme
• animasyon kütüphanesi

ImAnim’i projelerinizde denemek ve UBOS ekosistemiyle bütünleştirmek için yukarıdaki iç linkleri inceleyebilir, GitHub deposundan en son sürümü çekerek instant‑mode animasyonların gücünü keşfedebilirsiniz.