#Core animator tutorial how to
#Core animator tutorial code
#Core animator tutorial series

On our redLayer, let’s apply some rounded corners, and make the border visible. When the masksToBounds property is set to true, the layer’s backing image and sublayers are clipped to this curve. Corners and BorderĬALayer has a property called cornerRadius, which applies rounded corners to the layer’s background and border. Otherwise, you will get a pixelated image on your device. However, when working with image that are generated programmatically, or image that missing suffix, you will remember to manually set the layer’s contentsScale to match the screen scale. Normally we set the value as the scale of the image, as shown above. ntentsScale = UIScreen.mainScreen().scaleĬontentsGravity is a constant that specifies how the layer’s contents are positioned or scaled within its bounds.ĬontentsScale defines a ratio mapping between the size of the layer (measured in points) and the size of the bitmap used to present the layer’s content (known as backing image, measured in pixels). ame = CGRect(x: 0, y: 100, width:, height: ) Let image = UIImage(named: 'ButterflySmall.jpg')! Note that you’ll have to drag your image named ButterflySmall.jpg in to your Xcode project hierarchy in order for the UIImage() command to find the picture. You can also set an image as the content via the contents property. Notice that the backgroundColor property of CALayer is a CGColor instead of UIColor.

#Core animator tutorial code

RedLayer.backgroundColor = UIColor.redColor().CGColorĪdd this code to a function called setup in the file ViewController.swift, and call the method from viewDidLoad. We can set its frame, backgroundColor, and add it to a superlayer just like we do with UIView. Exploring CALayerĬreating a CALayer instance is very straightforward. The only major feature that the backing layer does not handle is user interaction.įor the purposes of going through this tutorial, I recommend creating an empty single-view iPhone application. It is the backing layer that is responsible for display and animation of the view. UIView just ensures the corresponding back layers are correctly connected in the layer tree when subviews are added or removed from the view. Every UIView has a layer property known as the backing layer, which is an instance of CALayer. That’s true, but it’s not just a coincidence. Sound familiar? You may say, “It’s like UIView!” They are stored into a tree hierarchy, and each manages the position of its children sublayers. What Is CALayer?ĬALayers are rectangular objects that can contain visual content.

#Core animator tutorial how to

In the first part of this tutorial series, you are going to learn the basics of CALayer, how to use its properties to create neat visual effects easily, and at the end of this tutorial, you will learn the most important subclass of CALayer – CAShapeLayer.

In other words, Core Animation accounts for everything that you see onscreen. You are familiar with the UIView tree hierarchy, which is built upon the layer tree. It divides the content onscreen into individual objects called layers, and arranges them in a tree hierarchy (known as the layer tree). It uses the GPU to accelerate the rendering of on-screen objects. Core Animation is an infrastructure for compositing and manipulating visual content onscreen. However, animation is only a part of this framework. When you first hear about Core Animation, you might think it is all about animation. If you are new to iOS development, you might want to begin with Developing iOS Apps Using Swift first.

#Core animator tutorial series

This tutorial series requires a basic understanding of UIView hierarchy.