CAShapeLayer — nedir, özellikleri ve şekil oluşturma

CAShapeLayer nedir?

CAShapeLayer, iOS 3.0'da tanıtılan vektör grafikleri oluşturmak için özel bir katmandır. Raster görüntü depolayan CALayer'ın aksine, CAShapeLayer bir yolun matematiksel tanımını — CGPath — depolar ve doğrudan GPU'da oluşturur. Bu, kalite kaybı olmadan şeklin ölçeklenmesine ve içeriği yeniden çizmeden özelliklerinin canlandırılmasına olanak tanır.

Mimari olarak, CAShapeLayer CALayer'ın tüm yeteneklerini devralır: gölgeler, kenarlıklar, dönüşümler, maskeler. Ancak yollarla çalışmak için belirli özellikler ekler: path, fillColor, strokeColor, lineWidth, lineCap, lineJoin, miterLimit, strokeStart, strokeEnd ve fillRule. Bu özelliklerin her biri CABasicAnimation aracılığıyla canlandırılabilir.

Apple Documentation'a göre, CAShapeLayer oluşturma için donanım hızlandırması kullanır. drawRect:'te Core Graphics aracılığıyla çizimin aksine, CPU'nun yolu bir raster bağlama oluşturduğu yerde, CAShapeLayer Metal aracılığıyla doğrudan GPU'ya komutlar gönderir. Sonuç, özellikle animasyon sırasında daha yüksek performanstır.

CAShapeLayer, kullanıcı eylemlerine yanıt olarak şekil değiştiren arayüz öğeleri için özellikle kullanışlıdır: ilerleme göstergeleri, grafikler, sekme çubuğu simgeleri, içerik gösterme animasyonları için maskeler.

CAShapeLayer GPU'da bir yolu nasıl oluşturur

CAShapeLayer'ın oluşturma süreci temel CALayer'dan farklıdır. Piksellerle raster arabellek depolamak yerine, CAShapeLayer yolun bir tepe noktası tanımını GPU'ya iletir — bir dizi nokta, Bezier eğrileri ve çizgi parçaları. GPU bu yolu tek geçişte rasterleştirir, parça gölgelendirici aşamasında dolgu ve kontur renklerini uygular.

Bu yaklaşım iki avantaj sunar: kalite kaybı olmadan ölçekleme (vektör grafikleri her çözünürlükte keskin kalır) ve verimli animasyon — yol değiştiğinde, GPU tüm ekranı değil, yalnızca değişen pikselleri yeniden hesaplar.

CAShapeLayer'ın temel özellikleri

path — CAShapeLayer'ın merkezi özelliği, bir CGPath kabul eder. Yol, çizgiler, yaylar, Bezier eğrileri ve dikdörtgenler içerebilir. Swift'te UIBezierPath veya Core Graphics'ta CGPath aracılığıyla oluşturulur. Örnek: UIBezierPath(roundedRect: rect, cornerRadius: 16).cgPath yuvarlatılmış bir dikdörtgen oluşturur.

• fillColor — kapalı yolun dolgu rengi (CGColor). Nil ise dolgu yok. Animasyonu destekler.
• strokeColor — yolun kontur rengi. lineWidth ile birlikte canlandırılır, yol çizme efekti oluşturur.
• lineWidth — punto cinsinden kontur çizgisinin kalınlığı. Varsayılan 1.0. Canlandırılabilir.
• lineCap — çizgi bitiş stili: .butt (düz kesim), .round (yuvarlak), .square (çıkıntılı dikdörtgen).
• lineJoin — çizgi birleştirme stili: .miter (keskin açı), .round (yuvarlak), .bevel (eğimli).
• strokeStart ve strokeEnd — 0.0'dan 1.0'a kadar çizilen yolun oranı. strokeEnd'i canlandırmak kademeli bir gösterme efekti oluşturur.
• fillRule — kesişen yollar için dolgu kuralı: .nonZero (varsayılan) veya .evenOdd.
• miterLimit — lineJoin = .miter olduğunda maksimum miter uzunluğu. Sonsuz uzun köşeleri önler.

lineDashPattern özelliği kesikli çizgiler oluşturmayı sağlar. Bir sayı dizisi kabul eder: [6, 3], 6 punto çizgi ve 3 punto boşluk anlamına gelir. lineDashPhase, desen ofsetini ayarlar ve hareketli çizgi efekti için canlandırılabilir.

CAShapeLayer vs CALayer: hangisini ne zaman seçmeli

CAShapeLayer ve temel CALayer arasındaki seçim, içerik türüne bağlıdır. Öğe, arka plan, kenarlık ve gölge içeren dikdörtgen bir alansa — CALayer yeterlidir. Öğe rastgele bir şekle sahipse, yol animasyonu veya kayıpsız ölçekleme gerektiriyorsa — CAShapeLayer tercih edilir.

Performans da farklılık gösterir. cornerRadius ve masksToBounds ile CALayer, içerik kırpma için bir ekran dışı arabellek oluşturur ve kare başına 2–5 ms ekler. CAShapeLayer ekran dışı arabellek gerektirmez — kırpma, tepe noktası gölgelendirici düzeyinde yapılır. Karmaşık maskelere sahip öğeler için CAShapeLayer 2–3 kat daha hızlı olabilir.

• CALayer: dikdörtgen öğeler, fotoğraflar, video, yuvarlatılmış köşeli içerik (cornerRadius), gölgeler, kenarlıklar.
• CAShapeLayer: simgeler, grafikler, ilerleme çubukları, rastgele şekilli maskeler, canlandırılmış yollar, gösterme animasyonu şekilleri.
• CATextLayer: alt piksel oluşturma ve glif önbellekleme gerektiren metin.
• CAGradientLayer: degrade dolgular — gradyanlı şekiller oluşturmak için mask aracılığıyla CAShapeLayer ile birleştirilir.

CAShapeLayer'ı diğer katmanlarla birleştirmek yaygın bir desendir. Örneğin, CAGradientLayer, degrade dolgulu bir şekil oluşturmak için CAShapeLayer'ı maske olarak kullanır. Bu yaklaşım, performans kaybı olmadan hem vektör kalitesi hem de degrade dolgu sağlar.

CAShapeLayer animasyonu: path ve stroke

Yol animasyonu, CAShapeLayer'ın en güçlü özelliklerinden biridir. Her iki yol (başlangıç ve bitiş) aynı sayıda kontrol noktasına ve parçaya sahipse, Core Animation aralarında yumuşak bir enterpolasyon gerçekleştirir. Sonuç, bir şekilden diğerine dönüşüm efektidir.

Yol uyumluluk koşulu: başlangıç ve bitiş UIBezierPath aynı yapıya sahip olmalıdır — moveTo, addLine, addCurve ve addQuadCurve çağrılarının sayısı eşleşmelidir. Yapı farklıysa, animasyon enterpolasyon olmadan anında gerçekleşir.

Apple WWDC 2024'e göre, strokeStart ve strokeEnd kombinasyonu en yaygın kullanılan CAShapeLayer animasyon desenidir. strokeEnd'i 0.0'dan 1.0'a canlandırmak, baştan sona bir yol çizme efekti oluşturur. Bu, yükleme göstergelerinde, grafik gösterme animasyonlarında ve özel ekran geçişlerinde kullanılır.

Bir nabız efekti oluşturmak için, farklı zamanlama işlevleriyle strokeEnd ve opacity'yi aynı anda canlandırın. Hareketli karınca efekti için, sabit bir lineDashPattern ile lineDashPhase'i canlandırın. Her iki teknik de CPU katılımı olmadan CABasicAnimation aracılığıyla uygulanır.

Maske olarak animasyon

CAShapeLayer genellikle diğer katmanlar için maske olarak kullanılır. Örneğin, içerik gösterme animasyonu için: başlangıçta, mask.path sıfır boyutlu bir dikdörtgendir ve bitiş tam boyutludur. Core Animation yolu enterpole eder ve içerik yumuşak bir şekilde görünür.

Bu desen, iOS'te kart genişletme animasyonu, modal pencere sunumu ve görünüm denetleyici geçişleri için kullanılır. Alfa animasyonunun aksine, CAShapeLayer maske animasyonu rastgele şekillerle daha doğal bir gösterme efekti sağlar.

Swift'te CAShapeLayer ile kod örnekleri

İlk örnek — strokeEnd animasyonuyla dairesel bir ilerleme göstergesi oluşturma. Bu, CAShapeLayer'ın temel yeteneklerini gösteren standart bir UI öğesidir:

func createProgressIndicator(in view: UIView) -> CAShapeLayer {
    let circlePath = UIBezierPath(
        arcCenter: CGPoint(x: 50, y: 50),
        radius: 40,
        startAngle: -.pi / 2,
        endAngle: 3 * .pi / 2,
        clockwise: true
    )

    let trackLayer = CAShapeLayer()
    trackLayer.path = circlePath.cgPath
    trackLayer.strokeColor = UIColor.systemGray5.cgColor
    trackLayer.fillColor = nil
    trackLayer.lineWidth = 8
    view.layer.addSublayer(trackLayer)

    let progressLayer = CAShapeLayer()
    progressLayer.path = circlePath.cgPath
    progressLayer.strokeColor = UIColor.systemBlue.cgColor
    progressLayer.fillColor = nil
    progressLayer.lineWidth = 8
    progressLayer.lineCap = .round
    progressLayer.strokeEnd = 0
    view.layer.addSublayer(progressLayer)

    return progressLayer
}

// %75'e Canlandır
progressLayer.animateStrokeEnd(to: 0.75, duration: 1.5)

İkinci örnek — bir daire ve kare arasında dönüşüm animasyonu. Her iki UIBezierPath uyumlu bir yapıya sahiptir:

let morphLayer = CAShapeLayer()
morphLayer.fillColor = UIColor.systemPurple.cgColor
morphLayer.frame = rect

let circlePath = UIBezierPath(roundedRect: rect, cornerRadius: rect.width / 2)
let squarePath = UIBezierPath(roundedRect: rect, cornerRadius: 0)
morphLayer.path = circlePath.cgPath

let morphAnimation = CABasicAnimation(keyPath: "path")
morphAnimation.toValue = squarePath.cgPath
morphAnimation.duration = 0.6
morphAnimation.autoreverses = true
morphAnimation.repeatCount = .infinity
morphLayer.add(morphAnimation, forKey: "morph")

Üçüncü örnek — içerik gösterme animasyonu için bir CAShapeLayer maskesi. Maske merkezden kenarlara doğru genişler:

func revealContent(_ view: UIView) {
    let maskLayer = CAShapeLayer()
    let size = view.bounds.size.width * 1.5
    let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)

    let initialPath = UIBezierPath(arcCenter: center, radius: 0, startAngle: 0, endAngle: .pi * 2, clockwise: true)
    let finalPath = UIBezierPath(arcCenter: center, radius: size, startAngle: 0, endAngle: .pi * 2, clockwise: true)

    maskLayer.path = initialPath.cgPath
    view.layer.mask = maskLayer

    let animation = CABasicAnimation(keyPath: "path")
    animation.toValue = finalPath.cgPath
    animation.duration = 0.4
    animation.timingFunction = CAMediaTimingFunction(name: .easeOut)
    maskLayer.add(animation, forKey: "reveal")
    maskLayer.path = finalPath.cgPath
}