Kuika'nın Effects özellikleri, web projelerinizdeki elementlere görsel efektler, dönüşümler ve animasyonlar eklemenizi sağlar. Styling paneli aracılığıyla opacity, outline, transform, filter, transition ve animasyon gibi ayarları kolayca yapılandırarak, projenize hareket ve derinlik kazandıran arayüzler oluşturabilirsiniz. Ayrıca, hazır efekt şablonlarını (Presets) kullanarak sıfırdan efekt tasarlamadan hızlıca sonuç alabilirsiniz.
Effects Özellikleri
1. Presets (Hazır Şablonlar):
Fade In, Fade Out, Disabled Look, Clickable gibi hazır efekt şablonlarını arayarak veya kategoriye göre (Basic, Hover, Reveal, Cards, Image, Text, 3D, Focus, Utility, Motion, Glow, Status) filtreleyerek tek tıkla uygulayabilirsiniz.
2. Blending (Karışım Modu):
Elementin altındaki katmanla nasıl karışacağını belirler (Normal, Multiply, Screen, Difference vb.).
3. Opacity (Saydamlık):
Elementin saydamlık değerini kaydırıcı (slider) veya sayısal olarak (0–1 arası) ayarlayabilirsiniz.
4. Outline (Dış Çizgi):
Rengi, kalınlığı ve stili (solid, dashed, dotted) belirlenebilir.
5. Cursor (İmleç):
Element üzerine gelindiğinde görünecek imleç tipini (pointer, grab, not-allowed vb.) seçebilirsiniz.
6. Pointer (Tıklama Davranışı):
Auto: Element tıklama ve hover etkileşimlerine açıktır.
None: Element tıklama ve Hover'ı algılamaz, alttaki katmana geçirir.
7. 2D & 3D Transforms (Dönüşümler):
Rotate, scale, translate, skew gibi 2D ve 3D dönüşümler uygulayabilirsiniz.
Dişli (⚙) ikonuna tıklayarak açılan Transform Settings penceresinden şu detaylı ayarları yapabilirsiniz:
Origin: Dönüşümün başlangıç noktasını 3x3 grid üzerinden veya Left/Top yüzde değerleriyle belirler.
Backface: 3D döndürmelerde elementin arka yüzünün görünür (Visible) mü, gizli (Hidden) mi olacağını ayarlar.
Style: 3D dönüşüm stilini Flat veya Preserve-3D olarak belirler.
Self Perspective: Elementin kendi perspektif derinliğini (px) ayarlar.
Children Perspective: Alt elementlerin perspektif derinliğini ve merkez noktasını (Left/Top) ayarlar.
8. Transitions (Geçişler):
State değişimlerinde (hover, pressed, focus vb.) Property'lerin yumuşak geçiş yapmasını sağlar; süre (duration), gecikme (delay) ve geçiş eğrisi (ease, cubic-bezier) tanımlanabilir.
9. Entry Animation (Giriş Animasyonu):
Element ekrana yüklendiğinde (mount) bir kez oynayacak giriş animasyonunu (Fade In, Slide Up, Reveal vb.) belirleyebilirsiniz.
10. Looping Animations (Döngüsel Animasyonlar):
Sürekli tekrar eden veya belirli sayıda tekrarlanıp duran animasyonlar (Pulse, Float, Shake vb.) ekleyebilir, birden fazlasını aynı anda uygulayabilirsiniz.
11. Filters (Filtreler):
Blur, brightness, contrast, saturate, grayscale, invert, sepia, hue-rotate gibi görsel filtreleri uygulayabilir, birden fazla filtreyi bir arada kullanabilirsiniz.
12. Backdrop Filters (Arka Plan Filtreleri):
Elementin arkasındaki alana blur ve saturate gibi efektler uygulayarak buzlu cam (glassmorphism) görünümü elde edebilirsiniz.
Elementlerde Effects Ayarları Yapma
Kuika platformuna giriş yapın ve Apps ekranından projenizi açın.
UI Design modülünde, sol kenardaki Elements panelinden bir element seçip ekleyin.
Ayar yapmak istediğiniz elementi seçin.
Sağ kenardaki Styling panelini açın.
Effects bölümüne tıklayın.
İstediğiniz efekti doğrudan ayarlayabilir veya Presets alanından hazır bir şablon seçip uygulayabilirsiniz.
Efektleri belirli bir State'e (Hover, Pressed, Focused, Disabled) özel tanımlamak için, State seçiciden ilgili state'i seçip ayarları o state için yapılandırabilirsiniz.
Entry ve Looping animasyonlar Designer ekranında oynamaz; önizleme yalnızca yayınlanan (generated) web uygulamasında görülebilir. Efektler şu an için web hedeflidir; mobil çıktıda çoğu efekt uygulanmaz.
