UI animasyonu
- Oyun Geliştirme kursu
- İleri seviye
- Ders 65/71
- 4 dk
UI öğelerini yumuşak geçişlerle canlandırmayı öğrenirsin.
UI Animasyonu ve Tweening
Kullanıcı arayüzü pencerelerinin veya butonlarının ekranda aniden belirmesi donuk bir his yaratır. Tweening veya Coroutine yapılarıyla arayüz elemanlarına ölçekleme ve yaylanma efektleri eklenir.
// Butona basildiginda hafifce buyuyup yerine oturma efekti
transform.localScale = Vector3.one * 1.2f;Butonlara tıklandığında hafifçe büyüyüp küçülmesi (Punch/Scale) kullanıcının tıklama hissini doğrudan pekiştirir.
CanvasGroup ile Yumuşak Kararma (Fade)
Bir menü açılırken tüm paneli yumuşakça soldurarak ekrana getirmek için CanvasGroup bileşeni kullanılır. alpha değeri 0.0'dan 1.0'a pürüzsüzce yükseltilir.
public CanvasGroup canvasGroup;
IEnumerator FadeIn(float speed) {
while (canvasGroup.alpha < 1f) {
canvasGroup.alpha += Time.deltaTime * speed;
yield return null;
}
}Bu geçiş menü açılışlarını ani ve sert bir kesinti olmaktan çıkarıp zarif bir sahneye dönüştürür.
Uygulama UI alpha geçiş testi
Bir Start metodu tanımla. İçinde float alphaDegeri = 1.0f; tanımla ve konsola "UI opakligi: " + alphaDegeri yazdır.
Başlangıç kodu
using UnityEngine;
public class UiPolishTester : MonoBehaviour
{
// Start icinde alphaDegeri tanimla ve yazdir
}Örnek çözüm
using UnityEngine;
public class UiPolishTester : MonoBehaviour
{
void Start()
{
float alphaDegeri = 1.0f;
Debug.Log("UI opakligi: " + alphaDegeri);
}
}Beklenen çıktı
UI opakligi: 1
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kullanıcı arayüzünde (UI) bir butona tıklandığında anlık olarak hafifçe büyüyüp eski boyutuna dönmesi efektine ne ad verilir?
- NavMesh Bake işlemi
- JSON serileştirme döngüsü
- Vertex shader dönüşümü
- Punch / Scale animasyonu Doğru cevap
Açıklama: Punch / Scale efekti, arayüz butonlarına tıklandığında anlık büyüme ve yaylanma kazandırarak geri bildirimi güçlendirir.
2 CanvasGroup görünürlüğü
canvasGroup.____ = 1f;canvasGroup.alpha = 1f;Açıklama: CanvasGroup bileşeninin saydamlık ve görünürlük derecesini belirlemek için 'alpha' özelliği kullanılır.
3 Arayüz geçiş kavramları
| Kavram | Anlamı |
|---|---|
CanvasGroup |
UI şeffaflık ve etkileşim yöneticisi |
alpha |
0 ile 1 arası UI görünürlük derecesi |
Tween |
İki değer arasında yumuşak geçiş |
Fade In |
Saydamlıktan tam görünürlüğe geçiş |