UIViewでパースペクティブ変換を実行したい(カバーフローで見られるような)
これが可能かどうか誰かが知っていますか?
私はCALayer
すべての実用的なプログラマーであるCore Animationポッドキャストを使用して調査しましたが、iPhoneでこの種の変換を作成する方法についてはまだ明確ではありません。
ヘルプ、ポインタ、またはサンプルのコードスニペットをいただければ幸いです。
UIViewでパースペクティブ変換を実行したい(カバーフローで見られるような)
これが可能かどうか誰かが知っていますか?
私はCALayer
すべての実用的なプログラマーであるCore Animationポッドキャストを使用して調査しましたが、iPhoneでこの種の変換を作成する方法についてはまだ明確ではありません。
ヘルプ、ポインタ、またはサンプルのコードスニペットをいただければ幸いです。
回答:
ベンが言っUIView's
たCATransform3D
ように、を実行するためにa を使用して、レイヤーを操作する必要がありlayer's
rotation
ます。ここで説明するように、パースペクティブを機能させるコツcells
は、CATransform3D
(m34)のマトリックスの1つに直接アクセスすることです。マトリックスの数学は私のものではなかったので、これが機能する理由を正確に説明することはできませんが、機能します。最初の変換では、この値を負の割合に設定してから、レイヤー回転変換をそれに適用する必要があります。また、次のこともできるはずです。
Objective-C
UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
Swift 5.0
if let myView = self.subviews.first {
let layer = myView.layer
var rotationAndPerspectiveTransform = CATransform3DIdentity
rotationAndPerspectiveTransform.m34 = 1.0 / -500
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
layer.transform = rotationAndPerspectiveTransform
}
これにより、回転ごとにレイヤー変換がゼロから再構築されます。
これの完全な例(コード付き)はここにあります。ここではCALayers
、Bill Dudneyの例に基づいて、タッチベースの回転とスケーリングをいくつか実装しました。プログラムの最新バージョンは、ページの最下部にあり、この種のパースペクティブ操作を実装しています。コードは読みやすいものでなければなりません。
sublayerTransform
あなたの応答を参照するには、あなたのサブレイヤに適用される変換ですUIView's
CALayer
。サブレイヤーがない場合でも、心配する必要はありません。私の例でCALayers
は、回転している1つのレイヤー内に2 つのレイヤーが含まれているため、sublayerTransformを使用しています。
UIViewの変換プロパティに直接適用されるCore Graphics(Quartz、2Dのみ)変換のみを使用できます。カバーフローで効果を得るには、3次元空間に適用されるCATransform3Dを使用する必要があります。これにより、目的のパースビューを提供できます。CATransform3Dはビューにではなくレイヤーにのみ適用できるため、レイヤーに切り替える必要があります。
Xcodeに付属する「CovertFlow」サンプルを確認してください。これはMac専用です(つまり、iPhone向けではありません)が、多くの概念はうまく移行します。
ブラッドの答えに加え、具体的な例を示すために、私は同様のトピックに関する別の投稿で自分の答えを借りています。私の答えでは、私はあなたができることを、簡単なスウィフトの遊び場を作成してダウンロードしてプレイ私は層の簡単な階層でのUIViewの遠近効果を作成する方法を示し、そして私が使用しての間で異なる結果を示している、transform
としますsublayerTransform
。見てみな。
これが投稿の画像の一部です。
iCarousel SDKを使用して正確なカルーセル効果を得ることができます。
無料の素晴らしいiCarouselライブラリを使用して、iOSで瞬時にCover Flow効果を得ることができます。https://github.com/nicklockwood/iCarouselからダウンロードし、ブリッジングヘッダー(Objective-Cで記述)を追加することで、Xcodeプロジェクトに簡単にドロップできます。
Objective-CコードをSwiftプロジェクトに追加したことがない場合は、次の手順に従ってください。
Swift 3サンプルコード:
override func viewDidLoad() {
super.viewDidLoad()
let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
carousel.dataSource = self
carousel.type = .coverFlow
view.addSubview(carousel)
}
func numberOfItems(in carousel: iCarousel) -> Int {
return 10
}
func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
let imageView: UIImageView
if view != nil {
imageView = view as! UIImageView
} else {
imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
}
imageView.image = UIImage(named: "example")
return imageView
}