Layer ในแอปมือถือ — คืออะไร ประเภท และวิธีการทำงาน

Layer ในกราฟิกมือถือคืออะไร

Layer เป็นวัตถุระบบกราฟิกระดับต่ำที่เก็บภาพบิตแมปของส่วนหน้าจอและจัดการแอตทริบิวต์ภาพของมัน: ตำแหน่ง ขนาด การหมุน ความทึบ เงา และสี ใน iOS ทุก UIView มี CALayer ในตัวที่เข้าถึงได้ผ่านคุณสมบัติ layer นักพัฒนาสามารถทำงานโดยตรงกับ layer โดยข้าม UIView เพื่อการควบคุมการเรนเดอร์ที่ละเอียด

สถาปัตยกรรมเลเยอร์เป็นไปตามรูปแบบ Model-View-Controller โดยที่ CALayer ทำหน้าที่เป็น Model — มันเก็บสถานะของคุณสมบัติภาพ Core Animation เป็น Controller ที่จัดการการเปลี่ยนแอนิเมชันระหว่างสถานะ View (UIView) เป็นตัวห่อหุ้มเสริมที่เพิ่มการจัดการการสัมผัสและการมีส่วนร่วมใน Auto Layout

ตาม Apple WWDC 2024 ไพพ์ไลน์การเรนเดอร์สมัยใหม่ของ iOS ใช้ Metal สำหรับการรวมเลเยอร์ แต่ละ CALayer จะถูกเรนเดอร์ในบัฟเฟอร์แยกต่างหาก หลังจากนั้น Core Animation จะรวมบัฟเฟอร์ทั้งหมดเป็นภาพสุดท้าย โดยคำนึงถึงความทึบและโหมดการผสม

ใน Android สิ่งที่คล้ายกับเลเยอร์คือ View และ Drawable พื้นหลัง แต่การทำงานโดยตรงกับเลเยอร์กราฟิกสามารถทำได้ผ่าน Canvas และ RenderNode ใน Android 10+ การทำความเข้าใจแนวคิดของเลเยอร์เป็นสิ่งสำคัญสำหรับการปรับแต่งการเรนเดอร์บนทั้งสองแพลตฟอร์ม

ความแตกต่างระหว่าง Layer และ View

ความแตกต่างหลักอยู่ที่พื้นที่ความรับผิดชอบ View จัดการอินพุตของผู้ใช้ (การสัมผัส ท่าทาง) การวางตำแหน่ง (Auto Layout, frame) และวงจรชีวิต Layer รับผิดชอบเฉพาะการนำเสนอด้วยภาพ: การเรนเดอร์เนื้อหา แอนิเมชันคุณสมบัติ และการรวมกับเลเยอร์อื่น ๆ

การแยกนี้ช่วยให้สามารถแคชการแสดงบิตแมปของเลเยอร์โดยอิสระจาก View หากเลเยอร์ไม่เปลี่ยนแปลง Core Animation จะใช้เฟรมที่แคชไว้โดยไม่เรียก drawRect สำหรับองค์ประกอบแบบคงที่ สิ่งนี้ให้ประสิทธิภาพที่เพิ่มขึ้นอย่างมากโดยไม่ต้องเปลี่ยนแปลงโค้ด

ประเภทหลักของเลเยอร์ใน iOS และ Android

iOS มีลำดับชั้นที่หลากหลายของคลาสที่สืบทอดจาก CALayer แต่ละคลาสย่อยถูกปรับให้เหมาะสมสำหรับสถานการณ์เฉพาะ: การแสดงข้อความ กราฟิกเวกเตอร์ การไล่ระดับสี หรือการแปลง 3 มิติ การเลือกประเภทเลเยอร์ที่ถูกต้องส่งผลโดยตรงต่อประสิทธิภาพการเรนเดอร์

• CALayer — เลเยอร์พื้นฐานสำหรับพื้นที่สี่เหลี่ยมที่มีสีพื้นหลัง เส้นขอบ และเงา
• CAShapeLayer — เลเยอร์สำหรับเรนเดอร์รูปร่างเวกเตอร์ผ่าน CGPath การเรนเดอร์ดำเนินการบน GPU โดยไม่ต้องสร้างบัฟเฟอร์แยกต่างหาก
• CATextLayer — เลเยอร์สำหรับแสดงข้อความด้วยการเรนเดอร์ระดับย่อยพิกเซลและการแคชกลิฟ
• CAGradientLayer — เลเยอร์สำหรับการไล่ระดับสีแบบเส้นตรงและรัศมีด้วยการเร่งด้วยฮาร์ดแวร์
• CAReplicatorLayer — เลเยอร์ที่สร้างสำเนาของเลเยอร์ลูกโดยอัตโนมัติด้วยออฟเซตที่กำหนด

ใน Android แนวคิดของเลเยอร์ถูกนำไปใช้ผ่าน RenderNode, ViewLayer และ HardwareRenderer ตั้งแต่ Android 5.0 (API 21) แต่ละ View จะถูกเรนเดอร์ในเลเยอร์เร่งด้วยฮาร์ดแวร์ของตัวเอง ทำให้สามารถทำแอนิเมชันได้โดยไม่ต้องเรียก onDraw

ความยืดหยุ่นเพิ่มเติมใน iOS มีให้โดย CAReplicatorLayer และ CAEmitterLayer อย่างแรกใช้สำหรับสร้างรูปแบบที่ซ้ำกัน อย่างที่สองสำหรับระบบอนุภาค ทั้งสองทำงานเฉพาะบน GPU ทำให้สามารถสร้างเอฟเฟกต์ภาพที่ซับซ้อนได้โดยไม่สูญเสียประสิทธิภาพ

ลำดับชั้นของเลเยอร์และการรวมฉาก

ลำดับชั้นของเลเยอร์ ใน iOS เป็นไปตามโครงสร้างต้นไม้: แต่ละ CALayer สามารถมีเลเยอร์ย่อยหลายชั้น การแปลงทั้งหมดที่ใช้กับเลเยอร์หลัก — การปรับขนาด การหมุน การเลื่อน — จะถูกนำไปใช้กับองค์ประกอบลูกโดยอัตโนมัติ สิ่งนี้ช่วยให้มั่นใจถึงความสอดคล้องทางภาพระหว่างแอนิเมชัน

การรวมฉากดำเนินการโดย Core Animation ตามลำดับต่อไปนี้: ขั้นแรกเรนเดอร์พื้นหลัง จากนั้นแต่ละเลเยอร์ลูกตามลำดับจากล่างขึ้นบน สำหรับแต่ละเลเยอร์ Core Animation จะตรวจสอบคุณสมบัติความทึบ มาสก์ และโหมดการผสม จากนั้นรวมเป็นเฟรมสุดท้าย

ตาม Apple Documentation การรวมเลเยอร์ที่มี opaque = true และไม่มีช่องอัลฟ่าจะดำเนินการโดยไม่ต้องผ่านเพิ่มเติม — GPU เพียงคัดลอกพิกเซลทับเลเยอร์ก่อนหน้า หากเลเยอร์มีความโปร่งใส GPU จะทำการผสมอัลฟ่า ซึ่งต้องใช้ทรัพยากรการคำนวณเพิ่มเติม

ใน Android การรวมเลเยอร์ดำเนินการผ่าน SurfaceFlinger — บริการระบบที่รับบัฟเฟอร์จากแต่ละแอปพลิเคชันและรวมตามลำดับ z แต่ละ Window ใน Android เป็น Surface แยกต่างหากที่สามารถมีเลเยอร์กราฟิกหลายชั้น

มาสก์และการตัดเลเยอร์

CALayer.mask — คุณสมบัติที่อนุญาตให้ใช้มาสก์รูปทรงตามต้องการกับเลเยอร์ มาสก์สามารถเป็น CALayer อื่นใดก็ได้ — ตัวอย่างเช่น CAShapeLayer ที่มีเส้นทางวงกลมหรือ CAGradientLayer สำหรับสร้างการเปลี่ยนความทึบที่นุ่มนวล การใช้มาสก์เพิ่มภาระให้กับ GPU เนื่องจากต้องผ่านการเรนเดอร์เพิ่มเติมเพื่อคำนวณค่าอัลฟ่าสำหรับแต่ละพิกเซล

สำหรับการตัดรูปสี่เหลี่ยมอย่างง่าย แนะนำให้ใช้ cornerRadius และ masksToBounds แตกต่างจากมาสก์ผ่านคุณสมบัติ mask ตรงที่ cornerRadius ถูกประมวลผลโดยฮาร์ดแวร์ในขั้นตอนการแรสเตอร์และไม่ต้องผ่านเพิ่มเติม

ประสิทธิภาพของเลเยอร์: การเรนเดอร์และการแคช

shouldRasterize เป็นคุณสมบัติหลักของ CALayer สำหรับการปรับแต่งประสิทธิภาพ เมื่อ shouldRasterize ถูกตั้งค่าเป็น true Core Animation จะเรนเดอร์เลเยอร์และเลเยอร์ย่อยทั้งหมดลงในบัฟเฟอร์นอกหน้าจอแยกต่างหาก ในเฟรมถัดไป ภาพบิตแมปที่แคชไว้จะถูกใช้แทนการเรนเดอร์ใหม่

การแคชมีประสิทธิภาพสำหรับเลเยอร์ที่คงที่หรือเปลี่ยนแปลงน้อยครั้ง: เงา การไล่ระดับสี ข้อความที่มีมุมโค้งมน อย่างไรก็ตาม สำหรับเลเยอร์ที่อัปเดตบ่อยครั้ง (แอนิเมชัน วิดีโอ การเลื่อน) การแรสเตอร์อาจลดประสิทธิภาพเนื่องจากแต่ละเฟรมต้องสร้างแคชใหม่

จากการวิจัยของ Objc.io การใช้ shouldRasterize อย่างถูกต้องบน iPad Pro ช่วยลดเวลาในการเรนเดอร์หน้าจอที่ซับซ้อนจาก 25 ms เหลือ 8 ms — มากกว่าสามเท่า เงื่อนไขสำคัญคือเลเยอร์ไม่ควรเปลี่ยนแปลงบ่อยกว่า 1 ครั้งทุก 3–5 เฟรม

• Opaque = true — บอก Core Animation ว่าเลเยอร์ทึบแสง ไม่ต้องผสมอัลฟ่า
• drawsAsynchronously — เปิดใช้งานการเรนเดอร์แบบอะซิงโครนัสสำหรับเลเยอร์ที่ซับซ้อนโดยไม่บล็อกเธรดหลัก
• allowsEdgeAntialiasing — เปิดใช้งานการปรับขอบเรียบสำหรับเลเยอร์ที่ถูกแปลง แต่เพิ่มภาระ GPU
• allowsGroupOpacity — ควบคุมความทึบกลุ่มของเลเยอร์ลูก

ตัวอย่างการทำงานกับเลเยอร์ใน Swift และ Kotlin

ตัวอย่างแรกสาธิตการตั้งค่าคุณสมบัติภาพพื้นฐานของ CALayer ใน Swift — การโค้งมนของมุม เงา และเส้นขอบ:

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

ตัวอย่างที่สอง — การสร้างแอนิเมชันเลเยอร์ใน Swift โดยใช้ CABasicAnimation คุณสมบัติ position ถูกทำให้เคลื่อนไหวโดยไม่ต้องใช้ UIView:

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

ตัวอย่างที่สาม — การทำงานกับ RenderNode ใน Kotlin บน Android RenderNode เป็นสิ่งที่คล้าย CALayer โดยตรง ช่วยให้สามารถดำเนินการกับเลเยอร์กราฟิกในระดับ Canvas:

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}