#import "ViewController.h" #import "UITextField+Shake.h" @interface ViewController () @property (retain, nonatomic) IBOutlet UIImageView *balloonImage; @property (retain, nonatomic) IBOutlet UIButton *springBtn; @property (retain, nonatomic) IBOutlet UITextField *shuruTF; @property (retain, nonatomic) IBOutlet UIView *redVC; @property (retain, nonatomic) IBOutlet UIImageView *cloudImage; @property (retain, nonatomic) UIView *yellowView; @end @implementation ViewController - (IBAction)StartBtn:(id)sender { //[self handlePropertyAnimation]; //UIView 属性动画 //[self handlePropertyAnimationBlock]; // Block形式 //[self handleTransition]; //过度动画 //[self handleUIViewAndCALayer]; //[self handleBasicAnimation]; //[self handleKeyFrameAnimation]; //输入输入框 //[self.shuruTF shake]; //[self handleCATransition]; [self handleCAgroup]; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // self.yellowView = [[[UIView alloc] initWithFrame:self.redVC.frame] autorelease]; // self.yellowView.backgroundColor = [UIColor yellowColor]; // self.yellowView.tag = 100; } #pragma mark -- UIView动画 //UIView 属性动画 //能够做动画的属性:frame,center,bounds,alpha,transform,backgroundColor - (void)handlePropertyAnimation{ //iOS4.0 之前如果想做动画,必须放在开始可提交之间才有效 //对属性更改值是有效值,最终会对视图做出修改 //开始动画 [UIView beginAnimations:nil context:nil]; //1.设置动画持续时间 - s [UIView setAnimationDuration:3]; //2.设置动画代理 --- 但是,不需要服从代理 [UIView setAnimationDelegate:self]; //3.设置代理结束之后执行的方法 [UIView setAnimationDidStopSelector:@selector(handleDidStop)]; //4.试着动画的延迟的时间 - s //[UIView setAnimationDelay:2]; //5.设置动画从当前状态发生变化 [UIView setAnimationBeginsFromCurrentState:YES]; //6.设置动画是否反转 [UIView setAnimationRepeatAutoreverses:YES]; //7.设置动画重复次数 [UIView setAnimationRepeatCount:10]; //8.设置变化的变化曲线 [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; //center --视图位置 CGPoint center = self.redVC.center; center.y += 10; self.redVC.center = center; //alpha -- 透明度 self.redVC.alpha = 0.2; //transform -- 旋转和缩放 self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5); //提交 [UIView commitAnimations]; } //动画结束后实现的方法,让视图恢复原状 - (void)handleDidStop{ //center 回到原来的位置 self.redVC.center = self.view.center; //alpha 恢复为1.0 self.redVC.alpha = 1.0; //transform 回到原来的位置 self.redVC.transform = CGAffineTransformIdentity; } //iOS4.0之后 基于Block的动画 -- (推荐) - (void)handlePropertyAnimationBlock{ // [UIView animateWithDuration:4 animations:^{ // //1.最简单的block动画 // /* // //对属性更改,做动画效果 // //center --视图位置 // CGPoint center = self.redVC.center; // center.y += 10; // self.redVC.center = center; // //alpha -- 透明度 // self.redVC.alpha = 0.2; // //transform -- 旋转和缩放 // // self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); // // self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5); // // */ // //.Block 版本升级 -- 可检测动画结束时间 // //对属性更改,做动画效果 // //center --视图位置 // CGPoint center = self.redVC.center; // center.y += 10; // self.redVC.center = center; // //alpha -- 透明度 // self.redVC.alpha = 0.2; // //transform -- 旋转和缩放 // // self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); // // self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5); // // // } completion:^(BOOL finished) { // [self handleDidStop]; // }]; //Block 形式 加强版 -- 不光可以捕获动画结束时间,而且可以配置多个参数 // [UIView animateWithDuration:4 delay:2 options:UIViewAnimationOptionAutoreverse animations:^{ // CGPoint center = self.redVC.center; // center.y += 10; // self.redVC.center = center; // //alpha -- 透明度 // self.redVC.alpha = 0.2; // //transform -- 旋转和缩放 // // self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); // // self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5); // // // } completion:^(BOOL finished) { // [self handleDidStop]; // }]; //4.弹簧效果 //1:持续时间,2.延迟时间,3.弹簧强度,4.开始变化速度,5.动画效果参数6.动画代码,7.结束动画 [UIView animateWithDuration:8 delay:0 usingSpringWithDamping:0.001 initialSpringVelocity:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{ CGPoint center = self.redVC.center; center.y += 10; self.redVC.center = center; //alpha -- 透明度 self.redVC.alpha = 0.8; //transform -- 旋转和缩放 // self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI); self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 1.5, 1.5); } completion:^(BOOL finished) { [self handleDidStop]; }]; } //过渡动画 -- 界面间的过渡 - (void)handleTransition{ //1.只产生变化效果,但是界面没有切换 /* [UIView transitionWithView:self.redVC duration:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{ //旋转 self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); // M_PI_4 旋转45 M_PI_2 旋转90 M_PI 旋转180度 } completion:^(BOOL finished) { //[self handleDidStop]; }]; */ //2.从一个视图,切换到另一个视图 [UIView transitionFromView:self.redVC toView:self.yellowView duration:3 options:UIViewAnimationOptionTransitionCurlDown completion:^(BOOL finished) { UIView *tempView= [self.redVC retain]; self.redVC = self.yellowView; self.yellowView = tempView; [tempView release]; }]; } #pragma mark -- UIView与 CALayer //UIView 与CALayer 的区别 //UIView 其实是CALayer 层的简单封装,真正来绘制显示内容的还是CALayer,每一个视图对象都有一个Layer属性可以访问到自己的layer层.UIView只是封装了常用属性,不常用的属性还是要设置CALayer. - (void)handleUIViewAndCALayer{ //1.设置视图边框的宽度 self.redVC.layer.borderWidth = 2; //2.设置视图边框的颜色 self.redVC.layer.borderColor = [UIColor whiteColor].CGColor; //3.设置视图的圆角 self.redVC.layer.cornerRadius = 10; //4.超出 self.redVC.layer.masksToBounds = YES; //5.设置视图的锚点 -- 旋转的基准点 (锚点和旋转的基准点相同是,才会按设定的点转) self.redVC.layer.anchorPoint = CGPointMake(1, 1); // CGRect frame = self.redVC.frame; //CGRectGetMinX --- 获取一个视图的最小x //CGRectGetMinY --- 获取一个视图最小的y //CGRectGetMaxX -- 获取一个视图最大的x //CGRectGetMaxY -- 获取一个视图最大的y //self.redVC.layer.position = CGPointMake(CGRectGetMaxX(frame), CGRectGetMaxY(frame)); self.redVC.layer.position = CGPointMake((89+142), (215+138)); self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); } #pragma mark -- CALayer 动画 //CA属性动画 -- 基本属性动画 //CA动画修改属性值,最终不会作用到视图 //CAAnimation 基类 - (void)handleBasicAnimation{ /* CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"]; //变化开始值 basic.fromValue = @(1.0); //变化结束值 basic.toValue = @(0.2); //添加到视图的 layer 层 [self.redVC.layer addAnimation:basic forKey:nil]; */ //让云动起来 CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"]; //变化的开始值 basic.fromValue = @(self.cloudImage.center.x); //变化的结束值 basic.toValue = @([UIScreen mainScreen].bounds.size.width + CGRectGetWidth(self.cloudImage.frame) / 2); basic.duration = 10; basic.repeatCount = 100; //添加的视图的layer层 [self.cloudImage.layer addAnimation:basic forKey:nil]; // NSLog(@"%f",self.cloudImage.frame.size.width); // if (self.cloudImage.frame.size.width > ((89+142) / 2)) { // [self handlePropertyAnimationBlock]; // } } //CA属性动画 -- 关键帧动画 -(void)handleKeyFrameAnimation{ CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGPoint point1 = self.cloudImage.center; CGPoint point2 = CGPointMake([UIScreen mainScreen].bounds.size.width /2, 60); CGPoint point3 = CGPointMake([UIScreen mainScreen].bounds.size.width, self.cloudImage.center.y); NSValue *value1 = [NSValue valueWithCGPoint:point1]; NSValue *value2 = [NSValue valueWithCGPoint:point2]; NSValue *value3 = [NSValue valueWithCGPoint:point3]; keyFrame.values = @[value1,value2,value3,value1]; //添加到视图layer层 keyFrame.duration = 10; keyFrame.repeatCount = 100; [self.cloudImage.layer addAnimation:keyFrame forKey:nil]; } /* 过渡效果 fade //交叉淡化过渡(不支持过渡方向) kCATransitionFade push //新视图把旧视图推出去 kCATransitionPush moveIn //新视图移到旧视图上面 kCATransitionMoveIn reveal //将旧视图移开,显示下面的新视图 kCATransitionReveal cube //立方体翻滚效果 oglFlip //上下左右翻转效果 suckEffect //收缩效果，如一块布被抽走(不支持过渡方向) rippleEffect //滴水效果(不支持过渡方向) pageCurl //向上翻页效果 pageUnCurl //向下翻页效果 cameraIrisHollowOpen //相机镜头打开效果(不支持过渡方向) cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向) */ /* 过渡方向 kCATransitionFromRight kCATransitionFromLeft kCATransitionFromBottom */ //CA过渡动画 - (void)handleCATransition{ CATransition *transition = [CATransition animation]; //配置过度动画类型 transition.type = @"cube"; //transition.duration = 100; //配置过度动画方向 //transition.subtype = kCATransitionFromLeft; //添加视图layer层 [self.redVC.layer addAnimation:transition forKey:nil]; } //CA 分组动画 - (void)handleCAgroup{ //1.关键帧动画 -- 沿圆形轨迹移动 CAKeyframeAnimation *keyFrame1 = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGFloat y = [UIScreen mainScreen].bounds.size.width; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, y) radius:y startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES]; //关键帧动画给上圆形轨迹 keyFrame1.path = path.CGPath; //让贝塞尔曲线作为移动轨迹 keyFrame1.duration = 10; //2.关键帧动画 -- 气球放大缩小 CAKeyframeAnimation *keyFrame2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; keyFrame2.values = @[@(1.0),@(1.2),@(1.4),@(1.6),@(1.8),@(2.0),@(1.8),@(1.6),@(1.4),@(1.2),@(1.0)]; keyFrame2.duration = 10; //3.创建分组 CAAnimationGroup *group= [CAAnimationGroup animation]; group.animations = @[keyFrame2,keyFrame1]; group.duration = 1000; [self.balloonImage.layer addAnimation:group forKey:nil]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (void)dealloc { self.yellowView = nil; [_shuruTF release]; [_redVC release]; [_cloudImage release]; [_balloonImage release]; [_springBtn release]; [super dealloc]; } @end
UITextField+Shake.h #import <UIKit/UIKit.h> @interface UITextField (Shake) //抖动 - (void)shake; @end #import "UITextField+Shake.h" @implementation UITextField (Shake) //抖动 - (void)shake{ CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"]; keyFrame.values = @[@(self.layer.position.x - 10), @(self.layer.position.x),@(self.layer.position.x + 10),@(self.layer.position.x)]; //设置重复次数 keyFrame.repeatCount = 7; //持续时间 keyFrame.duration = 0.1; //添加到视图的layer层 [self.layer addAnimation:keyFrame forKey:nil]; } @end
