SwiftUI'da SF Symbols Animasyonu: 12 Efekt ve 5 Renk Modu

SwiftUI'da SF Symbols animasyonu her sürümde biraz daha büyüdü. iOS 17 ilk efekt setini ekledi, iOS 18 daha fazlasını getirdi, iOS 26 ise Draw'ı ekledi. Bu da hangi efektin hangi iOS sürümünü gerektirdiğini ve onu hangi modifier'ın oynattığını hatırlamayı zorlaştırıyor. iOS geliştiricisi @sarunw, bir sembolü canlandırmanın 12, renklendirmenin ise 5 yolunu sayıyor.

Bu rehber hepsini tek bir yerde topluyor: her efektin ne yaptığı, onu getiren iOS sürümü, onu oynatan modifier ve beş renk seçeneği. Apple'ın dokümantasyonuna ve WWDC23, WWDC24 ile WWDC25'teki SF Symbols oturumlarına dayanıyor. En yeni API'ler iOS 26 ile geldi; ayrıntılar sürümler arasında değişebilir.

SwiftUI'da SF Symbol animasyonları nasıl çalışır?

Her sembol animasyonu aynı modifier ailesinden geçer; hangisini kullanacağınız efektin davranışına bağlıdır. Apple'ın WWDC23 oturumu Animate symbols in your app dört davranış tanımlıyor:

• Discrete: Bounce gibi bir kez oynar ve durur.
• Indefinite: Scale gibi sembolü değiştirir ve siz efekti kaldırana kadar öyle tutar.
• Transition: Appear ve Disappear gibi bir sembolü görünüme sokar veya görünümden çıkarır.
• Content transition: Replace gibi bir sembolden diğerine geçişi canlandırır.

Her davranış Symbols framework'ünde bir protokoldür ve her efekt desteklediği davranışları bildirir. SwiftUI bunları farklı çağrılarla eşleştirir. Discrete efektler, değer her değiştiğinde efekti oynatan symbolEffect(_:options:value:) modifier'ını kullanır. Indefinite efektler ise isActive değerinin varsayılan olarak true olduğu symbolEffect(_:options:isActive:) modifier'ını kullanır. İki modifier da iOS 17 ile geldi ve yalnızca tek bir Image üzerinde değil, sembol görselleri içeren her view üzerinde çalışır.

Hangi SF Symbols efektleri var ve her biri hangi iOS sürümüyle geldi?

@sarunw'nin listelediği 12 efekt, Apple dokümantasyonunun bugün her biri için gösterdiği davranışlarla birlikte aşağıda. Appear, bir çift oldukları için Disappear ile birlikte listeleniyor.

iOS 17 seti SF Symbols 5 ile geldi. Wiggle, Rotate ve Breathe WWDC24'te SF Symbols 6 ile, Draw ve Variable Draw ise WWDC25'te SF Symbols 7 ile tanıtıldı. Variable Draw listenin farklı üyesi: Apple ona bir animasyon değil bir rendering preset'i diyor, ama bir sembolün ilerlemeyi gösterme biçimini değiştirdiği için listede yer alıyor.

symbolEffect ile tek seferlik ve döngüsel efektler nasıl oynatılır?

Bir şey olduğunda discrete bir efekt kullanın: yeni bir mesaj gelir, bir indirme tamamlanır, bir düğmeye dokunulur. Bir değer verin; efekt değer her değiştiğinde oynar.

struct InboxButton: View {
    @State private var newMessages = 0

    var body: some View {
        Button("Inbox", systemImage: "bell") { newMessages += 1 }
            .symbolEffect(.bounce, value: newMessages)
    }
}

İkisi de iOS 18 ile gelen Wiggle ve Rotate aynı çağrıyı kullanır. Apple'ın WWDC24 oturumu, gözden kaçabilecek bir değişiklik veya eylem çağrısı için Wiggle'ı, dönen oklar gibi devam eden bir görev için Rotate'i öneriyor.

Image(systemName: "bell.badge")
    .symbolEffect(.wiggle, value: newMessages)

Image(systemName: "arrow.triangle.2.circlepath")
    .symbolEffect(.rotate, isActive: isSyncing)

İkinci satır indefinite biçimi gösteriyor. isActive ile efekt, bayrak false olana kadar çalışır; bu da olaylardan çok durumlara uyar: senkronizasyon, kayıt, bağlantı bekleme. Pulse, Variable Color ve Breathe buraya uyar. Apple, birbirine en yakın ikisi arasındaki farkı şöyle açıklıyor: Pulse opaklığı değiştirir, Breathe ise opaklığı ve boyutu değiştirir. Scale bir sembolü etkin olduğu sürece yeni bir boyutta tutar.

Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative, isActive: isSearching)

Image(systemName: "mic.fill")
    .symbolEffect(.breathe, isActive: isRecording)

Image(systemName: "heart.fill")
    .symbolEffect(.scale.up, isActive: isFavorite)

Çoğu efektin varyantları vardır. .variableColor'ın .iterative ve .cumulative doldurma stilleri, Bounce ve Scale'in .up ve .down seçenekleri var; birçok efekt .byLayer olarak ya da .wholeSymbol üzerine uygulanabilir. options parametresi, tekrar sayısını ve hızı ayarlayan SymbolEffectOptions alır.

Bir sembol görünüme, görünümden dışarıya veya başka bir sembole nasıl canlandırılır?

Appear ve Disappear iki davranışı destekler. Indefinite bir efekt olarak .symbolEffect(.disappear, isActive: isHidden), bayrak false olana kadar bir sembolü gizler. Transition olarak ise efekt, SwiftUI view'u eklediğinde veya kaldırdığında oynar.

if isConnected {
    Image(systemName: "antenna.radiowaves.left.and.right")
        .transition(.symbolEffect(.appear))
}

iOS 26 ile gelen Draw On ve Draw Off da aynı kalıbı izler. Apple'ın dokümantasyonu SymbolEffectTransition'ı Appear, Disappear, DrawOn veya DrawOff animasyonunu uygulayan bir tür olarak tanımlıyor. Draw, bir sembolü her sembolün kendi tanımladığı bir yönde, yolları boyunca çizer. Hacking with Swift üç oynatma seçeneğini yan yana gösteriyor:

Image(systemName: "signature")
    .symbolEffect(.drawOn, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.wholeSymbol, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.individually, isActive: isSigned)

Varsayılan olan by layer, her yolu kademeli olarak çizer. Whole symbol tüm katmanları aynı anda, individually ise katmanları birbiri ardına çizer. Draw Off'un ayrıca .reversed ve .nonReversed seçenekleri var. Özel sembollerin Draw'ı kullanabilmesi için SF Symbols uygulamasında çizim işaretlemelerine ihtiyacı vardır.

Replace bir sembolü başka bir sembolle değiştirir. Onu bir content transition olarak uygulayın ve sistem adını değiştirin:

Image(systemName: isMuted ? "speaker.slash.fill" : "speaker.wave.2.fill")
    .contentTransition(.symbolEffect(.replace.magic(fallback: .replace.downUp)))

iOS 18 ile gelen Magic Replace, ilişkili iki sembolün paylaştığı parçaları korur ve yalnızca farklı olanı, örneğin bir eğik çizgiyi veya bir badge'i, canlandırır. Apple'ın WWDC24 oturumuna göre bu, varsayılan Replace davranışı haline geldi ve ilişkisiz semboller standart bir Replace'e geri döner. magic(fallback:) bu geri dönüşü seçmenizi sağlar. iOS 26'da Apple, çerçeve eşleştirmesi ve Draw ekledi: giden eğik çizgi silinerek kaybolur, gelen ise çizilerek belirir.

Variable Color ve Variable Draw ile ilerleme nasıl gösterilir?

Bazı semboller, Image(systemName:variableValue:) ile verilen 0.0 ile 1.0 arasında değişken bir değeri destekler. Varsayılan olarak sembol bunu Variable Color ile gösterir ve her değişken katmanı bir eşiğe göre açar veya kapatır. iOS 26'da Variable Draw bunun yerine her katmanı, yolun soluk bir kopyasının üzerinde, değere uyan bir uzunlukta çizer. Apple'ın örnekleri indirme ilerlemesi, sıcaklık ve süreli bir oturum.

// Sembolün Variable Draw'ı desteklemesi gerekir; SF Symbols uygulamasında kontrol edin.
Image(systemName: "thermometer.high", variableValue: temperatureLevel)
    .symbolVariableValueMode(.draw)

symbolVariableValueMode(_:) .color veya .draw alır. Apple, bir sembolün ikisini de destekleyebileceğini, ancak çizildiğinde yalnızca birinin uygulandığını belirtiyor.

SwiftUI'daki 5 SF Symbols rendering modu nedir?

Renk, bir sembolün görünümünün diğer yarısıdır. Dört mod, iOS 15'ten beri symbolRenderingMode(_:) ile ayarlanan SymbolRenderingMode türünün case'leridir. Birini ayarlamazsanız SwiftUI, görsele ve geçerli foreground stiline göre bir mod seçer.

Hierarchical ve palette ikisi de foregroundStyle kullanır. Hierarchical tek bir stile ihtiyaç duyar; palette ise katman başına bir tane olmak üzere en fazla üç stil alır.

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

Image(systemName: "person.crop.circle.badge.plus")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.white, .blue)

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.multicolor)

Gradient teknik olarak farklı türde bir ayardır. Diğer case'i .flat olan SymbolColorRenderingMode türünün bir case'idir; yani katmanları seçmek yerine onları doldurur. Apple'ın WWDC25 oturumuna göre gradyan tek bir kaynak renkten üretilir ve her rendering moduyla çalışır; bu yüzden onu dördünden herhangi biriyle birleştirebilirsiniz.

Image(systemName: "flame.fill")
    .symbolRenderingMode(.hierarchical)
    .symbolColorRenderingMode(.gradient)
    .foregroundStyle(.orange)

Apple, gradyanların her boyutta iyi göründüğünü ama en çok büyük sembollerde öne çıktığını söylüyor; bu yüzden onları bir sembolün derinliğini ortaya çıkarmak istediğiniz yerlerde kullanın.

SF Symbols iPhone Duo'da neden daha önemli?

iPhone Duo'da iOS 27.1 SDK ile derlenen uygulamalar bir yan kenar boyunca dikey bir bar alır. Apple'ın Raise the bar with iPhone Duo Tech Talk'u bu bar'ın genişliğinin sabit olduğunu anlatıyor; @sarunw de bunun yalnızca sembolden oluşan öğeleri öne çıkardığını belirtiyor. İkonu olan toolbar öğeleri dikey bar'a taşınır; yalnızca metin içeren öğeler yatay kalır.

Bu yüzden her toolbar eylemi için net bir sembol her zamankinden daha önemli. Etiket olmadan da iyi okunan semboller seçin ve başlığı da koruyun, çünkü sistem onu taşma menülerinde hâlâ kullanıyor. iPhone Duo dikey toolbar rehberimiz öğelerin nasıl taşındığını, taşmaya nasıl geçtiğini ve nasıl sabitlendiğini anlatıyor.

Apple'ın iPhone Duo konuşmaları dikey bar'daki sembol efektleri veya rendering modları hakkında özel bir şey söylemiyor. Bu rehberdeki hiçbir şey cihazda değişmiyor ve aynı modifier'lar geçerli. Liquid Glass'ın iOS 26'da toolbar öğelerini nasıl grupladığı ve renklendirdiği için Liquid Glass için SwiftUI toolbar rehberimize bakın.

Önemli çıkarımlar

• Sembolleri .symbolEffect ile canlandırın: tek seferlik efektler için value:, siz durdurana kadar çalışan efektler için isActive: verin.
• Bounce, Pulse, Variable Color, Scale, Appear ve Disappear ile Replace iOS 17 gerektirir. Wiggle, Rotate, Breathe ve Magic Replace iOS 18 gerektirir. Draw ve Variable Draw iOS 26 gerektirir.
• Appear, Disappear ve Draw için .transition(.symbolEffect(...)), sembolleri değiştirmek için .contentTransition(.symbolEffect(.replace)) kullanın.
• Sembolleri monochrome, hierarchical, palette veya multicolor ile renklendirin ve iOS 26'da .symbolColorRenderingMode(.gradient) ekleyin.
• iPhone Duo'da dikey bar yalnızca sembolden oluşan öğeleri öne çıkarır; bu yüzden her toolbar eylemine net bir sembol ve bir başlık verin.

Sırada, iPhone Duo'nun dikey toolbar'ının bu sembolleri nasıl yerleştirdiğini okuyun, ardından menteşeyi gerçekten kullanan oyunları Built for the fold sayfasında görün.