Temelleri
Orada farklı bir dizi, bir katman üzerinde yapabileceği dönüşümleri vardır, ancak temel olanları
- çevirmek (hareket)
- ölçekli
döndürmek vardır
CALayer dönüşümü yapmak için, katmanın transform özelliğini CATransform3D türüne ayarlarsınız.
myLayer.transform = CATransform3DMakeTranslation(20, 30, 0)
kelime Make dönüşümü baş harfini oluşturmak için isim kullanılır: Örneğin, bir katmanı çevirmek için, böyle bir şey yapacağını yaptı olun CATransform3D. Uygulanan müteakip dönüşümler, Make'u çıkarır. Örneğin, bir çeviri ardından bu rotasyon Bkz: Biz bir dönüşümü nasıl temelini göre şimdi
let rotation = CATransform3DMakeRotation(CGFloat.pi * 30.0/180.0, 20, 20, 0)
myLayer.transform = CATransform3DTranslate(rotation, 20, 30, 0)
, birbirlerinin birini nasıl bazı örneklere bakalım. Birincisi, bununla birlikte oynamak istediğinizde projeyi nasıl kurduğumu göstereceğim.
Kur ben tek görüntü Uygulamasını kurmak ve film şeridine açık mavi arka plana sahip bir UIView eklendi aşağıdaki örnekler için
.Aşağıdaki kod ile görüş denetleyiciye görünümü bağladım:
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 ...
}
}
There are many different kinds of CALayer ama çok dönüşümleri görsel daha net olacağını CATextLayer kullanmayı tercih etti.
Çevir
Çevirme dönüşümü katmanları hareket ettirir. Temel kullanımı tx x koordinatları değişikliği olan
CATransform3DMakeTranslation(tx: CGFloat, ty: CGFloat, tz: CGFloat)
, ty y değişimdir ve tz z değişimdir.
Örnek
IOS olarak
koordinat sisteminin orijini sol üst köşesinde, yani sağa doğru 90 puan ve 50 puan aşağı katman hareket istiyorsa, biz olur
myLayer.transform = CATransform3DMakeTranslation(90, 50, 0)
Notlar
: aşağıdakileri yapın
- Bunu, yukarıdaki proje kodunda
transformExample() yöntemine yapıştırabileceğinizi unutmayın.
- Burada iki boyutla baş edeceğimiz için,
tz, 0 olarak ayarlanmıştır.
- Yukarıdaki görüntüdeki kırmızı çizgi, orijinal konumunun merkezinden yeni konumun merkezine gider. Bunun nedeni, dönüşümlerin bağlantı noktasıyla ilişkili olarak yapılması ve varsayılan olarak bağlantı noktasının merkezinde çapa noktasının bulunmasıdır.
Ölçek
ölçekli uzanır transforme veya katmanı squishes. Temel kullanımı sx, sy ve sz (çarpma) x, y ve z, sırasıyla koordinatları ölçek ile sayılardır
CATransform3DMakeScale(sx: CGFloat, sy: CGFloat, sz: CGFloat)
olup. yarım genişliğinin istedik ve üçlü yükseklik, aşağıdaki
myLayer.transform = CATransform3DMakeScale(0.5, 3.0, 1.0)
Notlar yapsaydı
Örnek
- biz olduklarından sadece iki boyutta çalışıyor, Z koordinatlarını sadece etkilenmeden bırakmak için 1.0 ile çarpıyoruz.
- Yukarıdaki resimde kırmızı nokta, tutturma noktasını temsil eder. Ölçeklemenin çapa noktasına göre nasıl yapıldığına dikkat edin. Yani, her şey ya çapa noktasına doğru ya da uzağa doğru gerilir.Döndürme
dönme dönüşümü
bağlantı noktasının etrafında bir tabaka (varsayılan tabakanın merkezi) dönmektedir. Temel kullanımı angle tabaka döndürülebilir gerektiği radyan cinsinden açısına ve x, y olan
CATransform3DMakeRotation(angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)
ve z dönmesine eksenlerdir. Bir ekseni 0 olarak ayarlamak, o belirli eksen etrafında bir dönüşü iptal eder. Biz katman saat yönünde 30 derece döndürmek istiyorsa
Örnek
, biz aşağıdakileri:
let degrees = 30.0
let radians = CGFloat(degrees * Double.pi/180)
myLayer.transform = CATransform3DMakeRotation(radians, 0.0, 0.0, 1.0)
Notlar
- biz olduklarından iki boyutta çalışıyoruz, sadece istiyoruz z ekseninin etrafında döndürülecek xy düzlemi. Böylece
x ve y'u 0.0'a ayarladık ve z değerini 1.0 olarak ayarladık.
- Bu, katmanı saat yönünde döndürdü.
z ayarını -1.0 olarak ayarlayarak saat yönünün tersine döndürülebilirdik.
- Kırmızı nokta, tutturma noktasının nerede olduğunu gösterir. Rotasyon, çapa noktasının etrafında yapılır.
Çoklu biz Ancak bu
CATransform3DConcat(a: CATransform3D, b: CATransform3D)
gibi concatination kullanabilirsiniz birden dönüşümleri birleştirmek amacıyla
dönüşümleri, sadece birbiri ardına yapacağız. İlk dönüşüm, adında Make kullanacaktır. Aşağıdaki dönüşümler Make kullanmaz, ancak önceki dönüştürmeyi parametre olarak alırlar.
Örnek
önceki dönüşümlerin her üç birleştiren bu kez.
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
Notlar
- dönüşümler konularda yapıldığı söylenir sırası.
- Her şey çapa noktasına göre (kırmızı nokta) yapıldı.
bir çapa noktası hakkında Not ve Pozisyon
Biz yaptığımız çapa noktasını değiştirmeden yukarıdaki tüm dönüşümler.Bazen, merkezin dışında başka bir nokta etrafında dönmek isterseniz, onu değiştirmek gerekir. Ancak, bu biraz zor olabilir.
Bağlantı noktası ve konumu her ikisi de aynı yerde. Bağlantı noktası, katmanın koordinat sisteminin bir birimi olarak ifade edilir (varsayılan değer 0.5, 0.5) ve konum, süper koordinatın koordinat sisteminde ifade edilir. pozisyon doğru yerde olacak böylece ancak o zaman, pozisyon değiştirmeden çerçeve değişiklikleri çapa noktasını ayarlarsanız Onlar bu
myLayer.anchorPoint = CGPoint(x: 0.0, y: 1.0)
myLayer.position = CGPoint(x: 50, y: 50)
gibi ayarlanabilir. Ya da daha doğrusu, çerçeve yeni çapa noktası ve eski pozisyona göre yeniden hesaplanır. Bu genellikle beklenmedik sonuçlar verir. Aşağıdaki iki makalede bunun mükemmel bir tartışması vardır.
bakınız