iOS中的动画

#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