IOS UI advanced 06, iosui advanced 06

IOS UI advanced 06, iosui advanced 06

• CALayer
  • In iOS, what you can see is basically a UIView, such as a button, a text tag, a text input box, and an icon. These are all uiviews, in fact, the reason why UIView can be displayed on the screen is that it has a layer inside it.

  • When you create a UIView object, a layer (CALayer object) is automatically created in the UIView. You can access this layer through the layer attribute of the UIView.

    • @ Property (nonatomic, readonly, retain) CALayer * layer;

  • When UIView needs to be displayed on the screen, it will call the drawRect: Method for drawing, and all content will be drawn on its own layer. After the drawing is complete, the system copies the layer to the screen, so the UIView is displayed.

  • In other words, UIView itself does not have the display function. It only has the display function at its internal layer.

  • By operating the CALayer object, you can easily adjust the appearance attributes of the UIView, such as shadow, rounded corner size, Border Width and color... you can also add animations to layers to achieve some cool effects.
• CALayer attributes

• // Width and height @ property CGRect bounds; // position (default point, determined by anchorPoint) @ property CGPoint position; // anchorPoint (x, the range of y is 0-1), which determines the meaning of position @ property CGPoint anchorPoint; // the background color (CGColorRef type) @ property CGColorRef backgroundColor; // deformation property @ property CATransform3D transform; // border color (CGColorRef type) @ property CGColorRef borderColor; // Border Width @ property CGFloat borderWidth; // content (for example, set to image CGImageRef) @ property (retain) id contents;

  • Questions about CALayer
    • First, CALayer is defined in the QuartzCore framework. CGImageRef and CGColorRef data types are defined in the CoreGraphics framework. UIColor and UIImage are defined in the UIKit framework.

    • Secondly, the QuartzCore and CoreGraphics frameworks can be used across platforms. They can be used in iOS and Mac OS X, but UIKit can only be used in iOS.

    • To ensure portability, QuartzCore cannot use UIImage or UIColor. Only CGImageRef and CGColorRef can be used.

  • UIView and CALayer Selection
    • Through CALayer, you can achieve the same interface effect as UIImageView. Since CALayer and UIView can achieve the same display effect, who should you choose?
    • In fact, compared with CALayer, UIView has an additional event processing function. That is to say, CALayer cannot process user touch events, while UIView can. Therefore, if the displayed items need to interact with users, use UIView. If you do not need to interact with users, you can use UIView or CALayer. Of course, CALayer has higher performance because it lacks the event processing function and is more lightweight.
  • Position and anchorPoint

  • CALayer has two very important attributes: position and anchorPoint @ property CGPoint position; // It is used to set the position of CALayer in the parent layer. // it uses the upper left corner of the parent layer as the origin (0, 0) @ property CGPoint anchorPoint; // It is called "positioning point" and "anchor" // determines the position indicated by the position attribute on CALayer. // it uses its upper left corner as the origin (0, 0) // The value range of x and y is 0 to 0 ~ 1. Default Value: (0.5, 0.5 ):

  • Implicit Animation

    • Each UIView is associated with a CALayer by default. We can call this Layer as the Root Layer)

    • All non-Root layers, that is, manually created CALayer objects, all have implicit animations.

    • What is implicit animation?

      • When some attributes of a non-RootLayer are modified, some animation effects are automatically generated by default. These attributes are called animation Properties)

      • List several common Animatable Properties: bounds: used to set the width and height of CALayer. Modifying this attribute produces the scaling animation backgroundColor: used to set the background color of CALayer. Modify this attribute to generate a gradient animation position for the background color: used to set the position of CALayer. Modifying this attribute produces a translation animation.

        You can disable the default implicit animation effect [CATransaction begin] through an animation transaction; [CATransaction setDisableActions: YES]; self. myview. layer. position = CGPointMake (10, 10); [CATransaction commit];

         

  • Core Animation)
  • • Core Animation, a Core Animation for Chinese translation, is a group of very powerful Animation processing APIs that can be used to make brilliant Animation effects, and often get twice the result with half the effort. That is to say, a small amount of code can be used to implement very powerful functions. Core Animation can be used on Mac OS X and iOS platforms. The Animation execution process of Core Animation is performed in the background without blocking the main thread. It should be noted that Core Animation works directly on CALayer, not UIView.
    • All classes in the core animation comply with CAMediaTiming

    • CAAnaimation is an abstract class that has no animation effect. Its subclass must be used for animation effect. Its subclass CAAnimationGroup and CATransition have the animation effect.

    • • CAAnimationGroup is an animation group that can be scaled and rotated at the same time.

        • An animation group is a subclass of CAAnimation. It can save a group of animation objects. After adding the CAAnimationGroup object to the layer, all animation objects in the group can run concurrently.
        • Attribute description: animations: NSArray used to save a group of animation objects. By default, a group of animation objects run simultaneously, you can also set the beginTime attribute of the animation object to change the animation start time.

        CATransition is a transition animation. You can use transition animation to redirect between interfaces.

      • • CATransition is a subclass of CAAnimation. It is used for transition animation and can provide animation effects for the layer to remove the screen and move into the screen. IOS has less animation effect than Mac OS X.
        • UINavigationController is an animation attribute that pushes the Controller view into the screen through CATransition:
        • • • Type: animation transition type
            • Subtype: animation transition direction
            • StartProgress: animation start point (percentage in the overall animation)
            • EndProgress: animation end point (percentage in the overall animation)

        • Use the UIView animation function to implement transition animation-Single View

    + (Void) transitionWithView :( UIView *) view duration :( NSTimeInterval) duration options :( UIViewAnimationOptions) options animations :( void (^) (void) animations completion :( void (^) (BOOL finished) completion; parameter description: duration: animation duration view: view of transition animation required options: animation type animations: put the code that changes the view attribute in this block. completion: The block is automatically called after the animation ends.

    • • • • Use the UIView animation function to implement transition animation-dual View

          • + (Void) transitionFromView :( UIView *) fromView toView :( UIView *) toView duration :( NSTimeInterval) duration options :( UIViewAnimationOptions) options completion :( void (^) (BOOL finished) completion; parameter description: duration: animation duration options: Transfer animation type animations: Put the code for changing the view attribute in this block. completion: The block is automatically called after the animation ends.

    • CAPropertyAnimation is also an abstract class. It is a subclass of CAAnimation and does not have animation effects. It is available only for subclasses, including CABasicAnimation and CAKeyframeAnimation.
      • • • • CABasicAnimation basic animation for some simple Effects
              • Attribute description:
                • FromValue: Initial Value of the corresponding attribute of keyPath
                • ToValue: end value of the corresponding attribute of keyPath

                •  - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{            CABasicAnimation *anim = [CABasicAnimation animation];            anim.keyPath = @"transform.scale";            anim.toValue = @0.5;            anim.repeatCount = MAXFLOAT;            [_imageV.layer addAnimation:anim forKey:nil];            }

                  Description of the animation process: + with the animation going on, within the duration of duration, the value of the corresponding keyPath attribute gradually changes from fromValue to toValue + keyPath. The content of the keyPath is the animated Animatable attribute of CALayer. If fillMode = kCAFillModeForwards and removedOnComletion = NO, after the animation is executed, the layer will remain in the State after the animation is executed. However, in essence, the attribute value of the layer is the initial value before the animation is executed, and it is not actually changed + CAKeyframeAnimation frame animation, and some continuous smooth animations-Key Frame Animation, it is also a subclass of CAPropertyAnimation. The difference with CABasicAnimation is that CABasicAnimation can only be changed from one value (fromValue) to another value (toValue), and CAKeyframeAnimation uses an NSArray to save these values-attribute description: + values: the above NSArray object. The elements are called "key frames" (keyframe ). The animation object will display each key frame in the values array in sequence within the specified time (duration) + path: you can set a CGPathRef and CGMutablePathRef to move the layers according to the path. Path only applies to the anchorPoint and position of CALayer. If path is set, values will be ignored + keyTimes: You can specify the corresponding time point for the corresponding key frame. The value range is 0 to 1.0, each time value in keyTimes corresponds to each frame in values. If keyTimes is not set, the time of each key frame is evenly divided.-CABasicAnimation can be viewed as a CAKeyframeAnimation with only two key frames.

    • Structure chart
    • • How to use Core Animation
        • If it is not a version later than xcode5, you must first add QuartzCore. framework and introduce the corresponding framework.
        • Development steps:
          • 1. First, you must have CALayer
          • 2. initialize a CAAnimation object and set animation-related attributes.
          • 3. Call the addAnimation: forKey: Method of CALayer to add the CAAnimation object to CALayer, so that the animation can be started.
          • 4. Call the removeAnimationForKey of CALayer to stop the animation in CALayer.
      • CAAnimation
        • It is the parent class of all animation objects and is responsible for controlling the animation duration and speed. It is an abstract class and cannot be used directly. Its specific subclass attribute description should be used:
          • Duration: animation duration
          • RepeatCount: number of repetitions. You can set HUGE_VALF or MAXFLOAT for an infinite loop.
          • RepeatDuration: Repetition time
          • RemovedOnCompletion: The default value is YES, indicating that the animation will be removed from the layer after execution, and the image will be restored to the state before execution. If you want the layer to remain in the animation state after execution, set it to NO, but set fillMode to kCAFillModeForwards.
          • FillMode: determines the behavior of the current object in a non-active period. For example, beginTime before or after the animation starts: it can be used to set the animation Execution Delay Time. To delay 2 s, set it to CACurrentMediaTime () + 2, CACurrentMediaTime () the current time of the layer.
          • TimingFunction: A speed control function that controls the animation running pace.
          • Delegate: animation proxy
      • CAAnimation-animation filling mode

        • FillMode attribute value (it is best to set removedOnCompletion = NO if fillMode is valid)

        • KCAFillModeRemoved is the default value. That is to say, before and after the animation starts, the animation has no effect on the layer. After the animation ends, the layer will return to the previous state.

        • KCAFillModeForwards when the animation ends, the layer will remain in the final state of the animation.
        • Before the animation starts, kCAFillModeBackwards adds the animation to a layer. Then, the layer enters the initial state of the animation and waits for the animation to start.
        • KCAFillModeBoth is actually the synthesis of the above two. Before the animation starts, the layer is in the initial state of the animation. After the animation ends, the layer remains in the final state of the animation.
      • CAAnimation -- Speed Control Function
        • CAMediaTimingFunction)
          • KCAMediaTimingFunctionLinear (linear): constant speed, giving you a relatively static feeling
          • KCAMediaTimingFunctionEaseIn
          • KCAMediaTimingFunctionEaseOut: the animation enters at full speed and then slows down to the destination.
          • KCAMediaTimingFunctionEaseInEaseOut: the animation enters slowly, accelerates in the middle, and then slows down to the destination. This is the default animation action.
      • CAAnimation-animation proxy method

      • @interface NSObject (CAAnimationDelegate)/* Called when the animation begins its active duration. */- (void)animationDidStart:(CAAnimation *)anim;/* Called when the animation either completes its active duration or * is removed from the object it is attached to (i.e. the layer). 'flag' * is true if the animation reached the end of its active duration * without being removed. */- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

        • Pause and resume an animation on CALayer

        • # Pragma mark pause the CALayer animation-(void) pauseLayer :( CALayer *) layer {CFTimeInterval pausedTime = [layer convertTime: CACurrentMediaTime () fromLayer: nil]; // stop CALayer from moving around the layer. speed = 0.0; // Let the CALayer time stay at the pausedTime time layer. timeOffset = pausedTime ;}# pragma mark restores the CALayer animation-(void) resumeLayer :( CALayer *) layer {CFTimeInterval pausedTime = layer. timeOffset; // 1. let CALayer continue to walk layer. speed= 1.0; // 2. cancels the stay time layer of the last record. timeOffset = 0.0; // 3. cancels the last set time layer. beginTime = 0.0; // 4. calculate the pause time (here CACurrentMediaTime ()-pausedTime) CFTimeInterval timeSincePause = [layer convertTime: CACurrentMediaTime () fromLayer: nil]-pausedTime; // 5. sets the start time (timeSincePause) layer relative to the parent coordinate system. beginTime = timeSincePause ;}

          • CADisplayLink
            • CADisplayLink is a clock mechanism triggered at the screen refresh frequency. It is executed about 60 times per second.
            • CADisplayLink is a timer that synchronizes the drawing code with the refresh frequency of the view. NSTimer cannot ensure the exact time when the timer is actually triggered.
            • Usage:
              • Define CADisplayLink and define the call Method
              • Add the display link to the main running cycle queue