CAShapeLayer — bu nədir, xüsusiyyətləri və fiqurların yaradılması

CAShapeLayer nədir?

CAShapeLayer — iOS 3.0-da təqdim edilmiş vektor qrafikasının render edilməsi üçün ixtisaslaşmış təbəqədir. Rastr təsviri saxlayan CALayer-dən fərqli olaraq, CAShapeLayer konturun riyazi təsvirini — CGPath — saxlayır və onu birbaşa GPU-da render edir. Bu, fiqurun keyfiyyət itkisi olmadan miqyaslanmasına və məzmunu yenidən çəkmədən xüsusiyyətlərinin animasiya edilməsinə imkan verir.

Arxitektura baxımından CAShapeLayer CALayer-in bütün imkanlarını miras alır: kölgələr, sərhədlər, transformasiyalar, maskalar. Lakin konturlarla işləmək üçün spesifik xüsusiyyətlər əlavə edir: path, fillColor, strokeColor, lineWidth, lineCap, lineJoin, miterLimit, strokeStart, strokeEnd və fillRule. Bu xüsusiyyətlərin hər biri CABasicAnimation vasitəsilə animasiya edilə bilər.

Apple Documentation-a görə, CAShapeLayer render zamanı aparat sürətləndirilməsindən istifadə edir. CPU-nun konturu rastr kontekstdə çəkdiyi drawRect-də Core Graphics vasitəsilə rəsm çəkmədən fərqli olaraq, CAShapeLayer əmrləri birbaşa Metal vasitəsilə GPU-ya göndərir. Nəticə — xüsusilə animasiya zamanı daha yüksək performans.

CAShapeLayer istifadəçi hərəkətlərinə cavab olaraq formasını dəyişən interfeys elementləri üçün xüsusilə faydalıdır: gedişat göstəriciləri, qrafiklər, tab-bar ikonları, məzmunun görünmə animasiyası üçün maskalar.

CAShapeLayer konturu GPU-da necə render edir

CAShapeLayer-in render prosesi əsas CALayer-dən fərqlənir. Piksellərlə rastr bufer saxlamaq əvəzinə, CAShapeLayer GPU-ya konturun təpə təsvirini — nöqtələr, Bezier əyriləri və seqmentlər toplusunu ötürür. GPU bu konturu bir keçiddə rasterləşdirir, doldurma və kontur rəngini fraqment şeyderi mərhələsində tətbiq edir.

Bu yanaşma iki üstünlük verir: keyfiyyət itkisi olmadan miqyaslama (vektor qrafikası istənilən rezolyusiyada aydın qalır) və səmərəli animasiya — path dəyişdikdə GPU yalnız dəyişmiş pikselləri yenidən hesablayır, bütün ekranı deyil.

CAShapeLayer-in əsas xüsusiyyətləri

path — CGPath qəbul edən CAShapeLayer-in mərkəzi xüsusiyyətidir. Kontur xətlər, qövslər, Bezier əyriləri və düzbucaqlılar ola bilər. Swift-də UIBezierPath və ya Core Graphics-də CGPath vasitəsilə yaradılır. Nümunə: UIBezierPath(roundedRect: rect, cornerRadius: 16).cgPath dairəvi düzbucaqlı yaradır.

• fillColor — qapalı konturun doldurma rəngi (CGColor). nil olarsa — doldurma yoxdur. Animasiyanı dəstəkləyir.
• strokeColor — konturun xətt rəngi. lineWidth ilə birlikdə animasiya edilərək çəkilən kontur effekti yaradır.
• lineWidth — nöqtələrlə xətt qalınlığı. Standart 1.0. Animasiya edilə bilər.
• lineCap — xəttin sonluq stili: .butt (düz kəsik), .round (dairəvi), .square (çıxıntılı düzbucaqlı).
• lineJoin — xətlərin birləşmə stili: .miter (iti bucaq), .round (dairəvi), .bevel (kəsilmiş).
• strokeStart və strokeEnd — 0.0-dan 1.0-a qədər çəkilmiş konturun payı. strokeEnd animasiyası tədricən görünmə effekti yaradır.
• fillRule — kəsişən konturların doldurulma qaydası: .nonZero (standart) və ya .evenOdd.
• miterLimit — lineJoin = .miter olduqda maksimum ucluq uzunluğu. Sonsuz uzun bucaqların qarşısını alır.

lineDashPattern xüsusiyyəti nöqtəli xətlər yaratmağa imkan verir. Rəqəmlər massivi qəbul edir: [6, 3] 6 nöqtəlik xətt və 3 nöqtəlik boşluq deməkdir. lineDashPhase nümunənin yerdəyişməsini təyin edir və hərəkət edən nöqtəli xətt effekti üçün animasiya edilə bilər.

CAShapeLayer vs CALayer: nə vaxt hansını seçmək

CAShapeLayer və əsas CALayer arasında seçim məzmunun növündən asılıdır. Element fon, sərhəd və kölgə ilə düzbucaqlı sahədirsə — CALayer kifayətdir. Element ixtiyari formadadırsa, kontur animasiyası və ya keyfiyyət itkisi olmadan miqyaslama tələb edirsə — CAShapeLayer daha üstündür.

Performans da fərqlənir. cornerRadius və masksToBounds ilə CALayer məzmunun kəsilməsi üçün offscreen bufer yaradır ki, bu da kadr başına 2–5 ms əlavə edir. CAShapeLayer offscreen bufer tələb etmir — kəsmə təpə şeyderi səviyyəsində həyata keçirilir. Mürəkkəb maskalı elementlər üçün CAShapeLayer 2–3 dəfə sürətli ola bilər.

• CALayer: düzbucaqlı elementlər, fotoşəkillər, video, dairəvi künclü məzmun (cornerRadius), kölgələr, sərhədlər.
• CAShapeLayer: ikonlar, qrafiklər, gedişat zolaqları, ixtiyari formalı maskalar, animasiya edilmiş konturlar, görünmə animasiyası üçün fiqurlar.
• CATextLayer: subpiksel renderinq və glif keşləmə tələb edən mətn.
• CAGradientLayer: gradient doldurmalar — gradientli fiqurlar yaratmaq üçün mask vasitəsilə CAShapeLayer ilə birləşdirilir.

CAShapeLayer-in digər təbəqələrlə birləşdirilməsi geniş yayılmış nümunədir. Məsələn, CAGradientLayer gradient doldurmalı fiqur yaratmaq üçün CAShapeLayer-dən maska kimi istifadə edir. Bu yanaşma həm vektor keyfiyyətini, həm də performans itkisi olmadan gradient doldurmanı təmin edir.

CAShapeLayer animasiyası: path və stroke

path animasiyası — CAShapeLayer-in ən güclü imkanlarından biridir. Hər iki kontur (başlanğıc və son) eyni sayda idarəetmə nöqtələrinə və seqmentlərə malikdirsə, Core Animation onlar arasında hamar interpolyasiya aparır. Nəticə — bir fiqurun digərinə çevrilməsi effekti.

path uyğunluq şərti: başlanğıc və son UIBezierPath eyni quruluşa malik olmalıdır — moveTo, addLine, addCurve və addQuadCurve çağırışlarının sayı uyğun olmalıdır. Quruluş fərqlidirsə, animasiya interpolyasiyasız, ani olacaq.

Apple WWDC 2024-ə görə, strokeStart və strokeEnd kombinasiyası CAShapeLayer-in ən çox istifadə edilən animasiya nümunəsidir. strokeEnd-in 0.0-dan 1.0-a animasiyası konturun əvvəldən sona çəkilməsi effekti yaradır. Bu, yükləmə göstəricilərində, qrafiklərin görünmə animasiyalarında və ekranlar arasında fərdi keçidlərdə istifadə olunur.

Nəbz effekti yaratmaq üçün strokeEnd və opacity-ni müxtəlif timing funksiyaları ilə eyni vaxtda animasiya edin. Hərəkət edən nöqtəli xətt effekti üçün sabit lineDashPattern ilə lineDashPhase-i animasiya edin. Hər iki üsul CPU iştirakı olmadan CABasicAnimation vasitəsilə həyata keçirilir.

Maska kimi animasiya

CAShapeLayer tez-tez digər təbəqələr üçün mask kimi istifadə olunur. Məsələn, məzmunun görünmə animasiyası üçün: başlanğıcda mask.path sıfır ölçülü düzbucaqlıdır, son — tam ölçü. Core Animation path-i interpolyasiya edir və məzmun hamar şəkildə açılır.

Bu nümunə iOS-da kartların açılması, modal pəncərələrin görünməsi və view controller-lər arasında keçid animasiyalarında istifadə olunur. Alpha animasiyasından fərqli olaraq, CAShapeLayer maskası ilə animasiya ixtiyari formada daha təbii görünmə effekti verir.

Swift-də CAShapeLayer ilə kod nümunələri

Birinci nümunə — strokeEnd animasiyası ilə dairəvi gedişat göstəricisinin yaradılması. Bu, CAShapeLayer-in əsas imkanlarını nümayiş etdirən standart UI elementidir:

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%-ə qədər animasiya
progressLayer.animateStrokeEnd(to: 0.75, duration: 1.5)

İkinci nümunə — dairə və kvadrat arasında çevrilmə animasiyası. Hər iki UIBezierPath uyğun quruluşa malikdir:

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ü nümunə — məzmunun görünmə animasiyası üçün CAShapeLayer ilə maska. Maska mərkəzdən kənarlara doğru genişlənir:

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
}