A Swift Perambulation through the World of CATransform3D (Part II): Concatenation, Inversion and Affine Transforms (CALayer, iOS, Xcode)

Last time translation, rotation and scaling were discussed in relation to Core Animation Functions. This time I move on to discussion of concatenation, inversion and affine transforms.

Concatenation

The concatenation of transforms enables two transformations to be combined (or chained) together.

In the image above, a rotation and scale have been combined.

func degree2radian(a:CGFloat)->CGFloat {
     let b = CGFloat(M_PI) * a/180
     return b
}
let layer = CALayer()
layer.frame = CGRect(x: 20, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layer.borderColor = UIColor.blackColor().CGColor
layer.borderWidth = 1
self.view.layer.addSublayer(layer)

let layerConcat = CALayer()
layerConcat.frame = CGRect(x: 20, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layerConcat.backgroundColor = UIColor.greenColor().CGColor
layerConcat.zPosition = -1
layerConcat.transform = CATransform3DConcat(CATransform3DMakeRotation(degree2radian(90), 0.0, 1.0, 1.0), CATransform3DMakeScale(1.0, 3.0, 0.0))
self.view.layer.addSublayer(layerConcat)

Inversion

An inversion as the name suggests inverts a transformation, taking it in the opposite directions to the original. 

func degree2radian(a:CGFloat)->CGFloat {
   let b = CGFloat(M_PI) * a/180
   return b
}
let layer = CALayer()
layer.frame = CGRect(x: 20, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layer.borderColor = UIColor.blackColor().CGColor
layer.borderWidth = 1
self.view.layer.addSublayer(layer)

let layerConcat = CALayer()
layerConcat.frame = CGRect(x: 20, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layerConcat.backgroundColor = UIColor.greenColor().CGColor
layerConcat.zPosition = -1
layerConcat.transform = CATransform3DMakeRotation(degree2radian(90), 0.0, 1.0, 1.0)
self.view.layer.addSublayer(layerConcat)
        
let layerConcat2 = CALayer()
layerConcat2.frame = CGRect(x: 20, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layerConcat2.backgroundColor = UIColor.blueColor().CGColor
layerConcat2.zPosition = -1
layerConcat2.transform = CATransform3DInvert(CATransform3DMakeRotation(degree2radian(90), 0.0, 1.0, 1.0))
self.view.layer.addSublayer(layerConcat2)

CGAffineTransform

A CGAffineTransform is a two-dimensional transformation that can be applied to a view, and the CGAffineTransform() function enables the affine transform to be used on CALayers and CAShapeLayers by translating it into a CATransform3D instance.

func degree2radian(a:CGFloat)->CGFloat {
   let b = CGFloat(M_PI) * a/180
   return b
}

let layer = CALayer()
layer.frame = CGRect(x: 100, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layer.borderColor = UIColor.blackColor().CGColor
layer.borderWidth = 1
self.view.layer.addSublayer(layer)

let layerAffine = CALayer()
layerAffine.frame = CGRect(x: 100, y: CGRectGetMidX(self.view.frame), width: 200, height: 200)
layerAffine.backgroundColor = UIColor.greenColor().CGColor
layerAffine.zPosition = -1
layerAffine.transform = CATransform3DMakeAffineTransform(CGAffineTransformMakeRotation(degree2radian(45)))
self.view.layer.addSublayer(layerAffine)

Note: There is also a function to translate a CATransform3D instance into a CGAffineTransform called CATransform3DGetAffineTransform() if you wish to move from a CATransform3D to a CGAffineTransform.

Follow @sketchytech