トランスフォームと3Dエフェクト
アフィン変換や3D変換を適用します。
「トランスフォームと3Dエフェクト」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
トランスフォームで移動と変形を行う
transform は、bounds を変更せずにレイヤーを移動、拡大縮小、回転、せん断します。Core Animation は 2D の CGAffineTransform と 3D の CATransform3D の両方をサポートします。
2D アフィントランスフォーム
CGAffineTransform は平面上のトランスフォームを扱います。連結によって組み合わせられますが、順序が重要です。
import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)CATransform3D
CATransform3D は、真の 3D を可能にする 4x4 行列です。CATransform3DIdentity から始め、空間内で移動、拡大縮小、回転を適用します。
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t3D 回転
CATransform3DRotate(t, angle, x, y, z) を使うと、任意の軸を中心に回転できます。y 軸を中心に回転するとカードが裏返り、x 軸を中心に回転すると手前に傾きます。
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yパースペクティブ
単純な 3D 回転は、パースペクティブがなければ平面的に見えます。奥行きを加えるには、identity 行列の m34 要素を小さな負の値（約 -1/500）に設定します。
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)m34 が奥行きを作る理由
m34 の項によって、x と y が奥行きで除算されるため、遠くにある点ほど小さくなります。絶対値が小さい値（分母が大きい値）では控えめなパースペクティブになり、大きい値では誇張されます。
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0アンカーポイントとトランスフォーム
トランスフォームは anchorPoint を中心に行われます。カードを左端を中心に回転させるには、まず anchorPoint を (0, 0.5) に設定してください。
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)トランスフォームをアニメーションする
トランスフォーム全体をアニメーションできます。transform キーパスをアニメーションするか、単一の軸だけを対象にする transform.rotation.y のようなサブキーを使います。
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")サブレイヤーの変形
親レイヤーに sublayerTransform を設定すると、すべての子レイヤーにまとめて遠近感を適用できます。3Dコンテナやカルーセルに便利です。
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPositionと奥行きのソート
zPosition は3D空間での描画順を制御します。値が大きいほど手前に描画されます。回転と組み合わせると、レイヤーが重なり合う3Dシーンを作成できます。
frontCard.zPosition = 10
backCard.zPosition = 0変形の組み合わせ
変形を連結して効果を組み合わせます。行列の乗算は可換ではないため、回転してから拡大する場合と、拡大してから回転する場合では結果が異なります。
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)理解度チェック：変形
3D変形についての理解度を確認します。
まとめ：変形と3Dエフェクト
変形は境界を変更せずにレイヤーの形状を変えます。2Dには CGAffineTransform、本格的な3Dには CATransform3D を使用します。m34（およそ -1/500）を設定して奥行きを加え、anchorPoint で基準点を指定し、sublayerTransform でコンテナに遠近感を適用します。
変形全体または各軸をアニメーション化し、zPosition で奥行き順を設定します。変形を組み合わせる順序が重要であることも覚えておいてください。
よくある質問
「トランスフォームと3Dエフェクト」レッスンは無料ですか？
はい。「トランスフォームと3Dエフェクト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「トランスフォームと3Dエフェクト」で何を学びますか？
アフィン変換や3D変換を適用します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「トランスフォームと3Dエフェクト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- CALayerの基礎
- 暗黙的アニメーションと明示的アニメーション
- トランスフォームと3Dエフェクト
- Core Graphicsによるカスタム描画