Podstawy

Istnieje wiele różnych przekształceń, które można wykonać na warstwie, ale podstawowe to

• translate (move)
• skala
• rotate

Aby wykonać transformacje na CALayer, należy ustawić właściwość transform warstwy na typ CATransform3D. Na przykład, aby przetłumaczyć warstwę, wykonałbyś coś takiego:

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

Słowo Make jest używane w nazwie do tworzenia przekształcenia początkowego: CATransform3DMake Tłumaczenie. Kolejne transformaty, które są stosowane, pomijają Make. Zobacz, na przykład, ten obrót, po którym następuje tłumaczenie:

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

Teraz, gdy mamy podstawy, jak dokonać transformacji, spójrzmy na kilka przykładów, jak zrobić każdą z nich. Najpierw jednak pokażę, jak skonfigurowałem projekt, gdybyś też chciał się nim bawić.

Setup

W poniższych przykładach skonfigurowałem aplikację Single View i dodałem UIView z jasnoniebieskie tło do storyboardu. PodĹ 'Ä ... czyĹ' em widok do kontrolera widoku nastÄ ™ pujÄ ... cym kodem:

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.blue.cgColor
        myLayer.string = "Hello"
        myView.layer.addSublayer(myLayer)
    }

    //******** Replace this function with the examples below ********

    func transformExample() {

        // add transform code here ...


    }

} 

Istnieje wiele różnych rodzajów CALayer, ale zdecydowałem się użyć CATextLayer, aby transformaty były bardziej wyraźne wizualnie.

Tłumacz

Transformata translacji przesuwa warstwę. Podstawowa składnia to

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

Gdzie tx jest zmianą współrzędnych x, ty jest zmianą w y, a tz jest zmianą w z.

Przykład

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

Uwagi

• pamiętaj, że możesz to wkleić do metody transformExample() w powyższym kodzie projektu.
• ponieważ mamy tu do czynienia z dwoma wymiarami, tz jest ustawione na 0.
• czerwona linia w powyższy obraz przechodzi od środka oryginalnej lokalizacji do środka nowej lokalizacji. Dzieje się tak dlatego, że transformacje są wykonywane w odniesieniu do punktu kontrolnego, a punkt kontrolny domyślnie znajduje się w środku warstwy.

Skala

Transformata skali rozciąga lub zgniata warstwę. Podstawowa składnia to

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

Gdzie sx, sy, i sz są liczbami, przez które można skalować (mnożyć) odpowiednio współrzędne x, y i Z.

Przykład

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

Uwagi

• ponieważ pracujemy tylko w dwóch wymiarach, po prostu pomnożymy współrzędne z przez 1.0, aby pozostawić je bez zmian.
• czerwona kropka na powyższym obrazku reprezentuje punkt kontrolny. Zwróć uwagę, jak skalowanie odbywa się w odniesieniu do punktu kontrolnego. Oznacza to, że wszystko jest albo rozciągnięte w kierunku lub z dala od punktu kotwiczenia.

Rotate

Transformata obrotu obraca warstwę wokół punktu kontrolnego (domyślnie środek warstwy). Podstawowa składnia to

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

Gdzie angle jest kątem w radianach, że warstwa powinna być obrócona i x, y, i z są osiami, wokół których można się obracać. Ustawienie osi na 0 anuluje obrót wokół tej konkretnej oś.

Przykład

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

Uwagi

• ponieważ pracujemy w dwóch wymiarach, chcemy tylko, aby płaszczyzna xy była obracana wokół osi Z. Tak więc ustawiamy x i y na 0.0 i ustawiamy z na 1.0.
To obróciło warstwę w kierunku zgodnym z ruchem wskazówek zegara. Możemy obracać się w kierunku przeciwnym do ruchu wskazówek zegara, ustawiając z na -1.0.
• czerwona kropka pokazuje, gdzie znajduje się punkt kontrolny. Obrót odbywa się wokół punktu kontrolnego.

Wiele przekształceń

W celu połączenia wielu przekształceń możemy użyć konkatinacji w ten sposób

CATransform3DConcat(a: CATransform3D, b: CATransform3D)

Przykład

Tym razem połączymy wszystkie trzy poprzednie transformacje.

let degrees = 30.0
let radians = CGFloat(degrees * Double.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

Uwagi

• kolejność dokonywania przekształceń w sprawach.
• wszystko zostało zrobione w odniesieniu do punktu kontrolnego (czerwona kropka).

Uwaga o punkcie kotwiczenia i pozycji

Wykonaliśmy wszystkie nasze transformacje powyżej bez zmiany punktu kotwiczenia. Czasami konieczna jest zmiana to, chociaż, jeśli chcesz obrócić wokół innego punktu poza centrum. Jednak może to być trochę trudne.

Punkt kontrolny i pozycja znajdują się w tym samym miejscu. Punkt kontrolny jest wyrażony jako jednostka układu współrzędnych warstwy (domyślnie 0.5, 0.5), a pozycja jest wyrażona w układzie współrzędnych warstwy. Można je ustawić tak:

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

Jeśli ustawisz tylko punkt kontrolny bez zmiany pozycji, to ramka zmieni się tak, że pozycja będzie we właściwym miejscu. A dokładniej, ramka jest przeliczana na podstawie nowego punktu kotwiczenia i starej pozycji. Zwykle daje to nieoczekiwane rezultaty. Poniższe dwa artykuły mają doskonałą dyskusję na ten temat.

• o punkcie kotwiczenia
• Translate rotate translate?

Zobacz też

• obramowanie, zaokrąglone rogi i cień na CALayer
• Korzystanie z obramowania z Ścieżka Beziera dla warstwy