IOS Core Animation

1. What is Core Animation?

• It is a set of OC classes containing graphical drawing, projection, and animation. It's a framework. With the interface provided by Coreanimation, you can easily complete the animation you want.

2. The core Animation in my eyes?

Animation and film, and we are like the Director, the sole responsibility for the small film (:D).

There are 3 types of elements in the film, actors, plays, films. Animations are the same,layer,caanimation,addanimation.

Where the analogy relation is

• Calayer: Actor
• Caanimation: The Script
• Addanimation: Casting

To give a simple example, I would like to director Abnormal Yang mi (Layer) moving from the garden to the bedroom movie, the process is divided into

• 1. Actor (Yang mi)
• 2. Play (move from garden to bedroom)
• 3. Filming (combining actors and scripts).

Also I want to move a layer from point A to point B, while rotating and zooming in on the X axis, the process is

• 1.Layer (Kklayer)
• 2.CAAnimation (Here I will build an animation group, what is the animation group is not anxious to explain),
• 3.addAnimation (let the animation begin).

3. What is Calayer,caanimation? 3.1CALayer

• Layer classes is the foundation of core animation. Layer classes provides an abstract concept that is familiar to developers who use NSView and UIView. The base layer is provided by the Calayer class, and Calayer is the parent class for all core animation layers.
• Like an instance of the same view class, a Calayer instance has a separate Superlayer and all the sub-layers above (sublayers), which creates a hierarchical layer, which we call a layer tree. The drawing of layers is drawn from the back to the next, drawing when we want to specify its relative with their Superlayer collection shape, but also need to create a local coordinate system. Layers can do more complex operations, such as rotate (rotation), skew (tilt), scale (scaling), and project the layer content (the projection of the layers).

Balabala so much, in fact Calayer is a simple class that is used to display content on the screen in the rectangular area. So what's the difference with UIView?

• 1. Each UIView has calayer, i.e. uiview.layer or [UIView layer]
• 2.UIView can respond to events, while Calayer is only responsible for display. (UIView is a calayer with delegate)

For some parameters of Calayer please go! [Http://www.cnblogs.com/xunziji/archive/2012/10/30/2746769.html]

3.2 caanimation

Caanimation is divided into these 4 kinds, they are

• 1.CABasicAnimation
• By setting the start point, end point, time, the animation will move along your set point.
• 2.CAKeyframeAnimation
• Keyframe as the name implies is the key point of the frame, you can set the Calayer start point, the Middle key point, the end of the frame, the time, the animation will follow the trajectory you set to move
• 3.CAAnimationGroup
• Group is the combination of all the animations of this layer together. PS: A layer set a lot of animation, they will be executed at the same time, how to execute sequentially I'll talk about it.
• 4.CATransition
• This is some of the animations that Apple has packaged for developers.

4 cabasicanimation Explanation

Now enter Cabasicanimation to explain, by implementing the example of the beginning of the article we learn by doing. We're divided into 3 parts, just like we did.

4.1Layer (Kklayer)

First initialize the Calayer, we need to import the #import before initializing <QuartzCore/QuartzCore.h>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st

Initialization Calayer *kklayer = [[Calayer alloc]init]; Kklayer.backgroundcolor = [[Uicolor Graycolor]cgcolor]; Kklayer.frame = CGRectMake (10, 10, 40, 40); Set its frame. Kklayer.cornerradius = 5;//Fillet processing [Self.view.layer Addsublayer:kklayer]; Add to UIView's layer Position of Mobile Kklayer Cabasicanimation *animation = [cabasicanimation animationwithkeypath:@ "position"]; Animation.fromvalue = [Nsvalue valueWithCGPoint:kkLayer.position]; Cgpoint topoint = kklayer.position; Topoint.x + = 180; Animation.tovalue = [Nsvalue valuewithcgpoint:topoint]; Rotate with X axis Cabasicanimation *rotateanimation = [cabasicanimation animationwithkeypath:@ "transform.rotation.x"]; Rotateanimation.fromvalue = [NSNumber numberwithfloat:0.0]; Rotateanimation.tovalue = [NSNumber numberwithfloat:6.0 * M_PI]; Zoom in and out of the Kklayer Cabasicanimation *scaoleanimation = [cabasicanimation animationwithkeypath:@ "transform.scale.x"]; Scaoleanimation.duration = 3; scaoleanimation.autoreverses = YES; Scaoleanimation.fromvalue = [NSNumber numberwithfloat:1.0]; Scaoleanimation.tovalue = [NSNumber numberwithfloat:2.5]; Scaoleanimation.fillmode = Kcafillmodeforwards;

A few specific notes:

1.CALayer can only use Cgcolor specific please visit http://www.cnblogs.com/smileEvday/archive/2012/06/05/uicolor_cicolor_cgcolor.html

2.CALayer add image above can be kklayer.contents = (ID) imagetmp.cgimage

3. What are the Animationwithkeypath, can look at the picture

4.2 Caanimationgroup

1 2 3 4 5 6 7 8

Combine the above animations. Caanimationgroup *group = [Caanimationgroup animation]; group.autoreverses = YES; Reverse completion after completion group.duration = 3.0; Group.animations = [Nsarray arraywithobjects:animation,rotateanimation, scaoleanimation, nil]; Group.repeatcount = Nsnotfound; PS: After the end of the animation, he will return to his original frame, if not think of the original frame we need to set Group.fillmode = Kcafillmodeforwards;

4.3 addanimation (let the animation begin).

1	[Kklayer addanimation:group forkey:@ "Kklayermove"];

4.4 Concrete Effects

IOS Core Animation