iOS Edge Learning--calayer, non-root layer implicit animation, watch practice

Source: Internet
Author: User
Tags uikit

First, Calayer

    • UIView can be displayed on the screen entirely because one of his inner layers
    • When you create a UIView object, a layer (that is, the Calayer object) is automatically created inside UIView, which can be accessed through the Layer property of UIView.
    • When the UIView needs to be displayed on the screen, the DrawRect: method is called to draw, and all the content is drawn on its own layer, and after the drawing is finished, the layer is copied to the screen, so the display of the UIView is completed.
    • The uiview itself does not have the function of the display, it is his internal layer only display function

Second, the basic use of Calayer

   

Third, about the Calayer doubts---with cgimage, Cgcolor without UIImage, Uicolor

    • First of all, Cgimageref, cgcolorref two data types are defined in the Coregraphics framework
    • Uicolor, UIImage is defined in the Uikit framework
    • Second, the Quartzcore framework and the Coregraphics framework are available across platforms and can be used on both iOS and Mac OS x, but Uikit can only be used in iOS
    • In order to ensure portability, Quartzcore cannot use UIImage, Uicolor, can only use Cgimageref, Cgcolorref

Iv. selection of UIView and Calayer

    • Since Calayer and UIView all can achieve the same display effect, then who should choose who is good?
      • In fact, compared with the Calayer,uiview more than one event processing function. In other words, Calayer cannot handle user touch events, and UIView can
      • So, if the displayed things need to interact with the user, with UIView, if you do not need to interact with the user, with UIView or Calayer can
      • Of course, the performance of Calayer is higher because it is less capable of event handling and more lightweight
    • Here's the code to create a new calayer to show the picture

The two important attributes of Calayer position and Anchorpoint

    • @property cgpoint position;
      • Used to set the position of the Calayer in the parent layer
      • Take the upper-left corner of the parent layer as the origin point (0,0)
    • @property Cgpoint Anchorpoint;
      • Known as Anchor Point, Anchor Point
      • The point that determines the calayer is where the position property refers.
      • In its own upper left corner as the origin (0,0)
      • His x, y range is 0~1, and the default value is (0.5,0.5)

Vi. implicit animation of non-root layers

    • Each uiview is associated with a calayer, and we can call this layer the root layer (root)
    • All non-root layers, which are manually created Calayer objects, have implicit animations

What is an implicit animation?

When modifying some properties of a non-root layer, some animations are automatically generated by default

These properties are called Animatable properties (animated property)

    • The code is implemented by clicking on the screen, calayer the fillet, color, position, borders and so on randomly change and do animation
- (void) viewdidload {[Super viewdidload]; //additional setup after loading the view, typically from a nib.Calayer*layer =[Calayer layer]; Layer.bounds= CGRectMake (0,0, the, the); Layer.backgroundcolor=[Uicolor Redcolor].    Cgcolor; Layer.anchorpoint= Cgpointmake (0,0); Layer.position= Cgpointmake ( Max, -);    [Self.view.layer Addsublayer:layer]; _layer=layer;}- (void) Touchesbegan: (Nsset<uitouch *> *) touches withevent: (Uievent *)Event{_layer.transform= Catransform3dmakerotation (Angle2rotation (Arc4random_uniform ( the)),0,0,1); _layer.backgroundcolor=[self randomcolor].        Cgcolor; _layer.position= Cgpointmake (Arc4random_uniform ( -) + -, Arc4random_uniform ( -) + -); _layer.borderwidth= Arc4random_uniform ( -); _layer.bordercolor=[self randomcolor].    Cgcolor; _layer.cornerradius= Arc4random_uniform ( -);}-(Uicolor *) randomcolor{cgfloat R= Arc4random_uniform ( the) /255.0; CGFloat g= Arc4random_uniform ( the) /255.0; CGFloat b= Arc4random_uniform ( the) /255.0; return[Uicolor colorwithred:r green:g blue:b Alpha:1];}

The practice of the clock--the difficulty is to get the current time by Nscalendar

1 #import "ViewController.h"2 //calculates the angle at which the second hand turns over by the number of seconds3 #defineSecondrotation (second) ((second * 6)/180.0 * M_PI)4 //calculates the angle at which the minute hand turns through fractions5 #defineMinuterotation (minute) ((minute * 6)/180.0 * M_PI)6 //calculates the angle at which the hour is turned by hours7 #defineHourrotation (Hour) ((hour *)/180.0 * M_PI)8 9 @interfaceViewcontroller ()Ten@property (Weak, nonatomic) Iboutlet Uiimageview *Clockview; One /** Second*/ A@property (nonatomic,strong) Calayer *Secondl; - /** Minute*/ -@property (nonatomic,strong) Calayer *Minutel; the /** Hour*/ -@property (nonatomic,strong) Calayer *Hourl; - @end -  + @implementationViewcontroller -  +- (void) Viewdidload { A [Super Viewdidload]; at      -     //Add seconds - [self setupsecondlayer]; -      -     //Add Hour - [self setuphourlayer]; in      -     //Add minute hand to [self setupminutelayer]; +[Nstimer Scheduledtimerwithtimeinterval:1.0target:self selector: @selector (timechange) Userinfo:nil Repeats:yes]; - [self timechange]; the } *  $- (void) TimechangePanax Notoginseng { -     //gets the current time, calculating the rotation of the second hand by the number of seconds the     //The current calendar object, which gets the time component from the Calendar object +Nscalendar *calendar =[Nscalendar Currentcalendar]; A      the     //The Calendar component contains: Month, day, minute, etc +     //experience: There are shift operators in later enumerations, which can usually be used and operated (|) -nsdatecomponents *compontent = [Calendar Components:nscalendarunitsecond | Nscalendarunitminute |nscalendarunithour fromdate:[nsdate Date]]; $      $Nsinteger second =Compontent.second; -Nsinteger minute =Compontent.minute; -Nsinteger hour =Compontent.hour; the      -_hourl.transform = Catransform3dmakerotation (Hourrotation (hour) + minuterotation (minute)/ A,0,0,1);Wuyi_minutel.transform = Catransform3dmakerotation (Minuterotation (minute) + secondrotation (second)/ -,0,0,1); the_secondl.transform = Catransform3dmakerotation (Secondrotation (second),0,0,1); -  Wu } -  About- (void) Setuphourlayer $ { -     //get the width and height of the clock -CGFloat clockwh = _clockview.frame.size.height *0.5; -     //create a layer with the hour hand ACalayer *hourl =[Calayer layer]; +Hourl.bounds = CGRectMake (0,0,6, clockwh- +); theHourl.backgroundcolor =[Uicolor Blackcolor]. Cgcolor; -Hourl.position =Cgpointmake (clockwh, clockwh); $Hourl.anchorpoint = Cgpointmake (0.5,1); theHourl.cornerradius =3; the      the [_clockview.layer Addsublayer:hourl]; the_hourl =Hourl; - } in  the- (void) Setupminutelayer the { About     //get the width and height of the clock theCGFloat clockwh = _clockview.frame.size.height *0.5; the     //create a layer of the minute hand theCalayer *minutel =[Calayer layer]; +Minutel.bounds = CGRectMake (0,0,6, clockwh- -); -Minutel.backgroundcolor =[Uicolor Blackcolor]. Cgcolor; theMinutel.position =Cgpointmake (clockwh, clockwh);BayiMinutel.anchorpoint = Cgpointmake (0.5,1); theMinutel.cornerradius =3; the      - [_clockview.layer Addsublayer:minutel]; -_minutel =Minutel; the } the  the- (void) Setupsecondlayer the { -     //get the width and height of the clock theCGFloat clockwh = _clockview.frame.size.height *0.5; the     //create a layer for the second hand theCalayer *secondl =[Calayer layer];94Secondl.bounds = CGRectMake (0,0,2, clockwh- -); theSecondl.backgroundcolor =[Uicolor Redcolor]. Cgcolor; theSecondl.position =Cgpointmake (clockwh, clockwh); theSecondl.anchorpoint = Cgpointmake (0.5,1);98      About [_clockview.layer Addsublayer:secondl]; -_secondl =Secondl;101 }102 103- (void) didreceivememorywarning {104 [Super didreceivememorywarning]; the     //Dispose of any resources the can be recreated.106 }107 108 @end
View Code

iOS Edge Learning--calayer, non-root layer implicit animation, watch practice

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.