Animation Basics-based on Core Animation (3)

Reference: https://zsisme.gitbooks.io/ios-/content/

The previous Article Animation Foundation-based on Core Animation (1), the Animation Foundation-based on Core Animation (2) refers to the basic concepts of the layer and the geometry of the animation parameters of knowledge.

This article will continue to explore more in-depth animation knowledge.

There are two previous articles on the concept of layers and the geometry and effect of performance, transformation, such as the left column.

In the previous two articles, most of the backing layers in the view were used to illustrate that the layer itself is not animated. So in the previous article it is rare to see the obvious

Animation, the implicit animation and display animation will be covered in the next summary article.

The first thing to summarize is:

1. The view itself is not animated concept, its animation interface and effect of the production is actually for its internal layer processing.

2. Not all layers have animated properties, only animated properties can animate.

The following are commonly used layers to animate properties

　　

1. Implicit animations

Simple implicit animations:

When you change an animated property of Calayer, it is not immediately reflected on the screen. Instead, it is a smooth transition from the previous value to the new value. All of this is the default behavior and you don't need to do extra work.

Implicit animations are turned on by default in the layer, and if you don't need an implicit animation, you need to actively turn it off.

#pragma test simple animation-(void) testsampleanimation{        = [Calayer layer];     = [Uicolor blackcolor]. Cgcolor;     = CGRectMake (a);    [Self.view.layer Addsublayer:mysamplelayer];} -(void) testsampleanimationtouch{    = [Uicolor redcolor]. Cgcolor;}

The above code just creates a layer and then changes the layer's color from the underworld red, we can feel the color change is not instantaneous, but there is an excess.

　　Even if you do not explicitly start a transaction with [Catransaction begin] , any changes to the properties in a run loop loop will be lumped together and then animated 0.25 seconds at a time.

2. Animation transactions

through Catransaction's +begin and +commit respectively to the stack or out of the stack to control the animation of the transaction. Through this transaction we can control the continuous events of the animation and so on.

    // Animation Start     [catransaction begin];     // Other transaction Settings     [Catransaction.];         // animation effect Code         // Animation submission    [Catransaction commit];

The following code, we will change the color of the animated event holder for 2 seconds

-(void) testsampleanimationtouch{    //  animation start     [catransaction begin];         //  animation will last for 2 seconds    [catransaction setanimationduration:2.0]        ; // animation effect Code    Mysamplelayer.backgroundcolor = [Uicolor redcolor]. Cgcolor;         // Animation Submission     [Catransaction commit];}

We obviously felt that the color changes were over-lasted longer.

We use block when using UIView, in fact, the inside is also automatically help us to use the layer of the transaction mechanism to control.

　　

3. Complete the Block

In the UIView animation always we will set a block, when the animation is finished to trigger, the same layer of the transaction will also exist in this behavior

    // Transaction Completion block    Catransaction setcompletionblock:^{        < #code #>    }

The following code rotates the layer 90 degrees after a 2-second background color

- (void) testsampleanimationtouch{//Animation Start[catransaction begin]; //animation will last for 2 seconds[Catransaction setanimationduration:2.0]; //Transaction Completion block[Catransaction setcompletionblock:^{Cgaffinetransform Transform=Mysamplelayer.affinetransform; Transform=cgaffinetransformrotate (transform, m_pi_2); Mysamplelayer.affinetransform=transform;        }]; //Animation effect CodeMysamplelayer.backgroundcolor =[Uicolor Redcolor].        Cgcolor; //Animation Submission[Catransaction commit];}

The result is that the color still fades in the 2-second event, but the rotation is done very fast, because the completion block is not in the transaction, so the default time is 0.25 seconds.

4. Layer Behavior:

we call the behavior of the Calayer auto-applied animation when changing attributes   

4.1 Layer behavior mechanism:

When the Calayer property is modified, it calls the -actionforkey: method, passing the name of the property. The rest of the operations are described in detail in the calayer header file,

This is essentially the following steps:

• Layer first detects if it has a delegate and implements -actionforlayer:forkey protocol. If there is, call directly and return the result.
• If there is no delegate, or the delegate is not implemented -actionforlayer:forkey method, the layer then checks the actions dictionary.
• actions Dictionary style Dictionary and then search for the property name.
• style -defaultactionforkey:

We often mention that the UIView layer has been banned from animation, and then we can do a simple animation by UIView block or transaction, both of which sound very contradictory. In fact, the secret is:

The proxy for the UIView layer is the UIView itself, which implements the-actionforlayer:forkey method, but in this method it determines whether the change in the animated properties of the layer is in the animation block or animation transaction

Occurs, if it is, the return action can also animate, and if not, returns nil so that no animated properties are produced.

Proof: The-actionforlayer:forkey method is called within the external and animation blocks, respectively, in the following code

#pragmaAnimation mechanism of UIView-(void) testuiviewanimation{UIView*myview =[[UIView alloc]init]; NSLog (@"outer:%@", [MyView actionForLayer:myView.layer Forkey:@"BackgroundColor"]); [UIView animatewithduration:2.0animations:^{NSLog (@"Inner:%@", [MyView actionForLayer:myView.layer Forkey:@"BackgroundColor"]); }];}

Result: For the backgroundcolor attribute, nil is obtained externally, which is what we call a UIView layer that prohibits implicit animation. In the animation block, you can get animation action, that is, to modify the animated properties here

can have animated effects.

£ º40.970 testcoreanim[1067:  41601] Outer: <null>----: 40.972 testcoreanim[1067:416010x7a956150>

The above method we can prohibit implicit animation we can also use the method of the transaction to prohibit

[Catransaction Setdisableactions:yes];

4.2 Control layer Behavior:

• UIView the associated layer disables implicit animation, the only way to animate such a layer is to use UIView 's animated function (rather than relying on catransaction), or inherit UIView, and overwrite -actionforlayer:forkey: method, or create an explicit animation directly (see chapter eighth for specifics).
• For a separate layer, we can control implicit animation by implementing the layer's -actionforlayer:forkey: delegate method, or by providing an actions dictionary.

in the following tests change the background color, the new color blocks are slid from the left side:

-(void) changelayeraction{//Create SublayerMysamplelayer =[Calayer layer]; Mysamplelayer.frame= CGRectMake (50.0f,50.0f,100.0f,100.0f); Mysamplelayer.backgroundcolor=[Uicolor Bluecolor].        Cgcolor; //Add a custom actionCatransition *transition =[catransition animation]; Transition.type=Kcatransitionpush; Transition.subtype=Kcatransitionfromleft; Mysamplelayer.actions= @{@"BackgroundColor": Transition}; //add it to our view[Self.view.layer Addsublayer:mysamplelayer];}

Result: A separate layer because there is no proxy specified, he will go directly to his actions dictionary to find out whether the specified property has been modified, and the behavior definition of the specified property.

We see that the color of the layer is no longer the default fade to black, but that the black block squeezes the existing color from left to right.

5. Presentation and model

　　When we set an animated parameter layer of the position, in fact, once set up position is already a new value, but on the screen we will see the layer is "slow" to move the new position position.

We call this "in motion" layer a rendering layer, just like its name, which is the layer that the user can observe on the screen. The layers that have been animated before the parameters change are called model layers, and their relationships are:

The display values for each layer property are stored in a separate layer called the rendering layer , which can be accessed through the -presentationlayer method. This rendering layer is actually a copy of the model layer, but its property values represent the

The current appearance effect at any given moment. In other words, you can get the values that are actually displayed on the current screen by rendering the layer's values, in other words, even if the layer is still stationary, the method returns the layer itself.

5.1 When to use render layers

• If you're implementing a timer-based animation, not just a transaction-based animation, it's useful to know exactly where the layer is displayed at some point in time.
• If you want your animated layer to respond to user input, you can use the -hittest: method to determine if the specified layer is touched, and call-hittest on the rendering layer instead of the model layer : is more meaningful because the rendering layer represents the position of the layer that the user is currently seeing, not the position after the current animation ends.

Example: In the following code we created a layer that, when clicked on a layer, randomly transforms the color and moves slowly to the clicked position when actively moving to another position.

#pragmaRender Layer-(void) testpresentlayer{//Create a red layerMysamplelayer =[Calayer layer]; Mysamplelayer.frame= CGRectMake (0,0, -, -); Mysamplelayer.position= Cgpointmake (Self.view.bounds.size.width/2, Self.view.bounds.size.height/2); Mysamplelayer.backgroundcolor=[Uicolor Redcolor].    Cgcolor; [Self.view.layer Addsublayer:mysamplelayer];}-(void) Testpresentlayertouch: (Nsset<uitouch *> *) touches{//get the Touch pointCgpoint point =[[Touches Anyobject] locationInView:self.view]; //Check if we ' ve tapped the moving layer    if([Mysamplelayer.presentationlayer hittest:point]) {//randomize the layer background colorCGFloat red = arc4random ()/(cgfloat) Int_max; CGFloat Green= Arc4random ()/(cgfloat) Int_max; CGFloat Blue= Arc4random ()/(cgfloat) Int_max; Mysamplelayer.backgroundcolor= [Uicolor colorwithred:red green:green blue:blue Alpha:1.0].            Cgcolor; } Else {                //otherwise (slowly) move the layer to new position[catransaction begin]; [Catransaction setanimationduration:4.0]; Mysamplelayer.position=Point ;    [Catransaction commit]; }}

Results:

Summary: The above describes the implicit animation.

Animation Basics-based on Core Animation (3)