Animation UI_22 in iOS

Animation UI_22 in iOS

1. The controls we can see in iOS are subclasses of UIView, such as UIButton UILabel UITextField UIImageView and so on.

2. UIView can be displayed on the screen because a CALayer layer is automatically added when it is created. A drawRect: method is called to complete the drawing when the layer is displayed on the screen, can be displayed on the screen

3. CALayer itself has the display function, but it cannot respond to user interaction events. If you only want to display a graph, you can use CALayer to create it or use UIView to create it, however, to respond to user interaction events, you must use the UIView or subclass.

The animation knowledge frame is as follows:

 

#import ViewController.h#import UITextField+Shake.h@interface ViewController ()@property (retain, nonatomic) IBOutlet UIImageView *balloon;@property (retain, nonatomic) IBOutlet UITextField *TF;@property (retain, nonatomic) IBOutlet UIButton *bounces;@property (retain, nonatomic) IBOutlet UIView *animationView;@property (retain, nonatomic) IBOutlet UIImageView *cloud;@end@implementation ViewController

-(Void) viewDidLoad {[super viewDidLoad]; // obtain the layer CALayer * layer = self of the view that comes with the current view controller. view. layer; // UIButton * button = [UIButton buttonWithType: UIButtonTypeSystem]; // button. the color of layer // button must be CGColor self. animationView. layer. backgroundColor = [UIColor greenColor]. CGColor ;}

// Create a category for TF:

 

UITextField + Shake. h # import
 
  
@ Interface UITextField (Shake)-(void) shake; @ endUITextField + Shake. m # import UITextField + Shake. h @ implementation UITextField (Shake) // method of vibration-(void) shake {CAKeyframeAnimation * keyFrame = [CAKeyframeAnimation animationWithKeyPath: @ position. x]; keyFrame. values = @ [@ (self. center. x + 10), @ (self. center. x), @ (self. center. x-10)]; keyFrame. repeatCount = 10; keyFrame. duration= 0.03; [self. layer addAnimation: keyFrame forKey: nil] ;}@ end
 

 

 

Start Animation button click event

 

-(IBAction) handleAnimation :( UIButton *) sender {// attribute animation of UIView [self handlePropertyAnimation]; // The attribute animation Block form of UIView [self handlePrepertyAnimationBlock]; // UIView transition animation [self handleTrabsitionAnimation]; // CALayer animation [self handleCALayer]; // basic animation of CALayer [self handleBasicAnimation]; // CALayer's Key Frame Animation [self handleKeyFrameAnimation]; // UITextField calls the input vibration box method [self. TF shake]; // CALayer transition animation [self handleLayerCATransactionAnimation]; // CAAinmationGroup Group Animation [self handleAnimatonGroup];}

 

// The animation property of the UIView: frame center bounds alpha backgroundColor transfrom

// Modify attributes to make an animation. After the animation ends, the modification result of attributes is actually applied to the animation view and cannot be restored to the previous look.

-(Void) handlePropertyAnimation {// before iOS4.0, you must write the animation attributes to be modified between begin and commit // start the animation [UIView beginAnimations: nil context: nil]; // The proxy for the specified proxy animation does not need to follow the protocol, because the proxy has no Protocol [UIView setAnimationDelegate: self]; // set the animation duration [UIView setAnimationDuration: 3.0]; // set the number of animation repeatcount to set the repeated effect rotation effect to disappear immediately [UIView setAnimationRepeatCount: 3.0]; // set the reverse effect of the animation [UIView setAnimationRepeatAutoreverses: YES]; // set the animation change speed [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; // if you want to implement this method, you must set a proxy. This method triggers [UIView setAnimationDidStopSelector after the animation ends: @ selector (makeAnimationBack)]; // modify attributes for animation // 1. center: Modify the central point CGPoint center = self. animationView. center; center. y + = 10; self. animationView. center = center; // 2. modify transparency alpha self. animationView. alpha = 0.0; // 3. deformation tranform // <# CGAffineTransform t #> the angle of the previous variable // The rotation is 180/4 self. animationView. transform = CGAffineTransformRotate (self. animationView. transform, M_PI_4); self. animationView. transform = CGAffineTransformScale (self. animationView. transform, 0.5, 0.5); // submit the animation [UIView commitAnimations];}

// Restore to the status before the view

 

-(Void) makeAnimationBack {// self. animationView. center = self. view. center; self. animationView. alpha = 1.0; // restore to the original tranform state. The initial state is recorded in the CGAffineTransformIdentity record self. animationView. transform = CGAffineTransformIdentity;} // The attribute animation Block form of the UIView-(void) handlePrepertyAnimationBlock {// After iOS4.0, use the block form for animation _ block typeof (self) weakSelf = self; // 1. the first form of block // 01. animation duration // [UIView animateWithDuration: 2 Animations: ^ {// 1. modify the central point // CGPoint center = weakSelf. animationView. center; // center. y + = 50; // weakSelf. animationView. center = center; // 2. transparency // weakSelf. animationView. alpha = 0.0; // 3. deformation // weakSelf. animationView. transform = CGAffineTransformRotate (weakSelf. animationView. transform, M_PI_4); //}]; // 2. the second form of block [UIView animateWithDuration: 2 animations: ^ {// 1. obtain the central point CGPoint center = weakSelf. an ImationView. center; // change the center. y + = 50; weakSelf. animationView. center = center; // 2. transparency weakSelf. animationView. alpha = 0.0; // 3. modify transform weakSelf. animationView. transform = CGAffineTransformScale (weakSelf. animationView. transform, 0.5, 0.2);} completion: ^ (BOOL finished) {// return the State before the animation [weakSelf makeAnimationBack];}]; // 3. the third form of block // 01: Duration // 02: animation Execution Delay // 03: Set animation effects // 04: Fixed animation attributes // 05: animation Block [UIView animateWithDuration: 3 delay: 1 options: UIViewAnimationOptionAllowAnimatedContent animations: ^ {// 1. obtain the central point CGPoint center = weakSelf. animationView. center; // change the center. y + = 50; weakSelf. animationView. center = center; // 2. transparency weakSelf. animationView. alpha = 0.0; // 3. modify transform weakSelf. animationView. transform = CGAffineTransformScale (weakSelf. animationView. transform, 0.5, 0.2 );} Completion: ^ (BOOL finished) {// return the status before the animation [weakSelf makeAnimationBack] ;}]; // The fourth form of the block // parameter 1: animation duration // parameter 2: animation latency // parameter 3: Set the spring intensity range (0.0 ~ 1.0) // parameter 4: Set the Spring Speed // parameter 5: animation effect // parameter 6: Modify the attributes of the animation written here // parameter 7: block [UIView animateWithDuration: 2 delay: 1 usingSpringWithDamping: 0.5 initialSpringVelocity: 500 options: UIViewAnimationOptionCurveEaseInOut animations: ^ {CGPoint center = weakSelf. bounces. center; center. y + = 10; weakSelf. bounces. center = center; // transform weakSelf. bounces. transform = CGAffineTransformScale (weakSelf. bounces. transform, 1.2, 1.2);} completion: ^ (BOOL finished) {CGPoint center = weakSelf. bounces. center; center. y-= 10; weakSelf. bounces. center = center; weakSelf. bounces. transform = CGAffineTransformIdentity;}];}

 

// Transition animation of UIView

 

-(Void) handleTrabsitionAnimation {_ block typeof (self) weakSelf = self; // 01: To which view to add a transition animation // 02: animation time-on-demand // 03: animation effect [UIView transitionWithView: self. animationView duration: 2 options: UIViewAnimationOptionAllowAnimatedContent animations: ^ {weakSelf. animationView. transform = CGAffineTransformRotate (weakSelf. animationView. transform, M_PI_4);} completion: nil];}

 

// CALayer animation. Modifying the attributes of the layer for animation does not actually apply to this view. animation knowledge is an illusion.

-(Void) handleCALayer {// CALyer animation is the width self of the layer animation // border. animationView. layer. borderWidth = 10.0; // The border color self. animationView. layer. borderColor = [UIColor redColor]. CGColor; // rounded corner // self. animationView. layer. cornerRadius = 100; // retrieve unnecessary parts of the layer // self. animationView. layer. masksToBounds = YES; // subtract the extra part of the layer. // self. animationView. clipsToBounds = YES; // background image self. animationView. layer. contents = (id) [UIImage imageNamed: @wdgj785q1_'ckl4j1_11__41_(y.jpg]. CGImage; // when view 1 is created, the three points on the center of the anchorPoint of the anchorPoint are overlapped, 0.5), and the center of the view coincides with self. animationView. layer. anchorPoint = CGPointMake (0.5, 0); self. animationView. transform = CGAffineTransformRotate (self. animationView. transform, M_PI_4); // The Position of the reference point determines the layer of the current view. The Position of the parent view is subject to self in the coordinate system of the parent view. animationView. layer. position = CGPointMake (160,184 );}

// CALayer animation base class: CAAnimation

// CABasicAnimation basic animation

 

-(Void) handleBasicAnimation {// The CA animation modifies the layer attributes based on the principle of KVC to achieve the animation effect CABasicAnimation * basic = [CABasicAnimation animationWithKeyPath: @ position. x]; basic. fromValue = @ (-80); basic. toValue = @ (400); // sets the animation duration. basic. duration = 5.0; // set the number of animation repetitions. basic. repeatCount = 1000; [self. cloud. layer addAnimation: basic forKey: nil];}

 

// CAKeyFrameAnimation Key Frame Animation

 

-(Void) handleKeyFrameAnimation {CAKeyframeAnimation * keyFrame = [CAKeyframeAnimation animationWithKeyPath: @ position]; CGPoint point1 = self. cloud. center; CGPoint point2 = CGPointMake (160,100); CGPoint point3 = CGPointMake (270, self. cloud. center. y); // place the values required for an animation to be played in an array in order. The animation execution result changes in the order of the data in the array; // convert point struct type to object type NSValue * value1 = [NSValue valueWithCGPoint: point1]; NSValue * value2 = [NSValue usage: point2]; NSValue * value3 = [NSValue usage: point3]; keyFrame. repeatCount = 1000; keyFrame. duration= 15.0; keyFrame. values = @ [value1, value2, value3, value1]; [self. cloud. layer addAnimation: keyFrame forKey: nil];}

 

// CATransition CALayer excessive Animation

-(Void) handleLayerCATransactionAnimation {/* Various animation effects except 'fade ', 'movein', 'push', 'reveal ', other APIs that seem to be available (I think so, you can click to view the comments ). * the preceding four variables can be called using 'catransitionfade ', 'catransitionmovein', 'catransitionpush', and 'catransitionreve. * @ cube tumble effect * @ moveIn New View move to the old view * @ reveal display effect (remove the old view and display the new view below) * @ fade cross-fade transition (the transition direction is not supported) (this effect is achieved by default) * @ pageCurl flip up one page * @ pageUnCurl flip down one page * @ suckEffect contract effect, it is similar to the magic effect when the system minimizes the window (the transition direction is not supported) * @ rippleEffect dripping effect (the transition direction is not supported) * @ oglFlip top/bottom flip effect * @ rotate rotation effect * @ push * @ cameraIrisHollowOpen camera lens opening effect (transition direction not supported) * @ cameraIrisHollowClose camera lens Closing effect (transition direction not supported) * // create a transition animation object CATransition * transition = [CATransition animation]; // configure the animation transition style transition. type = @ cameraIrisHollowClose; // Add the transition animation to the layer [self. view. layer addAnimation: transition forKey: nil];}

// CAAinmationGroup Group Animation

-(Void) handleAnimatonGroup {// 1. create the first key frame animation and give the hot air balloon a motion track CAKeyframeAnimation * keyframePath = [CAKeyframeAnimation animationWithKeyPath: @ position]; // The beiser curve // 1. CGFloat radius = [UIScreen mainScreen]. bounds. size. height/2.0; // 01: center // 02: radius // 03: Start angle // 04: end angle // 05: rotation Direction (YES indicates clockwise NO indicates counterclockwise) UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: CGPointMake (0, radius) radius: radius startAngle:-M_PI_2 endAngle: M_PI_2 clockwise: YES]; // use the beiser curve as the motion track keyframePath. path = path. CGPath; // 2. create the second set of key frame animations to make the hot air balloon move from small to large to small. CAKeyframeAnimation * keyFrameScale = [CAKeyframeAnimation animationWithKeyPath: @ transform. scale]; // modify the size of the hot air balloon using a set of data keyFrameScale. values = @ [@ 1.0, @ 1.2, @ 1.4, @ 1.6, @ 1.8, @ 1.6, @ 1.4, @ 1.2, @ 1.0]; // create an animation group Object CAAnimationGroup * group = [CAAnimationGroup animation]; // Add the two animation effects to the group animation group. animations = @ [keyframePath, keyFrameScale]; group. duration = 8; group. repeatCount = 1000; [self. balloon. layer addAnimation: group forKey: nil];}

Final effect: