文章标题

上下文动画（UIview ）

1. //创建动画
   [UIView beginAnimations:@”qq” context:nil];
   //设置动画时间
   [UIView setAnimationDuration:5];
   //设置动画延时
   [UIView setAnimationDelay:0];
   /*
   typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {
   UIViewAnimationCurveEaseInOut, // 满进慢出
   UIViewAnimationCurveEaseIn, // 慢进
   UIViewAnimationCurveEaseOut, // 慢出
   UIViewAnimationCurveLinear // 匀速
   };
   */

   //设置动画渐变曲线
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
   //设置重复次数
   [UIView setAnimationRepeatCount:1];

   // 设置动画块回调
   [UIView setAnimationDelegate:self];
   // 手动设定两个回调方法
   [UIView setAnimationWillStartSelector:@selector(willStartAction:)];
   [UIView setAnimationDidStopSelector:@selector(didStopAction:)];

   //提交动画
   [UIView commitAnimations];
   设定代理的方法，都是自定义的，如下：

   • (void)willStartAction:(NSString *)animationID {

     NSLog(@”%@”,animationID);
     NSLog(@”动画开始”);
     }

   • (void)didStopAction:(id)sender {

     NSLog(@”动画结束”);
     }
     任何需要设置的动画效果都可以放在提交动画之前设置。

支持设置的UIView属性包括frame,center,bounds,alpha,color

也支持UIView的transform属性设置，transform是设置3d位置变化的属性，它可以设置缩放、旋转和位移等…

//参数是width,height的倍数self.qqView.transform = CGAffineTransformMakeScale(1.5, 1.5);self.qqView.transform = CGAffineTransformScale(self.qqView.transform, 1.1, 1.1);//旋转self.qqView.transform = CGAffineTransformMakeRotation(M_PI/2);self.qqView.transform = CGAffineTransformRotate(self.qqView.transform, M_PI_4);//平移self.qqView.transform = CGAffineTransformMakeTranslation(200, 400);self.qqView.transform = CGAffineTransformTranslate(self.qqView.transform, 50, 50);

以上都有两个对应的方法，其中出现Make关键字的是一次性设定的最终状态。另一种方法则是在原视图的基础上，递增变化。

代码实现：

import “ViewController.h”

define AngleForRadian(radian) (radian)*M_PI/180

@interface ViewController ()
@property(strong,nonatomic)UIView*myView;
- (IBAction)btnAction:(id)sender;
@end

@implementation ViewController

• (void)viewDidLoad {
  [super viewDidLoad];

  self.myView=[[UIView alloc]initWithFrame:CGRectMake(0,0, 50, 50)];
  [self.myView setBackgroundColor:[UIColor redColor]];
  [self.view addSubview:self.myView];

}

• (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
  }

• (IBAction)btnAction:(id)sender {
  //创建
  [UIView beginAnimations:@”name” context:nil];
  //重复次数
  // [UIView setAnimationRepeatCount:2];
  //渐变曲线
  /*
  UIViewAnimationCurveEaseInOut, // slow at beginning and end
  UIViewAnimationCurveEaseIn, // slow at beginning
  UIViewAnimationCurveEaseOut, // slow at end
  UIViewAnimationCurveLinear
  */
  //[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  //延迟
  //[UIView setAnimationDelay:3];
  //持续时间
  [UIView setAnimationDuration:1];
  //是否反转
  //[UIView setAnimationRepeatAutoreverses:YES];
  //设置回调
  // [UIView setAnimationDelegate:self];
  //手动设置两个回调方法
  [UIView setAnimationWillStartSelector:@selector(Action1:)];
  [UIView setAnimationDidStopSelector:@selector(Action2)];

  //动画的终态设置

// [self.myView setFrame:CGRectMake(200, 200, 200, 200)];
// [self.myView setBackgroundColor:[UIColor greenColor]];
// [self.myView setAlpha:0.8];

//transform 3D类型的变化 处理平移，缩放，旋转
//平移
// //相对原来位置的坐标
//// self.myView.transform=CGAffineTransformMakeTranslation(200, 200);
// //相对变化的位置
// self.myView.transform=CGAffineTransformTranslate(self.myView.transform, 20, 20);

//缩放

// self.myView.transform=CGAffineTransformScale(self.myView.transform, 2, 2);
// self.myView.transform=CGAffineTransformMakeScale(0.5, 0.5);

//旋转

// self.myView.transform=CGAffineTransformMakeRotation(AngleForRadian(30));
self.myView.transform=CGAffineTransformRotate(self.myView.transform, AngleForRadian(30));

//提交动画[UIView commitAnimations];

}
-(void)Action1:(NSString*)name{
NSLog(@”%@的动画执行了”,name);

}
-(void)Action2{

NSLog(@"动画结束");

}
@end

二， block动画

二、block动画

1.动画时间

[UIView animateWithDuration:1 animations:^{    CGRect frame = self.qqView.frame;    frame.origin.x += 100;    self.qqView.frame = frame;}];

2.指定动画完成后的回调方法

[UIView animateWithDuration:2 animations:^{    //动画结束状态    CGRect frame = self.qqView.frame;    frame.origin.x += 100;    self.qqView.frame = frame;} completion:^(BOOL finished) {    //动画完成后执行    NSLog(@"动画结束");    [UIView animateWithDuration:1 animations:^{        CGRect frame = self.qqView.frame;        frame.origin.x -= 100;        self.qqView.frame = frame;    }];}];[UIView animateWithDuration:1 animations:^{    self.qqView.transform = CGAffineTransformMakeScale(1.5, 1.5);} completion:^(BOOL finished) {    [UIView animateWithDuration:1 animations:^{        //CGAffineTransformIdentity 恢复原来的状态        self.qqView.transform = CGAffineTransformIdentity;    }];}];

3.设定动画规则

[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{    self.qqView.transform = CGAffineTransformMakeTranslation(200, 200);} completion:nil];

UIViewKeyframeAnimationOptions（iOS4.0前是UIViewAnimationOptions）详解

UIViewKeyAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。UIViewKeyAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸UIViewKeyAnimationOptionBeginFromCurrentState //从当前状态开始动画UIViewKeyAnimationOptionRepeat //动画无限重复UIViewKeyAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复UIViewKeyAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间UIViewKeyAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线UIViewKeyAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照UIViewKeyAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果UIViewKeyAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项//时间函数曲线相关UIViewKeyAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快UIViewKeyAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快UIViewKeyAnimationOptionCurveEaseOut //时间曲线函数，由快到慢UIViewKeyAnimationOptionCurveLinear //时间曲线函数，匀速

4.关键帧动画

//关键帧动画[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{    // 设置关键帧    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1.0/4.0 animations:^{        CGRect frame = self.qqView.frame;        frame.origin.x -= 100;        self.qqView.frame = frame;    }];    [UIView addKeyframeWithRelativeStartTime:1.0/4.0 relativeDuration:2.0/4.0 animations:^{        CGRect frame = self.qqView.frame;        frame.origin.x += 200;        self.qqView.frame = frame;    }];    [UIView addKeyframeWithRelativeStartTime:3.0/4.0 relativeDuration:1.0/4.0 animations:^{        CGRect frame = self.qqView.frame;        frame.origin.x -= 100;        self.qqView.frame = frame;    }];} completion:^(BOOL finished) {}];

注意：确保每一帧的startTime跟上一次的结束时间是匹配的，总的帧的时间和要小于最外层帧动画的duration。

5.弹簧动画

// Damping 弹力，阻尼// initialSpringVelocity 初始速度[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:20 options:UIViewAnimationOptionRepeat animations:^{    self.qqView.transform = CGAffineTransformMakeTranslation(100, 200);} completion:^(BOOL finished) {}];

代码实现

#import “ViewController.h”
#define Angle(radian) (radian)*M_PI/180
@interface ViewController ()
- (IBAction)btn:(id)sender;
@property (weak, nonatomic) IBOutlet UIView *myView;

@end

@implementation ViewController

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
  }

• (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
  }

• (IBAction)btn:(id)sender {
  //fist
  // [UIView animateWithDuration:1.5 animations:^{
  // self.myView.transform=CGAffineTransformRotate(self.myView.transform, Angle(15));
  // }];
  //second
  // [UIView animateWithDuration:1 animations:^{
  // //第一次动画最终状态
  // self.myView.transform=CGAffineTransformRotate(self.myView.transform, Angle(45));
  //
  // } completion:^(BOOL finished) {
  // //第一次结束 执行第二次
  // [UIView animateWithDuration:1 animations:^{
  // // self.myView.center=self.view.center;
  // self.myView.transform=CGAffineTransformMakeScale(2, 2);
  // }completion:^(BOOL finished) {
  // NSLog(@”恢复初始化”);
  // //只对transform操作的方法恢复
  // self.myView.transform=CGAffineTransformIdentity;
  // }
  // ];
  //
  // }];

  //third
  // [UIView animateWithDuration:1 delay:1 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
  // self.myView.transform=CGAffineTransformRotate(self.myView.transform, Angle(45));
  //
  // } completion:^(BOOL finished) {
  // NSLog(@”动画结束”);
  // }];
  //
  //关键帧动画
  // [UIView animateKeyframesWithDuration:1 delay:0 options: UIViewKeyframeAnimationOptionRepeat animations:^{
  // //所有帧动画添加
  // [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1/4.0 animations:^{
  // CGRect frame=self.myView.frame;
  // frame.origin.y-=100;
  // [self.myView setFrame:frame];
  // }];
  //
  // [UIView addKeyframeWithRelativeStartTime:1/4.0 relativeDuration:2/4.0 animations:^{
  // CGRect frame=self.myView.frame;
  // frame.origin.y+=200;
  // [self.myView setFrame:frame];
  // }];
  // [UIView addKeyframeWithRelativeStartTime:3/4.0 relativeDuration:1/4.0 animations:^{
  // CGRect frame=self.myView.frame;
  // frame.origin.y-=100;
  // [self.myView setFrame:frame];
  // }];

//
// } completion:^(BOOL finished) {
// NSLog(@”回调”);
// }];

[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:20 options:    UIViewAnimationOptionRepeat animations:^{    self.myView.transform=CGAffineTransformMakeTranslation(100, 100);} completion:^(BOOL finished) {    NSLog(@"over");}];

}
@end

三、转场动画

1.从一个视图转场到另一个视图

[UIView transitionFromView:self.imageView2 toView:self.imageView1 duration:2 options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {    //转场后执行    NSLog(@"动画完毕");}];

2.作用于一个视图之上

[UIView transitionWithView:self.contentView duration:2 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{    [self.imageView1 removeFromSuperview];    [self.contentView addSubview:self.imageView2];} completion:^(BOOL finished) {    NSLog(@"动画完毕");}];

注:转场动画options支持的值如下

UIViewAnimationOptionTransitionNone //无转场动画UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转UIViewAnimationOptionTransitionCurlUp //上卷转场UIViewAnimationOptionTransitionCurlDown //下卷转场UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转

3.使用动画块处理转场

[UIView beginAnimations:@"tran" context:nil];[UIView setAnimationDuration:2];/* typedef NS_ENUM(NSInteger, UIViewAnimationTransition) { UIViewAnimationTransitionNone, UIViewAnimationTransitionFlipFromLeft,   从左侧翻转 UIViewAnimationTransitionFlipFromRight,   从右侧翻转 UIViewAnimationTransitionCurlUp,          从上翻页 UIViewAnimationTransitionCurlDown,        从下翻页 }; *///设置view转场动画[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.contentView cache:YES];//交换两个子视图的位置[self.contentView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];[UIView commitAnimations];

使用block实现转场的代码实现

#import “ViewController.h”

@interface ViewController ()
- (IBAction)btn:(id)sender;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
  }

• (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
  }

• (IBAction)btn:(id)sender {
  [UIView beginAnimations:@”name” context:nil];
  [UIView setAnimationDuration:1];
  [UIView setAnimationCurve:UIViewAnimationCurveLinear];
  //添加转场效果
  //第一个值 翻转效果 4种
  //第二个值 渲染的位置
  //第三个值 是否复制添加缓存
  [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.imageView cache:YES];
  //添加一个循环 让两张图片交替加载
  static BOOL is666=YES;
  if (is666) {
  self.imageView.image=[UIImage imageNamed:@”love”];
  }else{

  self.imageView.image=[UIImage imageNamed:@"666"];

  }
  is666=!YES;
  [UIView commitAnimations];
  }
  @end

转场代码实现

#import “ViewController.h”

@interface ViewController ()
- (IBAction)btnAction:(id)sender;
@property(strong,nonatomic)UIImageView*image1;
@property(strong,nonatomic)UIImageView*image2;
@end

@implementation ViewController

• (IBAction)btnAction:(id)sender {

  [UIView transitionFromView:self.image1 toView:self.image2 duration:1 options:UIViewAnimationOptionTransitionFlipFromTop completion:^(BOOL finished) {
  NSLog(@”转场成工”);
  }];

}
//懒加载image
-(UIImageView*)image1{
if (_image1==nil) {
_image1=[[UIImageView alloc]initWithFrame:CGRectMake(50, 100, CGRectGetWidth(self.view.frame)-100, 300)];
_image1.image=[UIImage imageNamed:@”666”];

}return _image1;

}
-(UIImageView*)image2{
if (_image2==nil) {
_image2=[[UIImageView alloc]initWithFrame:CGRectMake(50, 100, CGRectGetWidth(self.view.frame)-100, 300)];
_image2.image=[UIImage imageNamed:@”love”];

}return _image2;

}

• (void)viewDidLoad {
  [super viewDidLoad];

  [self.view addSubview:self.image1];

}

• (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
  }

@end
2.完善代码
增加连续变化，操作父视图

import “ViewController.h”

@interface ViewController ()
- (IBAction)btnAction:(id)sender;
@property(strong,nonatomic)UIImageView*image1;
@property(strong,nonatomic)UIImageView*image2;
@property(strong,nonatomic)UIView *backView;
@end

@implementation ViewController

• (IBAction)btnAction:(id)sender {
  //创建动画
  [UIView beginAnimations:@”CartoonName” context:nil];
  //动画播放时长
  [UIView setAnimationDuration:5];
  //延迟播放
  [UIView setAnimationDelay:5];
  // 播放次数
  [UIView setAnimationRepeatCount:2];

// //渲染两个父视图
// [UIView transitionFromView:self.image1 toView:self.image2 duration:1 options:UIViewAnimationOptionTransitionFlipFromTop completion:^(BOOL finished) {
// NSLog(@”转场成工”);
// }];
[UIView transitionWithView:self.backView duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
//涂层的变化
// [self.image1 removeFromSuperview];
// [self.backView addSubview:self.image2];

    //连续变化    if(self.image1.superview!=nil)    {        [self.image1 removeFromSuperview];        [self.backView addSubview:self.image2];    }else{        [self.image2 removeFromSuperview];        [self.backView addSubview:self.image1];    }} completion:^(BOOL finished) {    //转场成功}];[UIView commitAnimations];

}
//懒加载image
-(UIImageView*)image1{
if (_image1==nil) {
_image1=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame)-100, 300)];
_image1.image=[UIImage imageNamed:@”666”];

}return _image1;

}
-(UIImageView*)image2{
if (_image2==nil) {
_image2=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame)-100, 300)];
_image2.image=[UIImage imageNamed:@”love”];

}return _image2;

}

• (void)viewDidLoad {
  [super viewDidLoad];
  self.backView=[[UIView alloc]initWithFrame:CGRectMake(50, 100, CGRectGetWidth(self.view.frame)-100, 300)];

  [self.backView addSubview:self.image1];

  [self.view addSubview:self.backView];

}

• (void)didReceiveMemoryWarning {

  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
  }

@end