Most of the time our UIViews are backed by means of a everyday CALayer, however Core Animation offers us a range of picks to pick out from. CATiledLayer lets us manage tiled photos as viewed in Maps, CAGradientLayer creates coloration gradients, CAEmitterLayer creates particles, and more, however in this article I favor to seem at CATransformLayer, which lets us render a couple of sublayers with a 3D radically change applied.

I’m going to stroll via three one-of-a-kind examples so you can get a style of what’s possible, however first I choose to exhibit you the most necessary part:var perspective = CATransform3DIdentity perspective.m34 = -1 / 500 let transformLayer = CATransformLayer() transformLayer.transform = perspective

That creates a 3D transform, modifies it slightly, then applies it to a radically change layer. The curious phase is the 2nd line, which modifies a property referred to as m34 to be -1 / five hundred CATransform3D is 4x4 matrix of numbers, so it has homes such as m11, m12, m21, and so on up to m44. Each one refers to the cost in a unique row and column of the transformation matrix.

Taken together, a CATransform3D defines precisely how an object is located in area – its position, rotation, and so on. We don’t want some thing fancy for our radically change layer, however we do choose it to simulate some perspective. That’s the place m34 comes in: it’s kind of like the distance from your eye to the place the scene is being rendered, and it outcomes how sturdy the 3D consequences appeared. Later on you can strive adjusting it to see what I suggest – a cost like -1 / one hundred will have a genuinely robust 3D effect, whereas -1 / 2000 will be an awful lot weaker.

Anyway, simply developing a seriously change layer isn’t sufficient – we want to do some thing with it. Once you’ve created your CATransformLayer and configured its perspective, you can go beforehand and add new situations of CALayer to it to make them have a 3D effect. We’ll create some layers by using hand later, however for now we’ll remember on the reality that all situations of UIView or its subclasses have a layer property – we can create an photo view, and add that to our seriously change layer.

We want a sandbox to play round in, so please go in advance and make a new iOS undertaking the usage of the Single View App template. Open ViewController.swift and supply it this property:let imageView = UIImageView(frame: CGRect(x: -150, y: -150, width: 300, height: 300))

That’s the photo view we’ll be rendering in 3D space. It’s vital we preserve a sturdy reference to it somewhere, due to the fact simply including its layer to a CATransformLayer isn’t ample to hold it alive.

We’re going to write some code in viewDidAppear() that hundreds an photograph into that picture view, creates a CATransformLayer and configures with some perspective, then provides the layer of the photo view to the radically change layer, and provides the seriously change layer to the layer for our most important view.

Baby steps, though! First, here’s a simple viewDidAppear() that units up the photograph view:override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(true) imageView.image = UIImage(named: "TestingSwift") imageView.contentMode = .scaleAspectFit // more code to come }

Note: You’ll want to supply your personal image, so you have to import some thing into your asset catalog.

The subsequent step is to create a CATransformLayer and configure it to render viewpoint correctly. Put this in location of the // extra code to come comment:let transformLayer = CATransformLayer() var perspective = CATransform3DIdentity perspective.m34 = -1 / 500 transformLayer.transform = perspectiveNext is an essential step: for our 3D impact to work correctly, we genuinely favor our radically change layer to be headquartered on the screen. This isn’t required – possibly you may choose the impact to be located off to one side, for instance – however it works nice right here to have the component centered. So, our subsequent line of code is this:transformLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY) Finally, we want to add the picture view’s layer to the seriously change layer, then add the radically change layer to the layer for our foremost view, like this:transformLayer.addSublayer(imageView.layer) view.layer.addSublayer(transformLayer)

Now, earlier than you run the code please on simply for a second. We’ve positioned our picture view in the seriously change layer and set up some perspective, however we nevertheless won’t see something special. You see, we haven’t definitely carried out whatever with our picture view layer but – it’s nevertheless being proven head on to the camera.

To make this clearly fascinating we ought to provide the photograph view layer a seriously change like this one:imageView.layer.transform = CATransform3DMakeRotation(-0.5, 1, 0, 0) Let’s goal a little greater and create a 3D animation so that our photo view appears awesome:
let anim = CABasicAnimation(keyPath: "transform") anim.fromValue = CATransform3DMakeRotation(0.5, 1, 0, 0) anim.toValue = CATransform3DMakeRotation(-0.5, 1, 0, 0) anim.duration = 1 anim.autoreverses = true anim.repeatCount = 10 imageView.layer.add(anim, forKey: "transform")

If you try that you’ll see our image view rocks back and forth smoothly in 3D space – not bad, but we’re only just getting started…