iOS => CALayer

एक कायर बनाना

आप एक CALayer बना सकते हैं और उसका फ्रेम इस तरह सेट कर सकते हैं:

स्विफ्ट:

let layer = CALayer()
layer.frame = CGRect(x: 0, y: 0, width: 60, height: 80)

उद्देश्य सी:

CALayer *layer = [[CALayer alloc] init];
layer.frame = CGRectMake(0, 0, 60, 80);

फिर आप इसे एक मौजूदा काइलेयर के उपलेयर के रूप में जोड़ सकते हैं:

स्विफ्ट:

existingLayer.addSublayer(layer)

उद्देश्य सी:

[existingLayer addSublayer:layer];

ध्यान दें:

ऐसा करने के लिए आपको क्वार्ट्जकोर ढांचे को शामिल करने की आवश्यकता है।

स्विफ्ट:

 @import QuartzCore

उद्देश्य सी

#import <QuartzCore/QuartzCore.h>

CAEmitterLayer के साथ कण बनाना

CAEmitterLayer क्लास कोर एनिमेशन के लिए एक कण एमिटर सिस्टम प्रदान करता है। कणों को CAEmitterCell के उदाहरणों द्वारा परिभाषित किया गया है।

कण परत की पृष्ठभूमि के रंग और सीमा के ऊपर खींचे जाते हैं।

        var emitter = CAEmitterLayer()
        
        emitter.emitterPosition = CGPoint(x: frame.size.width / 2.0, y: -20)
        emitter.emitterShape = kCAEmitterLayerLine
        emitter.emitterSize = CGSize(width: frame.size.width, height: 1)

        emitter.emitterCells = cells
        layer.addSublayer(emitter)

कस्टम छवि के साथ एमिटर व्यू

उदाहरण के लिए हम ऐसे दृश्य बनाएंगे जिनमें उत्सर्जक परत होती है और कणों को एनिमेट करती है।

import QuartzCore

class ConfettiView: UIView {
    // main emitter layer
    var emitter: CAEmitterLayer!

    // array of color to emit
    var colors: [UIColor]!

    // intensity of appearance
    var intensity: Float!
    
    private var active :Bool!
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    func setup() {
        // initialization
        colors = [UIColor.redColor(),
                  UIColor.greenColor(),
                  UIColor.blueColor()
                  ]
        intensity = 0.2
        
        active = false
    }
    
    func startConfetti() {
        emitter = CAEmitterLayer()
        
        emitter.emitterPosition = CGPoint(x: frame.size.width / 2.0, y: -20)
        emitter.emitterShape = kCAEmitterLayerLine
        emitter.emitterSize = CGSize(width: frame.size.width, height: 1)
        
        var cells = [CAEmitterCell]()
        for color in colors {
            cells.append(confettiWithColor(color))
        }
        
        emitter.emitterCells = cells
        layer.addSublayer(emitter)
        active = true
    }
    
    func stopConfetti() {
        emitter?.birthRate = 0
        active = false
    }
    
    func confettiWithColor(color: UIColor) -> CAEmitterCell {
        let confetti = CAEmitterCell()

        confetti.birthRate = 10.0 * intensity
        confetti.lifetime = 180.0 * intensity
        confetti.lifetimeRange = 0
        confetti.color = color.CGColor
        confetti.velocity = CGFloat(350.0 * intensity)
        confetti.velocityRange = CGFloat(40.0 * intensity)
        confetti.emissionLongitude = CGFloat(M_PI)
        confetti.emissionRange = CGFloat(M_PI_4)
        confetti.spin = CGFloat(3.5 * intensity)
        confetti.spinRange = CGFloat(4.0 * intensity)
        
        // WARNING: A layer can set this property to a CGImageRef to display the image as its contents.
        confetti.contents = UIImage(named: "confetti")?.CGImage
        return confetti
    }
    
    internal func isActive() -> Bool {
        return self.active
    }
}

आप "कॉन्फ़ेटी" छवि जोड़ सकते हैं या confetti.contentsRect साथ रेक्ट परिभाषित करने की जरूरत

एक गेरू में एक UIImage कैसे जोड़ें

आप अपनी contents संपत्ति का उपयोग करके किसी दृश्य की layer एक छवि जोड़ सकते हैं:

myView.layer.contents = UIImage(named: "star")?.CGImage

ध्यान दें कि UIImage को CGImage ।

यदि आप छवि को अपनी परत में जोड़ना चाहते हैं, तो आप इसे इस तरह से कर सकते हैं:

let myLayer = CALayer()
let myImage = UIImage(named: "star")?.CGImage
myLayer.frame = myView.bounds
myLayer.contents = myImage
myView.layer.addSublayer(myLayer)

रूप को संशोधित करना

उपरोक्त कोड इस तरह से एक दृश्य बनाता है। हल्का नीला UIView और गहरे नीले रंग का तारा UIImage ।

जैसा कि आप देख सकते हैं, हालांकि, यह पिक्सेलयुक्त दिखता है। ऐसा इसलिए है क्योंकि UIImage UIView से छोटा है, इसलिए इसे देखने के लिए स्केल किया जा रहा है, जो कि डिफ़ॉल्ट है जिसे आप कुछ और निर्दिष्ट नहीं करते हैं।

नीचे दिए गए उदाहरण परत की contentsGravity पर विविधता दिखाते हैं। कोड इस तरह दिखता है:

myView.layer.contents = UIImage(named: "star")?.CGImage
myView.layer.contentsGravity = kCAGravityTop
myView.layer.geometryFlipped = true

IOS में, आप geometryFlipped संपत्ति को true पर सेट करना चाह सकते हैं यदि आप ऊपर या नीचे गुरुत्वाकर्षण के साथ कुछ भी कर रहे हैं, अन्यथा यह आपके द्वारा अपेक्षा के विपरीत होगा। (केवल गुरुत्वाकर्षण लंबवत रूप से फ़्लिप किया जाता है, सामग्री रेंडरिंग में नहीं। यदि आपको फ़्लिप की जा रही सामग्री से परेशानी हो रही है, तो यह स्टैक ओवरफ़्लो उत्तर देखें ।)

हर contentsGravity लिए नीचे दो UIView उदाहरण दिए गए contentsGravity , एक दृश्य UIImage से बड़ा है और दूसरा छोटा है। इस तरह आप स्केलिंग और गुरुत्वाकर्षण के प्रभावों को देख सकते हैं।

kCAGravityResize

यह डिफ़ॉल्ट है।

kCAGravityResizeAspect

kCAGravityResizeAspectFill

kCAGravityCenter

kCAGravityTop

kCAGravityBottom

kCAGravityLeft

kCAGravityRight

kCAGravityTopLeft

kCAGravityTopRight

kCAGravityBottomLeft

kCAGravityBottomRight

सम्बंधित

एक नाविक में ट्रांसफ़ॉर्म जोड़ना (अनुवाद, घूमना, स्केल करना)

मूल बातें

एक परत पर आप कई अलग-अलग परिवर्तन कर सकते हैं, लेकिन मूल हैं

अनुवाद (चाल)
स्केल
घुमाएँ

एक पर रूपांतरण करने के लिए CALayer , तो आप सेट परत transform के लिए एक करने के लिए संपत्ति CATransform3D प्रकार। उदाहरण के लिए, एक परत का अनुवाद करने के लिए, आप कुछ इस तरह करेंगे:

myLayer.transform = CATransform3DMakeTranslation(20, 30, 0)

शब्द Make को बदलने प्रारंभिक बनाने के लिए नाम में प्रयोग किया जाता है: CATransform3D अनुवाद करें। बाद में लागू होने वाले परिवर्तन Make छोड़ देते हैं। उदाहरण के लिए, इस घुमाव का अनुवाद द्वारा अनुसरण किया गया है:

let rotation = CATransform3DMakeRotation(CGFloat(30.0 * M_PI / 180.0), 20, 20, 0)
myLayer.transform = CATransform3DTranslate(rotation, 20, 30, 0)

अब जब हमारे पास एक परिवर्तन करने का आधार है, तो आइए देखें कि हर एक को कैसे करना है। सबसे पहले, हालांकि, मैं दिखाऊंगा कि जिस तरह से आप इसके साथ खेलना चाहते हैं, मैं कैसे इस परियोजना को स्थापित करता हूं।

सेट अप

निम्नलिखित उदाहरणों के लिए मैंने एक एकल दृश्य अनुप्रयोग स्थापित किया और स्टोरीबोर्ड में एक हल्के नीले रंग की पृष्ठभूमि के साथ एक UIView जोड़ा। मैंने निम्नलिखित कोड के साथ दृश्य नियंत्रक को देखने के लिए झुका दिया:

import UIKit

class ViewController: UIViewController {
    
    var myLayer = CATextLayer()
    @IBOutlet weak var myView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // setup the sublayer
        addSubLayer()
        
        // do the transform
        transformExample()
    }
    
    func addSubLayer() {
        myLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
        myLayer.backgroundColor = UIColor.blueColor().CGColor
        myLayer.string = "Hello"
        myView.layer.addSublayer(myLayer)
    }
    
    //******** Replace this function with the examples below ********

    func transformExample() {
        
        // add transform code here ...
        
        
    }

}

के कई अलग अलग प्रकार के होते हैं CALayer , लेकिन मैं उपयोग करने के लिए चुना है CATextLayer ताकि रूपांतरण नेत्रहीन अधिक स्पष्ट हो जाएगा।

अनुवाद करना

अनुवाद परिवर्तन परत को स्थानांतरित करता है। मूल वाक्यविन्यास है

CATransform3DMakeTranslation(tx: CGFloat, ty: CGFloat, tz: CGFloat)

जहाँ tx x निर्देशांक में परिवर्तन है, ty y में परिवर्तन है, और tz z में परिवर्तन है।

उदाहरण

आईओएस में समन्वित प्रणाली की उत्पत्ति बाएं शीर्ष पर है, इसलिए यदि हम लेयर 90 पॉइंट को दाईं ओर ले जाना चाहते हैं और 50 अंक नीचे हैं, तो हम निम्नलिखित कार्य करेंगे:

myLayer.transform = CATransform3DMakeTranslation(90, 50, 0)

टिप्पणियाँ

याद रखें कि आप इसे ऊपर दिए गए प्रोजेक्ट कोड में transformExample() विधि में पेस्ट कर सकते हैं।
चूंकि हम यहां दो आयामों से निपटने जा रहे हैं, tz 0 सेट है।
ऊपर की छवि में लाल रेखा मूल स्थान के केंद्र से नए स्थान के केंद्र तक जाती है। ऐसा इसलिए है क्योंकि एंकर बिंदु के संबंध में ट्रांसफ़ॉर्म किए जाते हैं और डिफ़ॉल्ट रूप से एंकर पॉइंट परत के केंद्र में होता है।

स्केल

पैमाने पर परत को फैला या फैलाया जाता है। मूल वाक्यविन्यास है

CATransform3DMakeScale(sx: CGFloat, sy: CGFloat, sz: CGFloat)

जहाँ sx , sy , और sz संख्याएँ हैं जिनके द्वारा क्रमशः x, y और z निर्देशांक को स्केल (गुणा) किया जाता है।

उदाहरण

यदि हम चौड़ाई को आधा करना और ऊँचाई को तीन गुना करना चाहते हैं, तो हम निम्नलिखित करेंगे

myLayer.transform = CATransform3DMakeScale(0.5, 3.0, 1.0)

टिप्पणियाँ

चूंकि हम केवल दो आयामों में काम कर रहे हैं, हम उन्हें अप्रभावित छोड़ने के लिए z निर्देशांक को 1.0 से गुणा करते हैं।
ऊपर की छवि में लाल बिंदु लंगर बिंदु का प्रतिनिधित्व करता है। ध्यान दें कि एंकर बिंदु के संबंध में स्केलिंग कैसे की जाती है। यही है, सब कुछ या तो लंगर बिंदु से दूर या दूर तक फैला हुआ है।

घुमाएँ

रोटेशन ट्रांसफॉर्मर एंकर पॉइंट (डिफ़ॉल्ट रूप से परत का केंद्र) के चारों ओर की परत को घुमाता है। मूल वाक्यविन्यास है

CATransform3DMakeRotation(angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)

जहां angle रेडियन में कोण है कि परत को घुमाया जाना चाहिए और x , y , और z कुल्हाड़ियों हैं जिनके बारे में घूमना है। एक अक्ष को 0 पर सेट करना उस विशेष अक्ष के चारों ओर एक रोटेशन को रद्द करता है।

उदाहरण

यदि हम एक परत को दक्षिणावर्त 30 डिग्री घुमाना चाहते हैं, तो हम निम्नलिखित कार्य करेंगे:

let degrees = 30.0
let radians = CGFloat(degrees * M_PI / 180)
myLayer.transform = CATransform3DMakeRotation(radians, 0.0, 0.0, 1.0)

टिप्पणियाँ

चूंकि हम दो आयामों में काम कर रहे हैं, हम केवल x अक्ष को z अक्ष के चारों ओर घुमाना चाहते हैं। इस प्रकार हम x और y को 0.0 सेट करते हैं और z को 1.0 सेट करते हैं।
इसने परत को एक दक्षिणावर्त दिशा में घुमाया। हम निर्धारित करके घुमाया वामावर्त हो सकता था z करने के लिए -1.0 ।
लाल बिंदु दिखाता है कि लंगर बिंदु कहां है। लंगर बिंदु के चारों ओर रोटेशन किया जाता है।

एकाधिक परिवर्तन

कई परिवर्तनों को संयोजित करने के लिए हम इस तरह का उपयोग कर सकते हैं

CATransform3DConcat(a: CATransform3D, b: CATransform3D)

हालाँकि, हम बस एक के बाद एक करेंगे। पहला ट्रांसफॉर्मेशन Make को अपने नाम से उपयोग करेगा। निम्नलिखित परिवर्तन Make उपयोग नहीं करेंगे, लेकिन वे पिछले परिवर्तन को एक पैरामीटर के रूप में लेंगे।

उदाहरण

इस बार हम पिछले सभी परिवर्तनों के तीनों को मिलाते हैं।

let degrees = 30.0
let radians = CGFloat(degrees * M_PI / 180)

// translate
var transform = CATransform3DMakeTranslation(90, 50, 0)

// rotate
transform = CATransform3DRotate(transform, radians, 0.0, 0.0, 1.0)

// scale
transform = CATransform3DScale(transform, 0.5, 3.0, 1.0)

// apply the transforms
myLayer.transform = transform

टिप्पणियाँ

आदेश है कि मामलों में परिवर्तन किया जाता है।
लंगर बिंदु (लाल बिंदु) के संबंध में सब कुछ किया गया था।

एंकर प्वाइंट और स्थिति के बारे में एक नोट

हमने एंकर बिंदु को बदले बिना अपने सभी परिवर्तनों को ऊपर किया। कभी-कभी इसे बदलना आवश्यक होता है, हालांकि, जैसे कि आप केंद्र के अलावा किसी अन्य बिंदु पर घूमना चाहते हैं। हालाँकि, यह थोड़ा मुश्किल हो सकता है।

लंगर बिंदु और स्थिति दोनों एक ही स्थान पर हैं। लंगर बिंदु को परत की समन्वय प्रणाली की एक इकाई के रूप में व्यक्त किया गया है (डिफ़ॉल्ट 0.5, 0.5 ) और स्थिति सुपरलेयर के समन्वय प्रणाली में व्यक्त की गई है। उन्हें इस तरह सेट किया जा सकता है

myLayer.anchorPoint = CGPoint(x: 0.0, y: 1.0)
myLayer.position = CGPoint(x: 50, y: 50)

यदि आप केवल स्थिति को बदलने के बिना लंगर बिंदु सेट करते हैं, तो फ्रेम बदल जाता है ताकि स्थिति सही स्थान पर हो। या अधिक सटीक रूप से, फ्रेम को नए एंकर बिंदु और पुरानी स्थिति के आधार पर पुनर्गणना किया जाता है। यह आमतौर पर अप्रत्याशित परिणाम देता है। निम्नलिखित दो लेखों में इसकी उत्कृष्ट चर्चा है।

यह सभी देखें

यह उदाहरण मूल रूप से इस स्टैक ओवरफ्लो उदाहरण से आता है।

एनिमेशन अक्षम करें

CALayer प्रॉपर्टी एनिमेशन डिफ़ॉल्ट रूप से सक्षम हैं। जब यह अवांछनीय है, तो उन्हें निम्नानुसार अक्षम किया जा सकता है।

तीव्र

CATransaction.begin()
CATransaction.setDisableActions(true)

// change layer properties that you don't want to animate

CATransaction.commit()

उद्देश्य सी

[CATransaction begin];
[CATransaction setDisableActions:YES];

// change layer properties that you don't want to animate

[CATransaction commit];

कोने पर गोलाकार आकृति

layer.masksToBounds = true;
layer.cornerRadius = 8;

छैया छैया

आप अपनी छाया को कॉन्फ़िगर करने के लिए प्रत्येक परत पर 5 गुणों का उपयोग कर सकते हैं:

shadowOffset - यह गुण आपकी छाया को बाएँ / दाएँ या ऊपर / नीचे ले जाता है

self.layer.shadowOffset = CGSizeMake(-1, -1); // 1px left and up

self.layer.shadowOffset = CGSizeMake(1, 1); // 1px down and right

shadowColor - यह आपकी छाया का रंग सेट करता है

self.layer.shadowColor = [UIColor blackColor].CGColor;

shadowOpacity - यह छाया की अपारदर्शिता है, 0 से 1

self.layer.shadowOpacity = 0.2;

shadowRadius - यह धब्बा त्रिज्या है (स्केच या फ़ोटोशॉप में धब्बा संपत्ति के बराबर)

self.layer.shadowRadius = 6;

shadowPath - यह प्रदर्शन के लिए एक महत्वपूर्ण संपत्ति है, जब shadowPath आईओएस दृश्य के अल्फा चैनल पर छाया को आधार बनाता है, जो अल्फा के साथ एक जटिल पीएनजी के साथ प्रदर्शन गहन हो सकता है। यह गुण आपको अपनी छाया के लिए एक आकृति को मजबूर करने देता है और इसके कारण अधिक प्रदर्शन करने वाला होता है।

उद्देश्य सी

self.layer.shadowPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; //this does a circular shadow

स्विफ्ट 3

self.layer.shadowPath = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 100, height: 100)).cgPath

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

iOS
CALayer

खोज…

एक कायर बनाना

CAEmitterLayer के साथ कण बनाना

कस्टम छवि के साथ एमिटर व्यू

एक गेरू में एक UIImage कैसे जोड़ें

रूप को संशोधित करना

सम्बंधित

टिप्पणियाँ

एक नाविक में ट्रांसफ़ॉर्म जोड़ना (अनुवाद, घूमना, स्केल करना)

मूल बातें

सेट अप

अनुवाद करना

स्केल

घुमाएँ

एकाधिक परिवर्तन

एंकर प्वाइंट और स्थिति के बारे में एक नोट

यह सभी देखें

एनिमेशन अक्षम करें

कोने पर गोलाकार आकृति

छैया छैया