Animation Basics-based on core Animation (1)

1. Introduction

Previous article [New learn] animation-based on UIView learned some of the animation methods provided directly by UIView, a class provided by Uikit.

Using UIView's animation features has been able to meet a lot of our needs, it is the core animation the bottom of the way to do a high-level abstraction, so that we develop animation more convenient, but the convenience of the other side lost the core animation framework

integrity and flexibility. Of course, in addition to these UIView also provides a lot of user interaction functions such as the corresponding user clicks.

So when are we really going to get to the bottom of the core animation framework? When the animation function provided by UIView does not meet the requirements, such as: Shadow effect, non-rectangular range, multi-linear animation, etc.

2.Calayer Class-Layer

When using Uikit's UIView (view) to select a line program or a custom view and then render it on the screen, what we actually see in the screen lock is the content of the layer, and the view refers to the layer being wrapped to provide user interaction with the corresponding and core Animation's advanced interface.

Each uiview has a calayer, the so-called backing layer. UIView is responsible for creating this layer and adding the sub-view layer to its layer, so uiview and Calayer have the same parallel hierarchical relationships, one for the other, and of course there are uivew there must be Calayer, Calayer can be created independently from the UIView, such as:

3. Working with Layers　

        //   Create a layer    Calayer *bluelayer = [Calayer layer];         = CGRectMake (50.0f50.0f100.0f100.0f);     = [Uicolor bluecolor]. Cgcolor;         // to load a layer onto the backing    layer [Self.view.layer Addsublayer:bluelayer];

In the example above we created a layer and loaded the layer onto the backing layer of the view.

4. Can animate parameters

As with views, not all properties are animated, and the properties of a bunch of commonly used lesson animations are as follows:

　　　　　　　　　　　　　　

Example:

　　

- (void) viewdidload {[Super viewdidload]; //additional setup after loading the view, typically from a nib. //Create a layerBluelayer =[Calayer layer]; Bluelayer.frame= CGRectMake (50.0f,50.0f,100.0f,100.0f); Bluelayer.backgroundcolor=[Uicolor Bluecolor].        Cgcolor; //to load a layer onto the backing layer[Self.view.layer Addsublayer:bluelayer]; }-(void) Touchesbegan: (Nsset<uitouch *> *) touches withevent: (Uievent *)Event{Bluelayer.backgroundcolor=[Uicolor Redcolor].        Cgcolor; Self.view.layer.backgroundColor=[Uicolor Redcolor]. Cgcolor;}

Results:

The backing layer of the Rootview is changed directly from colorless to red, not excessive in the middle.

The newly created layer changes from blue to red, with a momentary excess in the middle, not directly to red.

Reason:

Implicit animations have been banned for UIView's backing layer, and are not animated for modifications to the values of properties that support implicit animation.

For the newly created layer, it will animate unless we close the implicit animation.

Countermeasures:

Backing layer has uiview generated, we can not control, and do not need to control, we just add on it on the new layers.

5. Layer Geometry

5.1 Layout

The view has frame,bounds,center, and the corresponding layer also has frame,bounds,position.

In fact, the view's changes to the above properties are changing the corresponding properties of its backing layer.

The general frame of the aspect are consistent with the bounds aspect.

　　　　　　　　　　　　　　　　　　　　　　

However, when there are changes such as rotation, the frame represents the entire axis-aligned rectangular area.

　　　　　　　　　　　　　　　　　　　　　

　5.2 Anchor Point: Anchorpoint

The understanding of anchor points can be consulted: [Think] position and anchorpoint relations

The layer or view will rotate the center point with the anchor point:

In the test we created a new gray UIView:

Rotate with center point:

-(void) anchorpointrotatecenter{    1.0);}

Results:

To set the anchor point to the upper-left corner:

-(void) anchorpointrotateleftup{    = Cgpointmake (0.0f0.0f);      1.0 );    }

Results:

5.3 Coordinate system

　　

5.3.1 Z Axis

The screen is flat, so the existence of the x-axis and y-axis can be well understood, in fact there is a z-axis concept for 3D variations. The concept of the z-axis only exists at the level of the layer, with only two-D x and Y axes in the view.

Zposition and Anchorpointz thought the layer would move up and down as it was perpendicular to the screen pointing to the viewer.

The view or layer that is usually drawn on the screen is overwritten by the view or layer that is first drawn up. But we can change this overlay order by zposition.

It is important to emphasize that, although the zposition can change the order of the display, but not the table hit-testing order, or will follow the picture of the view first to get processing event response.

Example:

In the following example, two new view, blue and red, and blue are added to the Rootview so that the final effect is that the red will cover the area they repeat.

-(void) drawzpositiontestview{    = [[Blueview alloc]initwithframe:cgrectmake (200.0f 50.0f 100.0f 100.0f )];     = [[Redview alloc]initwithframe:cgrectmake (200.0f120.0f100.0f100.0f )];        [Self.view Addsubview:blueview];    [Self.view Addsubview:redview];}

　　　　　　　　　　　

When you click on the repeating area, the touch time defined in the red view is triggered:

-£º59.464 testcoreanimation[914: 27800] I am Red view!　　

After that we have the zposition value of the layer of the Blue view, which causes the blue area to be in front.　　

-(void) drawzpositiontestview{    = [[Blueview alloc]initwithframe:cgrectmake (200.0f 50.0f 100.0f 100.0f )];     = [[Redview alloc]initwithframe:cgrectmake (200.0f120.0f100.0f100.0f )];        [Self.view Addsubview:blueview];    [Self.view Addsubview:redview];         // Modify the Zposition value, the larger the farther forward (closer to the viewer)    1.0 ;}

　　　　　　　　　　　　

Test click on the coincident area, the Click event is still handled by the Red view, which means that zposition does not affect the order of hit-testing delivery.

to:22.700 testcoreanimation[1006: 31606] I am Red view!

　　

Conversion of 5.3.2 coordinate system

As with views, layers are placed hierarchically in the layer tree relative to the parent layer, and the position of one layer depends on the bounds of its parent layer, and if the parent layer moves, all its sublayers will move along. This makes it easier to place layers, because you can move the root layer to move its sublayers as a whole, but sometimes you need to know the absolute position of a layer, Or it is relative to the position of another layer, not the position of its current parent layer. Calayer provides a number of tool-class methods for layer transformations between different coordinate systems:

-(Cgpoint) Convertpoint: (cgpoint) point fromlayer: (Calayer *) layer; -(Cgpoint) Convertpoint: (cgpoint) point tolayer: (Calayer *) layer; -(CGRect) Convertrect: (cgrect) rect fromlayer: (Calayer *) layer; -(CGRect) Convertrect: (cgrect) rect tolayer: (Calayer *) layer;

　　

　　

　　　

Animation Basics-based on core Animation (1)