iOS编程------动画

//
//  ViewController.h
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIImageView *imageView;

@property (strong, nonatomic) IBOutlet UITextField *textField;
@end

//
//  ViewController.m
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import "ViewController.h"
#import "SecondViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

#pragma mark ---------------- 动画概述 ----------------------

/* UI23 动画
--> 属性动画
CALayer 动画 --> UIView 动画  --> 过渡动画
--> 仿射动画

CALayer 层  核心绘制层

CAAnimation 核心动画

*/

//一. UIView 动画
//1.属性动画
//UIView 做动画有两种方式, 动画块方式和block方式, 通常我们使用block方式.

//常用的属性有 背景色, alpha, center, frame, bounds等.

//二. CALayer 核心 绘画层
//UIView 和 CALayer 的关系
//UIView 并不进行渲染和绘画,真正负责渲染的是CALayer
//UIView可以看做是CALayer的代理,负责展示内容以及用户进行交互.
//UIView创建的时候带一个CALayer,UIView与绘制和渲染相关的属性其实是CALayer的属性,比如背景颜色.
//CALayer有很多的属性,UIView可以直接使用只是其中一部分,比如CALayer的圆角等.

//1.创建一个CALayer对象
CALayer *layer = [[CALayer alloc] init];

//2.设置属性
layer.frame = CGRectMake(200, 50, 100, 100);

//圆角
layer.cornerRadius = 50; // 0.5 宽

//边框宽度
layer.borderWidth = 2;

//边框颜色
layer.borderColor = [UIColor redColor].CGColor;

//阴影颜色
layer.shadowColor = [UIColor blueColor].CGColor;

//阴影透明度,默认为 0
layer.shadowOpacity = 0.5;

//阴影偏移量
layer.shadowOffset = CGSizeMake(10, 10);

//背景颜色
layer.backgroundColor = [UIColor yellowColor].CGColor;

//锚点
//x , y  0.0 ~ 1.0 之间数
//默认为 0.5 , 0.5 中心点
layer.anchorPoint = CGPointMake(0, 0);
layer.position = CGPointMake(200 + 50, 50 + 50);

// anchorPoint 默认在视图的中心点，
// layer 的postion 就是 anchorPoint 在父坐标系中的位置为 x: frame.x + 0.5 * width
// y: frame.y + 0.5 * height

// 我们通常设置 如果想要设置position 和 frame 相等。则只要设置 锚点为左上角，则 postion 和 frame 就相等了，但是如果之前设置了frame 会发现 更改锚点后，实际位置会发生变化，这是因为
// 本来
// position.x  = frame.x +   0.5 * width

//      250            200         50

// position.y = frame.y + 0.5 *height
//      100           50       50

// frame 为 200 50  position 为 250 100

// 设置锚点为0 。0 后，重新绘制了视图 position 和 frame相等
// 因此frame 变为  200  50  ---->  250 100

//3.添加到父 layer上
[self.view.layer addSublayer:layer];

//需求:设置一张圆角图片,QQ个人头像
//更改imageView的layer
//圆角
_imageView.layer.cornerRadius = 50;
//边框
_imageView.layer.borderWidth = 2;

_imageView.layer.borderColor = [UIColor yellowColor].CGColor;

//边界马赛克, 边界遮罩
_imageView.layer.masksToBounds = YES; //显示到边界

// Do any additional setup after loading the view, typically from a nib.
}

#pragma mark-------- 1.UIView属性动画------------

- (IBAction)propertyAnimation:(id)sender {

//iOS3.0之前UIView的动画方法都是类方法,需要我们把动画写在一个动画块里面.
/*
[UIView beginAnimation:]

//设置动画属性

[UIView commitAnimations]
*/

//1.开始动画
[UIView beginAnimations:@"动画名称" context:@"传递给代理的参数"];

//2.设置动画
//动画持续时间,重复几次,是否反转等等.
[UIView setAnimationDuration:2]; //动画时间

//    [UIView setAnimationRepeatCount:2];//重复次数

//    [UIView setAnimationRepeatAutoreverses:YES];//反转

[UIView setAnimationDelegate:self];//默认就是self

//代理触发的两个方法:
//动画开始之前触发
[UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];

//动画结束之后触发sel方法
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

//3.设置动画
_imageView.frame = CGRectMake(275, 50, 100, 100);

//4.提交动画
[UIView commitAnimations];

}

- (void)animationWillStart:(NSString *)animationID context:(void *)context {

NSLog(@"动画开始");
_imageView.backgroundColor = [UIColor yellowColor];
}

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {

NSLog(@"动画结束");
//从右边再移动左边
//1.设置开始
[UIView beginAnimations:nil context:nil];

//2.设置动画
[UIView setAnimationDuration:2];

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(propertyAnimation:)];

//3.更改属性
_imageView.frame = CGRectMake(0, 50, 100, 100);

//4.提交动画
[UIView commitAnimations];
}

// 重复动画
- (void)repeatAnimation
{
[self propertyAnimation:nil];
}

#pragma mark---------- 1.1 block 动画 --------------
- (IBAction)blockAnimation:(id)sender {

//iOS4.0 使用block封装了 动画块相关的方法,方便我们的使用.
//block 动画方法也是类方法
//    [UIView animateWithDuration:2 animations:^{
//        _imageView.frame = CGRectMake(275, 50, 100, 100);
//    }];

[UIView animateWithDuration:2 animations:^{
_imageView.frame = CGRectMake(275, 50, 100, 100);

} completion:^(BOOL finished) {
[UIView animateWithDuration:2 animations:^{

_imageView.frame = CGRectMake(0, 50, 100, 100);

} completion:^(BOOL finished) {

[self blockAnimation:nil];
}];
}];

}

#pragma mark ----------- 1.2 过渡动画 ----------
/*
- (IBAction)translateAnimation:(id)sender {

//1.创建secondVC
SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];
secondVC.view.backgroundColor = [UIColor yellowColor];

//2.父视图
UIView *superView = self.view.superview;

//3.过渡动画

//过渡动画也是类方法
//1.自己做动画
//需求, self.view 从父视图上面移除, secondVC.view添加到父视图上
//因此需要做动画的视图为父视图self.view.superView
//参数1 容器视图, 需要做动画的视图

//当block是另一个页面的属性时,页面间传值的时候需要防止重复引用.
__weak typeof(self) WeakSelf = self;

//    [UIView transitionWithView:self.view.superview duration:0.5 options:UIViewAnimationOptionTransitionCurlUp animations:^{
//        //动画操作 移除当前视图 添加second.view
//        [self.view removeFromSuperview];
//
//        [superView addSubview:secondVC.view];
//
//    } completion:nil];

//方法二. 两个页面间过渡
[UIView transitionFromView:self.view toView:secondVC.view duration:1 options:(UIViewAnimationOptionTransitionCurlUp) completion:nil];

//添加子视图
[self addChildViewController:secondVC];

}
*/

#pragma mark---------- 2. 仿射变换 ------------------
static int k = 10;
- (IBAction)rotationAnimation:(id)sender {

//仿射变换通常做三种样式的变换
//1.旋转 2.平移 3.缩放
//变换时有基于初始状态和基于上一次变换状态的两种
[UIView animateWithDuration:0.01 animations:^{

//旋转角度单位 -> 弧度    π -> 180角度对应的弧度
//弧度π 角度° π = 180°
//1°对应的弧度 = π / 180°
//        _imageView.transform = CGAffineTransformMakeRotation(M_PI);

//(2)以上次变化为基准
CGAffineTransform angle = CGAffineTransformMakeRotation(k * M_PI / 180);
_imageView.transform = angle;

//(1)以原始状态为基准
//        _imageView.transform = CGAffineTransformRotate(_imageView.transform, M_PI / 180); //基于上一次状态.

} completion:^(BOOL finished) {

k += 10; //每次增加10

[self rotationAnimation:nil];
}];

}

#pragma mark------------- 3.1 核心 基本动画 --------
- (IBAction)basicAnimation:(id)sender {

//给某一个属性做动画

//"opsition"
//1.创建基本动画对象
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];

//2.设置起始Value
basic.fromValue = [NSValue valueWithCGPoint:_imageView.layer.position];

//3.结束
basic.toValue = [NSValue valueWithCGPoint:(CGPointMake(325, 100))];

//4.设置动画
basic.duration = 2; //2秒

//5.给layer层添加核心动画 指定做动画的属性
[_imageView.layer addAnimation:basic forKey:@"position"];

//动画结束后,更改position
_imageView.layer.position = CGPointMake(325, 100);

}

#pragma mark--------- 3.2 关键帧动画 -----------
- (IBAction)keyframe:(id)sender {

_textField.backgroundColor = [UIColor redColor];

//实现晃动效果
//1.创建关键帧动画对象,指定属性
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];

//2.设置position.x的变化范围
CGFloat centerX = _textField.layer.position.x;

//移动到左边的位置
CGFloat left = centerX - 10;
//右边
CGFloat right = centerX + 10;

//3.创建运动轨迹
NSNumber *l = [NSNumber numberWithFloat:left];

NSNumber *c = [NSNumber numberWithFloat:centerX];

NSNumber *r = [NSNumber numberWithFloat:right];

//4.添加到帧动画的value数组中
keyframe.values = @[l, c, r, l, c, r, l, c, r, l, c, r, l, c, r];

//5.设置动画持续时间
keyframe.duration = 0.5;

//6.添加动画
[_textField.layer addAnimation:keyframe forKey:@"position.x"];

}

#pragma mark-------- 3.3 组动画 -----------------
- (IBAction)groupAnimation:(id)sender {

//1.创建一个动画组
//    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
CAAnimationGroup *group = [CAAnimationGroup animation];

//2.创建基本动画 移动 旋转

//创建移动动画对象
CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"position"];

CGFloat centerX = _imageView.layer.position.x;

CGFloat endX = 325;

//起始值value
move.fromValue = [NSValue valueWithCGPoint:(CGPointMake(centerX, 100))];

//最终value
move.toValue = [NSValue valueWithCGPoint:(CGPointMake(endX, 100))];

//设置move动画时间
move.duration = 2;

//创建旋转动画对象
CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"];

//fromValue
rotation.fromValue = [NSValue valueWithCATransform3D:_imageView.layer.transform];

//toValue
rotation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 0, 1)];

//动画时间
rotation.duration = 2;

//3.把多个动画对象添加到动画数组里面
group.animations = @[move, rotation];
group.duration = 2;

//4.给layer添加组动画
[_imageView.layer addAnimation:group forKey:@"group"];

}

#pragma mark---------- 3.4 核心过渡动画 ----------

- (IBAction)translateAnimation:(id)sender {

//1.创建过渡动画对象
CATransition *transition = [CATransition animation];

//2.设置过渡动画类型和动画方式
transition.type = @"cube"; //立方体

//动画执行的方式
transition.subtype = kCATransitionFromRight;

//动画持续时间
transition.duration = 0.5;

//3.添加动画
[self.view.superview.layer addAnimation:transition forKey:@"立方体效果"];

//4.移除当前视图 添加secondVC 视图

SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];
secondVC.view.backgroundColor = [UIColor whiteColor];

UIView *superView = self.view.superview;

[self.view removeFromSuperview];

[superView addSubview:secondVC.view];

//添加子视图控制器
[self addChildViewController:secondVC];

}

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

@end

/////////////////////////////////////////////////////////////////

//
//  SecondViewController.h
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface SecondViewController : UIViewController

@end

//
//  SecondViewController.m
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import "SecondViewController.h"

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}

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

#pragma mark----------- 返回上一个页面 ----------
//过渡动画
- (IBAction)backUp:(id)sender {

[UIView transitionFromView:self.view toView:self.parentViewController.view duration:1 options:(UIViewAnimationOptionTransitionCurlDown) completion:nil];
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/

@end

![animation](http://img.blog.csdn.net/20151007191900134)