Rendering and model (implicit animation), rendering Model Animation

Source: Internet
Author: User

Rendering and model (implicit animation), rendering Model Animation
Presentation and Model

CALayerIn fact, it is not normal because changing the attribute of a layer does not take effect immediately. Instead, it is updated gradually over a period of time. How is this done?

When you change the attribute of a layer, the attribute value is indeed updated immediately (if you read its data, you will find that its value takes effect immediately when you set it ), but the screen does not change immediately. This is because the attribute you set does not directly adjust the appearance of the layer. Instead, it defines the appearance that will change after the layer animation ends.

When setCALayerIs actually how the layers are displayed after the end of the current transaction.Model. Core Animation playsControllerAnd is responsible for constantly updating the layer behavior and transaction settings.ViewThe status of these properties on the screen.

We are talking about a typicalMicro-MVC Mode.CALayerIs a connection User Interface (that is,View) Fictional class, but in the scenario of the interface itself,CALayerThe behavior is more like a data model that stores how views are displayed and animated. In fact, in Apple's own documents, the layer tree is usually a value layer tree model.

In iOS, the screen is repainted 60 times per second. If the Animation duration is longer than one second after 60, Core Animation needs to reorganize the layers on the screen between a new value and a new value. This meansCALayerIn addition to the "real" value (that is, the value you set), you must know the currentDisplayRecord of attribute values on the screen.

The display value of each layer attribute is stored inRendering LayerIn the independent layer-presentationLayerMethod. This rendering layer is actually a copy of the model layer, but its attribute value represents the current appearance at any specified time. In other words, you can obtain the value displayed on the current screen by rendering the value of the layer (Figure 7.4 ).

We mentioned in Chapter 1 that apart from the layer tree, there are alsoRendering tree. The rendering tree is formed by the rendering layers of all layers in the layers tree. Note that only when the layer is first renderedSubmit(The first time it is displayed on the screen ).-presentationLayerWill returnnil.

You may have noticed that–modelLayer. Call on the rendering layer–modelLayerIt will return that it is rendering the dependentCALayer. Usually called on a layer-modelLayerWill return–self(In fact, the original layer we have created is a data model ).

Figure 7.4 how a moving layer is presented through a data model

In most cases, you do not need to directly access the rendering layer. You can update the display of Core Animation by interacting with the model layer. In both cases, rendering layers becomes very useful. One is synchronous animation and the other is processing user interaction.

  • If you are implementing a timer-based animation (See Chapter 11th "timer-based animation"), not just a transaction-based animation, at this time, it is useful to know exactly where the layer is displayed at a specific time point.
  • If you want your animation layers to respond to user input, you can use-hitTest:Method (See Chapter 3 "layer ry") to determine whether the specified layer is touched.RenderingLayers insteadModelLayer call-hitTest:It makes sense, because the rendering layer represents the position of the layer you are currently seeing, rather than the position after the animation ends.

We can use a simple example to prove the latter (see listing 7.7 ). In this example, clicking any position on the screen will make the layer pan to it. Click the layer itself to randomly change its color. We call the rendering layer-hitTest:To determine whether a click is clicked.

If you modify the code-hitTest:Act directlyColorLayerInstead of rendering a layer, you will find that the layer cannot be correctly displayed when it moves. At this time, you need to click the position where the layer will be moved, rather than the layer itself to respond to the click (that is why the layer is used to respond to interaction ).

Usage in listing 7.7presentationLayerLayer to determine the position of the current Layer

 1 @interface ViewController () 2  3 @property (nonatomic, strong) CALayer *colorLayer; 4  5 @end 6  7 @implementation ViewController 8  9 - (void)viewDidLoad10 {11     [super viewDidLoad];12     //create a red layer13     self.colorLayer = [CALayer layer];14     self.colorLayer.frame = CGRectMake(0, 0, 100, 100);15     self.colorLayer.position = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);16     self.colorLayer.backgroundColor = [UIColor redColor].CGColor;17     [self.view.layer addSublayer:self.colorLayer];18 }19 20 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event21 {22     //get the touch point23     CGPoint point = [[touches anyObject] locationInView:self.view];24     //check if we've tapped the moving layer25     if ([self.colorLayer.presentationLayer hitTest:point]) {26         //randomize the layer background color27         CGFloat red = arc4random() / (CGFloat)INT_MAX;28         CGFloat green = arc4random() / (CGFloat)INT_MAX;29         CGFloat blue = arc4random() / (CGFloat)INT_MAX;30         self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;31     } else {32         //otherwise (slowly) move the layer to new position33         [CATransaction begin];34         [CATransaction setAnimationDuration:4.0];35         self.colorLayer.position = point;36         [CATransaction commit];37     }38 }39 @end40 41  
View Code

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.