iOS
CALayer

Android C# Language Cordova firebase HTML JavaScript Objective-C Language react-native Swift Language Xamarin.iOS
サーチ…


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です。

CALayerのスター画像

ご覧のように、それはピクセル化して見えます。これはUIImageがUIViewよりも小さいので、ビューを満たすように拡大されているためです。これは、デフォルトでは何も指定していません。

以下の例は、レイヤのcontentsGravityプロパティのバリエーションを示しています。コードは次のようになります。 

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

iOSでは、上または下の重力で何かをしている場合、 geometryFlippedプロパティをtrueに設定することができます。そうでない場合は、期待通りのものとなります。重力だけがコンテンツのレンダリングではなく、垂直方向に反転されます。コンテンツを反転させることに問題がある場合は、 このStack Overflowの答えを参照してください。

以下の2つのUIView例は、 contentsGravity設定ごとにあります.1つのビューはUIImageよりも大きく、もう1つは小さくなっています。この方法でスケーリングと重力の効果を見ることができます。

kCAGravityResize

これがデフォルトです。

kCAGravityResize

kCAGravityResizeAspect

kCAGravityResizeAspect

kCAGravityResizeAspectFill

kCAGravityResizeAspectFill

kCAGravityCenter

kCAGravityCenter

kCAGravityTop

kCAGravityTop

kCAGravityBottom

kCAGravityBottom

kCAGravityLeft

kCAGravityLeft

kCAGravityRight

kCAGravityRight

kCAGravityTopLeft

kCAGravityTopLeft

kCAGravityTopRight

kCAGravityTopRight

kCAGravityBottomLeft

kCAGravityBottomLeft

kCAGravityBottomRight

kCAGravityBottomRight

関連する

ノート

CALayerに変換を追加する（変換、回転、スケール）

基本

レイヤーにはさまざまな変換がありますが、基本的な変換は次のとおりです。

  • 翻訳する（移動する）
  • 規模
  • 回転する

基本変換

CALayerでトランスフォームを行うには、レイヤのtransformプロパティをCATransform3Dタイプに設定します。たとえば、レイヤーを変換するには、次のようにします。 

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

Makeという語は、最初の変換を作成するための名前に使用されます：CATransform3D Make Translation。適用される後続の変換では、 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設定され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)

ノート

  • 2つの次元で作業しているので、xy平面をz軸の周りに回転させたいだけです。したがって、 xとyを0.0に設定し、 zを1.0設定します。
  • これにより、レイヤーが時計回りに回転しました。 zを-1.0設定すると反時計回りに回転している可能性があります。
  • 赤い点は、アンカーポイントがどこにあるかを示します。回転はアンカーポイントの周りで行われます。

複数の変換

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

CATransform3DConcat(a: CATransform3D, b: CATransform3D)

しかし、私たちは次々にやります。最初の変換では、その名前にMakeを使用します。次の変換ではMake使用しませんが、以前の変換をパラメータとして使用します。

例

複数の変換例

今回は、以前の3つの変換をすべて結合します。 

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つの記事はこれに関する優れた議論をしています。

も参照してください

この例はもともとこのStack Overflowの例に由来しています。

アニメーションを無効にする

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を使用するとパフォーマンスがshadowPathなります。このプロパティを使用すると、シャドウのシェイプを強制的に強制し、シェイプのためにより効果的になります。

目標-C 

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