iOS => CALayer

CALayer 만들기

CALayer를 만들고 프레임을 다음과 같이 설정할 수 있습니다 :

빠른:

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

목표 -C :

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

그런 다음이를 기존 CALayer에 하위 계층으로 추가 할 수 있습니다.

빠른:

existingLayer.addSublayer(layer)

목표 -C :

[existingLayer addSublayer:layer];

노트 :

이렇게하려면 QuartzCore 프레임 워크를 포함시켜야합니다.

빠른:

 @import QuartzCore

목표 -C

#import <QuartzCore/QuartzCore.h>

CAEmitterLayer로 입자 만들기

CAEmitterLayer 클래스는 Core Animation을위한 파티클 이미 터 시스템을 제공합니다. 파티클은 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"이미지를 추가하거나 confetti.contentsRect로 rect를 정의해야합니다.

CALayer에 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 입니다.

보시다시피, 그것이 pixelated 보인다. 이것은 UIImage 가 UIView 보다 작아서보기를 채우도록 크기가 조정되기 때문입니다. 기본값은보기를 채우는 것이므로 다른 것을 지정하지 않습니다.

아래 예제는 레이어의 contentsGravity 속성에 대한 변형을 보여줍니다. 코드는 다음과 같습니다.

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

iOS에서는 위 또는 아래 중력으로 작업하는 경우 geometryFlipped 속성 을 true 로 설정해야 geometryFlipped . 그렇지 않으면 예상 한 것과 반대가됩니다. 내용이 뒤집 혔을 때 문제가 발생 하면 Stack Overflow 응답을 참조하십시오.

아래의 두 UIView 예제는 모든 contentsGravity 설정에 대해 하나의보기가 UIImage 보다 크고 다른보기는 더 작습니다. 이렇게하면 크기 조정 및 중력 효과를 볼 수 있습니다.

kCAGravityResize

이것이 기본값입니다.

kCAGravityResizeAspect

kCAGravityResizeAspectFill

kCAGravityCenter

kCAGravityTop

kCAGravityBottom

kCAGravityLeft

kCAGravityRight

kCAGravityTopLeft

kCAGravityTopRight

kCAGravityBottomLeft

kCAGravityBottomRight

노트

이 예제는 원래이 스택 오버플로 응답 에서옵니다.

CALayer에 변환 추가 (변환, 회전, 크기 조정)

기초

레이어에서 수행 할 수있는 여러 가지 변형이 있지만 기본적인 것들은 다음과 같습니다.

번역하다 (이동하다)
규모
회전하다

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의 변화입니다.

예

iOS에서는 좌표계의 원점이 왼쪽 상단에 있으므로 레이어를 오른쪽으로 90 포인트, 아래로 50 포인트 이동하려면 다음을 수행합니다.

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

노트

위의 프로젝트 코드에서 transformExample() 메서드에이를 붙여 넣을 수 있음을 기억하십시오.
여기서 2 차원을 다루기 때문에, tz 는 0 으로 설정됩니다.
위 이미지의 빨간색 선은 원래 위치의 중앙에서 새 위치의 중심으로 이동합니다. 이는 앵커 포인트와 관련하여 변형이 수행되고 앵커 포인트가 기본적으로 레이어의 중심에 있기 때문입니다.

규모

스케일 변형은 레이어를 늘이거나 찌그러 뜨립니다. 기본 구문은 다음과 같습니다.

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

여기서, sx , sy 및 sz 는 각각 x, y 및 z 좌표를 스케일 (곱하기) 할 수입니다.

예

너비를 반으로하고 높이를 3 배로 설정하려면 다음을 수행합니다.

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

노트

우리는 단지 2 차원에서만 작업하기 때문에 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)

노트

우리는 두 가지 차원에서 작업하고 있기 때문에, xy 평면을 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)

위치를 변경하지 않고 앵커 포인트 만 설정하면 프레임이 바뀌어 위치가 올바른 위치에있게됩니다. 또는 더 정확하게는 새 앵커 포인트와 이전 위치를 기반으로 프레임이 다시 계산됩니다. 이것은 대개 예상치 못한 결과를 낳습니다. 뒤에 오는 2 개의 기사에는 이것에 우수한 토론이있다.

또한보십시오

이 예제는 원래이 스택 오버플로 예제 에서 비롯된 것입니다.

애니메이션 사용 중지

CALayer 속성 애니메이션은 기본적으로 사용됩니다. 이것이 바람직하지 않은 경우 다음과 같이 비활성화 할 수 있습니다.

빠른

CATransaction.begin()
CATransaction.setDisableActions(true)

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

CATransaction.commit()

목표 -C

[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 - 흐림 반경입니다 (Sketch 또는 Photoshop의 blur 속성과 동일).

self.layer.shadowRadius = 6;

shadowPath - 설정되지 않은 iOS가 뷰의 알파 채널에서 그림자를 기반으로 할 때 성능에 중요한 속성입니다. 알파가있는 복잡한 PNG를 사용하면 성능이 많이 저하 될 수 있습니다. 이 속성을 사용하면 그림자로 인해 모양이 강제로 적용되고 그로 인해 더 많은 성과를 낼 수 있습니다.