2015-12-23 4 views
13

この質問を書く前に、IましCALayerでトランスフォームを行う方法は?

から LayerPlayer projectを実行クォーツ2Dプログラミングガイドで Transforms documentationを読みます

しかし、私はまだ基​​本的な変換を行う方法を理解するのに苦労しています。翻訳、回転、スケールの説明と簡単な例を見つけることは困難でした。

今日私は結局は座ってテストプロジェクトを作り、それを理解することに決めました。私の答えは以下の通りです。

注:

  • 私はスウィフトを行うが、他の誰かが私のゲストも、Objective-Cのコードを追加したい場合。
  • この時点では、私は2D変換の理解にのみ関心があります。

答えて

51

基本

異なるの数はあなたがレイヤー上で行うことができます変換しますが、基本的なものは、(移動)を変換

  • ているがあります
  • 規模
  • を回転させます

enter image description here

CALayerのトランスフォームを実行するには、レイヤーのtransformプロパティをCATransform3Dタイプに設定します。例えば、層を変換するために、あなたはこのようなものだろう:

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

を単語Makeは、最初の変換を作成するための名前で使用されます。CATransform3D 翻訳を行います。その後に適用される変換では、Makeは省略されます。参照、例えば、翻訳に続いて、この回転:

let rotation = CATransform3DMakeRotation(CGFloat.pi * 30.0/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.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、私は変換が視覚的に、より明確になるようにCATextLayerを使用することにしました。

翻訳

変換トランスフォームはレイヤーを移動します。基本的な構文はtxは、x座標の変化、tyがYの変化であり、そしてtzがZの変化である

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

あります。

IOSの

enter image description here

座標系の原点左上にあるので、我々は、右に90点、50点ダウン層を移動したい場合、我々は希望

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

ノート

    :次の手順を実行します3210
  • これを上記のプロジェクトコードのtransformExample()メソッドに貼り付けることができます。
  • tzはここでは2次元を扱うため、0に設定します。
  • 上記の画像の赤い線は、元の場所の中心から新しい場所の中心に向かっています。これは、アンカーポイントに関連して変換が行われ、デフォルトでアンカーポイントがレイヤーの中央にあるためです。

スケール

スケールはストレッチを変換または層をsquishes。基本的な構文は、sxsy、及びszは(乗算)のx、y、zはそれぞれ座標スケーリングすることにより、数ある

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

あります。

enter image description here

我々は半分の幅と三重の高さに望んでいた場合、我々はしているので、我々は次のよう

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

ノート

  • を行うだろう2次元でのみ動作し、 z座標に1.0を掛けて、影響を受けないようにします。
  • 上の画像の赤い点はアンカーポイントを表します。アンカーポイントに関連してスケーリングがどのように行われるかに注目してください。つまり、すべてがアンカーポイントに向かってまたはアンカーポイントから遠ざかる方向に伸びます。

回転

回転変換は、アンカーポイント(デフォルトでは層の中心)の周囲に層を回転させます。基本的な構文はangle層が回転されるべきであることをラジアン単位の角度であり、xy、及びzを回転さ約軸である

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

あります。軸を0に設定すると、その特定の軸の周りの回転がキャンセルされます。我々は層を時計回りに30度回転したい場合

enter image description here

、我々は次の操作を行います:

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

ノートを

  • 私たちがしているので、 2つの次元で働くxy平面はz軸周りに回転します。したがって、xy0.0に設定し、z1.0と設定しました。
  • これで、レイヤーが時計回りに回転しました。 z-1.0に設定すると、反時計回りに回転している可能性があります。
  • 赤い点は、アンカーポイントの位置を示します。回転はアンカーポイントの周りで行われます。我々はしかし、私たちは次々に行います。この

    CATransform3DConcat(a: CATransform3D, b: CATransform3D) 
    

    のような連結のを使用することができます複数の変換を組み合わせるために

複数の変換

。最初の変換では、その名前にMakeが使用されます。次の変換ではMakeは使用されませんが、以前の変換がパラメータとして使用されます。

enter image description here

我々は以前の変換のすべての3つを組み合わせたこの時間。

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 

ノート

  • 変換が問題に行われる順序。
  • アンカーポイント(赤い点)に関連してすべてが行われました。

アンカーポイントに関する注意事項と位置

私たちは、アンカーポイントを変更することなく、上記のすべての私たちの変換を行いました。しかし、それを変更する必要がある場合もありますが、中心以外の何かの点を中心に回転させたい場合もあります。しかし、これはちょっと難しいかもしれません。

アンカーポイントと位置は同じ場所にあります。アンカーポイントは、レイヤの座標系の単位(デフォルトは0.5, 0.5)で表され、位置はスーパーレイヤの座標系で表されます。位置は右のスポットになるように、あなただけの、フレームの変更、位置を変更することなく、アンカーポイントを設定した場合、彼らはこの

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

のように設定することができます。正確には、新しいアンカーポイントと古い位置に基づいてフレームが再計算されます。これは通常予期しない結果をもたらします。以下の2つの記事はこれに関する優れた議論をしています。

も参照してください。
関連する問題