Core animation and ios core Animation

Source: Internet
Author: User

Core animation and ios core Animation
Core Animation

Tags (separated by spaces): ios advanced

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 works directly on CALayer, not UIView.

Framework Structure of core Animation

How to use Core Animation

If it is not a version later than xcode5, you must addQuartzCore.frameworkAnd introduce the corresponding framework<QuartzCore/QuartzCore.h>
Development steps:
1. First, you must have CALayer
2. initialize a CAAnimation object and set animation-related attributes.
3. CallAddAnimation: forKey:Method to add the CAAnimation object to CALayer, so that you can start executing the animation.
4. Call CALayer'sremoveAnimationForKey:You can 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. It should be used as a subclass.

Attributes (some are attributes from the CAMediaTiming Protocol)
  • 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 it is executed, and the image will be restored to the State before the animation is executed.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, before or after the animation starts
  • beginTime: It can be used to set the animation delay execution time. To delay 2 s, set CACurrentMediaTime () + 2, CACurrentMediaTime () as the current time of the layer.
  • timingFunction: Speed Control Function to control the animation running pace
  • delegate: Animation proxy
Animation filling mode

kCAFillModeRemoved
This 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 be restored to the previous state.
kCAFillModeForwards
After the animation ends, the layer remains in the final state of the animation.
kCAFillModeBackwardsBefore the animation starts, you only need to add the animation to a layer. The layer immediately enters the initial state of the animation and waits until the animation starts.
kCAFillModeBoth
This 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.

CAMediaTimingFunction)

kCAMediaTimingFunctionLinear(Linear): constant speed, giving you a relatively static feeling
kCAMediaTimingFunctionEaseIn(Gradual): the animation enters slowly and then accelerates the exit.
kCAMediaTimingFunctionEaseOut(Fade out): the animation enters at full speed and then slows down to the destination.
kCAMediaTimingFunctionEaseInEaseOut(Gradual fade-out): the animation enters slowly, accelerates in the middle, and then slows down to reach the destination. This is the default animation action.

CAAnimationDelegate (animation proxy method)

- (void)animationDidStart:(CAAnimation *)anim;
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

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 resume 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;
CAPropertyAnimation
  • CAPropertyAnimation is a subclass of CAAnimation and an abstract class. To create an animation object, use the following two subclasses:CABasicAnimation,CAKeyframeAnimation
  • KeyPath: specify a CALayer attribute named keyPath (NSString type), and modify the value of this attribute of CALayer to achieve the corresponding animation effect. For example, if @ "position" is specified as keyPath, the value of the position attribute of CALayer is modified to achieve the animation effect of translation.
CABasicAnimation attributes:

FromValue: Initial Value of the corresponding attribute of keyPath
ToValue: end value of the corresponding attribute of keyPath

Animation Process description:
  • As the Animation continues, the fromValue of the corresponding attribute of keyPath gradually changes to toValuekeyPath during the duration of duration.
  • The content is the animated Animatable attribute of CALayer.
  • IffillMode=kCAFillModeForwardsAt the same timeremovedOnComletion=NOAfter the animation is executed, the layer will remain in the State after the animation is executed. However, in essence, the attribute values of layers are the initial values before the animation is executed and are not actually changed.
Sample Code
-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// create an animation object CABasicAnimation * anima = [CABasicAnimation animation]; // set the modified attribute // anima. keyPath = @ "transform. scale "; anima. keyPath = @ "position"; // sets the modified value of anima. toValue = [NSValue valueWithCGPoint: CGPointMake (200,400)]; // do not remove anima when the animation is set. removedOnCompletion = NO; // The animation saves the latest animation effect. fillMode = kCAFillModeForwards; [_ redView. layer addAnimation: anima forKey: nil];}
CAKeyframeAnimation
  • CABasicAnimation can only be changed from one value (fromValue) to another value (toValue), and CAKeyframeAnimation will use an NSArray to save these values
Attribute description
  • values: 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 is ignored.
  • keyTimes: You can specify a time point for the 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 equally divided.
Sample Code
# Define angle2radion (angle)/180.0 * M_PI)-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// create a frame animation, animation CAKeyframeAnimation * anim = [CAKeyframeAnimation animation] between multiple values; // set the modified attribute anim. keyPath = @ "position"; // set the animation duration anim. duration = 1; // The animation that shakes back and forth // anim. values = @ [@ (angle2radion (-5), @ (angle2radion (5), @ (angle2radion (-5)]; // animation UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake (50, 50,200,200)]; [path addLineToPoint: CGPointMake (250,500)]; anim. path = path. CGPath; // Number of animation repetitions anim. repeatCount = MAXFLOAT; [_ imageView. layer addAnimation: anim forKey: nil];}
CAAnimationGroup

Is a subclass of CAAnimation. You 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
  • animations: NSArray used to save a set 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.
Sample Code
-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// create an animation group CAAnimationGroup * group = [CAAnimationGroup animation]; // Pan CAKeyframeAnimation * positionAnim = [CAKeyframeAnimation animation]; positionAnim. keyPath = @ "position"; positionAnim. path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake (50, 50,250,500)]. CGPath; // scale CABasicAnimation * anim = [CABasicAnimation animation]; anim. keyPath = @ "transform. scale "; anim. toValue = @ 0.1; // rotate CABasicAnimation * rotation = [CABasicAnimation animation]; rotation. keyPath = @ "transform. rotation "; rotation. toValue = @ (M_PI * 2); group. animations = @ [positionAnim, rotation]; group. autoreverses = YES; group. repeatCount = MAXFLOAT; // Note: You can set an animation group to adjust the animation duration. duration = 2; [_ redView. layer addAnimation: group forKey: nil];}
CATransition

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.

Attribute
  • 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)
Sample Code
-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// UIView transfer code // [UIView transitionWithView: _ imageView duration: 0.5 options: animated animations: ^ {//} completion: ^ (BOOL finished) {//}]; // create a transfer animation object CATransition * anim = [CATransition animation]; anim. duration = 2; // set the transfer type anim. type = @ "pageCurl"; anim. startProgress = 0.5; anim. endProgress = 0.8; // set the transfer direction, // anim. subtype = kCATransitionFromLeft; [_ imageView. layer addAnimation: anim forKey: nil]; // The transfer animation must be included with the transfer code}
Transfer animation type

UIView animation function for transfer Animation

// Single View

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;

// Double View

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

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.