UI animasyonu

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.

Örnek çözümü göster

using UnityEngine;

public class UiPolishTester : MonoBehaviour
{
    void Start()
    {
        float alphaDegeri = 1.0f;
        Debug.Log("UI opakligi: " + alphaDegeri);
    }
}

Kendini test et

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
Cevabı göster

Punch / Scale animasyonu — Punch / Scale efekti, arayüz butonlarına tıklandığında anlık büyüme ve yaylanma kazandırarak geri bildirimi güçlendirir.

CanvasGroup görünürlüğü

canvasGroup.____ = 1f;

Cevabı göster

canvasGroup.alpha = 1f;

Arayüz geçiş kavramları

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ş

Sıradaki ders: Özet - Cila projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler