CAShapeLayer — bu nima, xususiyatlari va shakllarni yaratish

CAShapeLayer nima?

CAShapeLayer — iOS 3.0 da taqdim etilgan vektor grafikasini renderlash uchun ixtisoslashgan qatlamdir. Rastr tasvirni saqlaydigan CALayer-dan farqli o'laroq, CAShapeLayer konturning matematik tavsifini — CGPath — saqlaydi va uni to'g'ridan-to'g'ri GPU-da render qiladi. Bu shaklni sifat yo'qotmasdan masshtablash va uning xususiyatlarini tarkibni qayta chizmasdan animatsiya qilish imkonini beradi.

Arxitektura jihatidan CAShapeLayer CALayer-ning barcha imkoniyatlarini meros qilib oladi: soyalar, chegaralar, transformatsiyalar, maskalar. Lekin konturlar bilan ishlash uchun o'ziga xos xususiyatlar qo'shadi: path, fillColor, strokeColor, lineWidth, lineCap, lineJoin, miterLimit, strokeStart, strokeEnd va fillRule. Bu xususiyatlarning har biri CABasicAnimation orqali animatsiya qilinishi mumkin.

Apple Documentation-ga ko'ra, CAShapeLayer renderlash vaqtida apparat tezlashtirishdan foydalanadi. CPU konturni rastr kontekstda chizadigan drawRect-dagi Core Graphics orqali chizishdan farqli o'laroq, CAShapeLayer buyruqlarni to'g'ridan-to'g'ri Metal orqali GPU-ga yuboradi. Natija — ayniqsa animatsiya paytida yuqori unumdorlik.

CAShapeLayer foydalanuvchi harakatlariga javoban shaklini o'zgartiradigan interfeys elementlari uchun ayniqsa foydalidir: progress ko'rsatkichlari, grafiklar, tab-bar ikonkalari, tarkibning paydo bo'lish animatsiyasi uchun maskalar.

CAShapeLayer konturni GPU-da qanday render qiladi

CAShapeLayer-ning render jarayoni asosiy CALayer-dan farq qiladi. Piksellar bilan rastr bufer saqlash o'rniga, CAShapeLayer GPU-ga konturning uch tavsifini — nuqtalar, Bezier egri chiziqlari va segmentlar to'plamini uzatadi. GPU bu konturni bir o'tishda rasterlashtiradi, to'ldirish va kontur rangini fragment shader bosqichida qo'llaydi.

Bu yondashuv ikkita afzallik beradi: sifat yo'qotmasdan masshtablash (vektor grafikasi har qanday rezolyutsiyada aniq qoladi) va samarali animatsiya — path o'zgarganda GPU faqat o'zgargan piksellarni qayta hisoblaydi, butun ekranni emas.

CAShapeLayer-ning asosiy xususiyatlari

path — CGPath qabul qiladigan CAShapeLayer-ning markaziy xususiyati. Kontur chiziqlar, yoylar, Bezier egri chiziqlari va to'rtburchaklarni o'z ichiga olishi mumkin. Swift-da UIBezierPath yoki Core Graphics-da CGPath orqali yaratiladi. Misol: UIBezierPath(roundedRect: rect, cornerRadius: 16).cgPath dumaloq to'rtburchak yaratadi.

• fillColor — yopiq konturni to'ldirish rangi (CGColor). nil bo'lsa — to'ldirish yo'q. Animatsiyani qo'llab-quvvatlaydi.
• strokeColor — kontur chizig'i rangi. lineWidth bilan birga animatsiya qilinib, chizilayotgan kontur effekti yaratadi.
• lineWidth — nuqtalarda chiziq qalinligi. Standart 1.0. Animatsiya qilinishi mumkin.
• lineCap — chiziq oxiri uslubi: .butt (tekis kesim), .round (dumaloq), .square (chiqib turgan to'rtburchak).
• lineJoin — chiziqlarni birlashtirish uslubi: .miter (o'tkir burchak), .round (dumaloq), .bevel (kesilgan).
• strokeStart va strokeEnd — 0.0 dan 1.0 gacha chizilgan kontur ulushi. strokeEnd animatsiyasi asta-sekin paydo bo'lish effektini yaratadi.
• fillRule — kesishgan konturlarni to'ldirish qoidasi: .nonZero (standart) yoki .evenOdd.
• miterLimit — lineJoin = .miter bo'lganda maksimal uch uzunligi. Cheksiz uzun burchaklarning oldini oladi.

lineDashPattern xususiyati nuqtali chiziqlar yaratishga imkon beradi. Raqamlar massivini qabul qiladi: [6, 3] 6 nuqta chiziq va 3 nuqta bo'shliqni anglatadi. lineDashPhase naqshning siljishini belgilaydi va harakatlanuvchi nuqtali chiziq effekti uchun animatsiya qilinishi mumkin.

CAShapeLayer vs CALayer: qaysi birini tanlash

CAShapeLayer va asosiy CALayer o'rtasidagi tanlov tarkib turiga bog'liq. Agar element fon, chegara va soya bilan to'rtburchak maydon bo'lsa — CALayer yetarli. Agar element ixtiyoriy shaklga ega bo'lsa, kontur animatsiyasi yoki sifat yo'qotmasdan masshtablash talab qilsa — CAShapeLayer afzalroq.

Unumdorlik ham farq qiladi. cornerRadius va masksToBounds bilan CALayer tarkibni kesish uchun offscreen bufer yaratadi, bu kadr uchun 2–5 ms qo'shadi. CAShapeLayer offscreen bufer talab qilmaydi — kesish uch shader darajasida amalga oshiriladi. Murakkab maskali elementlar uchun CAShapeLayer 2–3 marta tezroq bo'lishi mumkin.

• CALayer: to'rtburchak elementlar, fotosuratlar, video, dumaloq burchakli tarkib (cornerRadius), soyalar, chegaralar.
• CAShapeLayer: ikonkalar, grafiklar, progress chiziqlari, ixtiyoriy shaklli maskalar, animatsiyalangan konturlar, paydo bo'lish animatsiyasi uchun shakllar.
• CATextLayer: subpiksel renderlash va glif keshlash talab qiladigan matn.
• CAGradientLayer: gradient to'ldirishlar — gradientli shakllar yaratish uchun mask orqali CAShapeLayer bilan birlashtiriladi.

CAShapeLayer-ni boshqa qatlamlar bilan birlashtirish keng tarqalgan naqshdir. Masalan, CAGradientLayer gradient to'ldirishli shakl yaratish uchun CAShapeLayer-dan maska sifatida foydalanadi. Bu yondashuv ham vektor sifatini, ham unumdorlikni yo'qotmasdan gradient to'ldirishni ta'minlaydi.

CAShapeLayer animatsiyasi: path va stroke

path animatsiyasi — CAShapeLayer-ning eng kuchli imkoniyatlaridan biri. Agar ikkala kontur (boshlang'ich va yakuniy) bir xil miqdordagi boshqaruv nuqtalari va segmentlarga ega bo'lsa, Core Animation ular o'rtasida silliq interpolyatsiyani amalga oshiradi. Natija — bir shaklning boshqasiga aylanishi effekti.

path moslik sharti: boshlang'ich va yakuniy UIBezierPath bir xil tuzilishga ega bo'lishi kerak — moveTo, addLine, addCurve va addQuadCurve chaqiruvlari soni mos kelishi kerak. Agar tuzilish farq qilsa, animatsiya interpolyatsiyasiz, bir zumda bo'ladi.

Apple WWDC 2024-ga ko'ra, strokeStart va strokeEnd kombinatsiyasi CAShapeLayer-ning eng ko'p ishlatiladigan animatsiya naqshidir. strokeEnd ning 0.0 dan 1.0 gacha animatsiyasi konturni boshidan oxirigacha chizish effektini yaratadi. Bu yuklash ko'rsatkichlari, grafiklarning paydo bo'lish animatsiyalari va ekranlar o'rtasidagi maxsus o'tishlarda ishlatiladi.

Pulsatsiya effektini yaratish uchun strokeEnd va opacity ni turli timing funksiyalari bilan bir vaqtda animatsiya qiling. Harakatlanuvchi nuqtali chiziq effekti uchun lineDashPhase ni sobit lineDashPattern bilan animatsiya qiling. Ikkala usul CPU ishtirokisiz CABasicAnimation orqali amalga oshiriladi.

Maska sifatida animatsiya

CAShapeLayer ko'pincha boshqa qatlamlar uchun mask sifatida ishlatiladi. Masalan, tarkibning paydo bo'lish animatsiyasi uchun: boshlang'ichda mask.path nol o'lchamdagi to'rtburchak, yakuniy — to'liq o'lcham. Core Animation path ni interpolyatsiya qiladi va tarkib silliq ochiladi.

Bu naqsh iOS-da kartalarning ochilishi, modal oynalarning paydo bo'lishi va view controllerlar o'rtasidagi o'tish animatsiyalarida ishlatiladi. Alpha animatsiyasidan farqli o'laroq, CAShapeLayer maskasi orqali animatsiya ixtiyoriy shaklda tabiiyroq paydo bo'lish effektini beradi.

Swift-da CAShapeLayer bilan kod misollari

Birinchi misol — strokeEnd animatsiyasi bilan dumaloq progress ko'rsatkichini yaratish. Bu CAShapeLayer-ning asosiy imkoniyatlarini namoyish etadigan 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% gacha animatsiya
progressLayer.animateStrokeEnd(to: 0.75, duration: 1.5)

Ikkinchi misol — doira va kvadrat o'rtasidagi aylanish animatsiyasi. Ikkala UIBezierPath mos tuzilishga ega:

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")

Uchinchi misol — tarkibning paydo bo'lish animatsiyasi uchun CAShapeLayer bilan maska. Maska markazdan chekkalargacha kengayadi:

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
}