UI一揽子计划 23 (动画的使用场景、UIView动画、CGAffineTransform2D仿射变换、CALayer、CAAnimation、)

在iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验.
一. UIView动画
1). UIView动画块的使用 ([UIView beginAnimations: nil context : nil]; ……改变属性的内容写在中间…….[UIView commitAnimations];)
属性 frame / center / alpha / bounds / transform / backgroundColor

- (void)actionButton:(UIButton*)button
{

// UIView

的动画

��特点:

全是类方法调用,开始与结束之间的部分是动画改变的部分

/**

* 1.大小

2.位置

3.颜色

4.透明度

...

*/

//

动画开始
(类方法)

/**

*
参数1:

名字(标识符)

参数2:

携带的参数

*/

[UIView

beginAnimations:@"Start"

context:nil];

//

设置动画

// 1.设置时间

(设置时间在多少秒钟动画完结)

[UIView

setAnimationDuration:1];

// 2.设置动画延迟

(延迟多少秒开始)

[UIView

setAnimationDelay:0];

// 4.设置反转

[UIView

setAnimationRepeatAutoreverses:YES];

// 5.设置一个代理

[UIView

setAnimationDelegate:self];

// 6.设置代理方法

[UIView

setAnimationWillStartSelector:@selector(willStart)];

[UIView

setAnimationDidStopSelector:@selector(didStop)];

// 7.设置速度曲线

[UIView

setAnimationCurve:UIViewAnimationCurveEaseIn];

//8.循环几次

[UIView

setAnimationRepeatCount:1];

// 3.添加一个改变位置的动画

self.imageView.center

=
CGPointMake(300,

300);

//
设置持续动画

[UIView

setAnimationBeginsFromCurrentState:YES];

// 9.改变颜色

self.imageView.backgroundColor

= [UIColor

colorWithRed:arc4random()%256/255.0

green:arc4random()%256/255.0

blue:arc4random()%256/255.0

alpha:1];

//10.改变透明度

self.imageView.alpha

=
0;

// 11.改变大小

CGRect
frame =
self.imageView.frame;

frame.size

=
CGSizeMake(200,

200);

self.imageView.frame

= frame;

//

动画提交
[UIView

commitAnimations];
}

2).UIViewBlock动画的方法及CGAffineTransform2D仿射变换
/**

*
如果设置了翻转属性,

那么在结束之后不用再另行添加动效果了,不然动画套动画

略乱了

*/
UIView

动画的Block

方法
- (void)actionBlockButton1:(UIButton

*)button

{

// [UIView animateWithDuration:1 animations:^{

// //

执行的动画

// self.imageView.center = CGPointMake(400, 400);
// }];

//
上面方法不能复原

//
参数3:

该block

块儿
结束后干的事情

// [UIView animateWithDuration:1 animations:^{

// //

执行的动画
//// self.imageView.center = CGPointMake(400, 400);
2D

仿射变化
transform的形变属性
// /**

// *

参数1:

要形变的View

//

参数2, 3:

形变的属性

// */

// [UIView setAnimationRepeatAutoreverses:YES];

// self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, 100);

// } completion:^(BOOL finished) {

// //

上面动画结束后触发

// [UIView animateWithDuration:1 animations:^{

// //

执行的动画

// self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, -100);

// }];

//

// }];

//

// //

缩放

// [UIView animateWithDuration:1 animations:^{

// self.imageView.transform = CGAffineTransformScale(self.imageView.transform, -2, -2);

// } completion:^(BOOL finished) {

// [UIView animateWithDuration:2 animations:^{

// //

执行的动画

// self.imageView.transform = _transform;

// }];

//

// }];

//

//
需求:

点击按钮一直转
再按就停

//
旋转

// [self.timer fire];

[UIView

animateWithDuration:0.00001

animations:^{

self.imageView.transform

=
CGAffineTransformRotate(self.imageView.transform,

M_PI_4
/
5);

}
completion:^(BOOL

finished) {

[UIView

animateWithDuration:0.00001

animations:^{

//
执行的动画

[self

rotate];

}];

}];

_isRun
= !_isRun;

}

- (void)rotate

{

if
(_isRun

==
YES) {

[UIView

animateWithDuration:0.00001

animations:^{

self.imageView.transform

=
CGAffineTransformRotate(self.imageView.transform,

M_PI_4
/
5);

//
给一个转的初值

_isRun
=
YES;

}
completion:^(BOOL

finished) {

[UIView

animateWithDuration:0.00001

animations:^{

//
执行的动画

[self

rotate];

}];

}];
}

else
{
}
}
UIViewController 视图之间的动画切换

首先创建三个UIViewController.
将两个UIViewController写成属性,创建对象控制器,把控制器添加到rootVC 上,添加成子控制器,把子控制器显示出来.
- (void)addChildViews

{

//
创建控制器

self.thirdVC

= [[ThirdViewController

alloc]init];

//
把该控制器添加到rootVC

上面
添加成子控制器

[self

addChildViewController:self.thirdVC];

//
把thirdVC.view

显示出来

[self.view

addSubview:self.thirdVC.view];

//
创建控制器

self.secondVC

= [[SecondViewController

alloc]init];

//
把该控制器添加到rootVC

上面
添加成子控制器

[self

addChildViewController:self.secondVC];

//
把second.View

显示出来

[self.view

addSubview:self.secondVC.view];

}

添加按钮,在点击方法里实现视图的切换.

//

添加按钮

- (void)addBarButtonItem

{

UIBarButtonItem
*changeItem = [[UIBarButtonItem

alloc]initWithTitle:@"Change"

style:(UIBarButtonItemStylePlain)

target:self

action:@selector(actionChange:)];

self.navigationItem.leftBarButtonItem

= changeItem;

}

//

视图

实现切换

- (void)actionChange:(UIBarButtonItem

*)changeItem

{

_isChange
= !_isChange;

if
(_isChange

==
YES) {

[UIView

transitionFromView:self.secondVC.view

toView:self.thirdVC.view

duration:0.5

options:(UIViewAnimationOptionTransitionFlipFromLeft)

completion:^(BOOL

finished) {

}];

}
else
{
[UIView

transitionFromView:self.thirdVC.view

toView:self.secondVC.view

duration:0.5

options:(UIViewAnimationOptionTransitionFlipFromRight)

completion:^(BOOL finished)
{
}];
}

}
二.CALayer

CALayer 和 UIView 之间的区别:
CALayer 负责绘制,提供UIView 需要展示的内容,不能交互.
是UIView 的一个只读的readonly的属性. 而UIView负责交互,显示CALayer绘制的内容.

属性:CornerRadius 圆角/ ShadowColor 阴影颜色
/ ShadowOffSet 阴影偏移距离/ ShadowRadius 阴影模糊程度/ ShadowOpacity 阴影透明度/ BorderColor 描边颜色/ BorderWidth 描边粗细/ anchorPoint 锚点/ position 位置信息/ transform 形变属性

三. CAAnimation动画

CAAnimation 是一个抽象类, 通常使用它的子类实现动画效果,所有的CAAnimation及其子类的对象都添加在View的layer 上.


CAAnimation {
CAAnimationGroup;
CAPropertyAnimation;—>{
CABasicAnimation;
CAKeyFrameAnimation;

}
CATransition;
}
- (void)viewDidLoad
{

[super

viewDidLoad];

self.view.backgroundColor

= [UIColor

blackColor];

[self

addSubViews];

UILabel
*label = [[UILabel

alloc]initWithFrame:CGRectMake(20,

80,

60,

150)];

label.text

=
@"花\n好人\n月相\n圆思\n\n";

label.numberOfLines

=
0;

label.font

= [UIFont

fontWithName:@"Courier-Bold"

size:25];

label.textColor

= [UIColor

whiteColor];

[self.view

addSubview:label];

// Do any additional setup after loading the view.

}

- (void)addSubViews

{

self.myView

= [[UIView

alloc]initWithFrame:CGRectMake(250,

100,

100,

100)];

self.myView.backgroundColor

= [UIColor

whiteColor];

[self.view

addSubview:self.myView];

[_myView

release];

/**

* layer
是负责显示图层的,

要更改看到的图形的形状,

需要修改
layer.

*/

//
设置圆角

长
/
宽
除以2

就变成圆的了

self.myView.layer.cornerRadius

=
50;

// CGColorRef
是专门图层绘制的颜色

self.myView.layer.shadowColor

= [UIColor

yellowColor].CGColor;

//
显示范围

self.myView.layer.shadowOffset

=
CGSizeMake(0,

20);

//
阴影的透明度

self.myView.layer.shadowOpacity

=
1;

//
模糊程度

self.myView.layer.shadowRadius

=
50;

//
边框的宽度

self.myView.layer.borderWidth

=
2;

//
边框的颜色

self.myView.layer.borderColor

= [UIColor

yellowColor].CGColor;

//
边框的锚点

// self.myView.layer.anchorPoint = CGPointMake(0, 0);

UIButton
*button1 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button1.frame

=
CGRectMake(20,

640,

40,

20);

button1.backgroundColor

= [UIColor

blackColor];

[button1
addTarget:self

action:@selector(actionButton1:)

forControlEvents:(UIControlEventTouchUpInside)];

[button1
setTitle:@"旋转"

forState:(UIControlStateNormal)];

button1.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button1];

UIButton
*button2 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button2.frame

=
CGRectMake(70,

640,

40,

20);

button2.backgroundColor

= [UIColor

blackColor];

[button2
addTarget:self

action:@selector(actionButton2:)

forControlEvents:(UIControlEventTouchUpInside)];

[button2
setTitle:@"变大"

forState:(UIControlStateNormal)];

button2.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button2];

UIButton
*button3 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button3.frame

=
CGRectMake(120,

640,

40,

20);

button3.backgroundColor

= [UIColor

blackColor];

[button3
addTarget:self

action:@selector(actionButton3:)

forControlEvents:(UIControlEventTouchUpInside)];

[button3
setTitle:@"变色"

forState:(UIControlStateNormal)];

button3.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button3];

UIButton
*button4 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button4.frame

=
CGRectMake(170,

640,

40,

20);

button4.backgroundColor

= [UIColor

blackColor];

[button4
addTarget:self

action:@selector(actionButton4:)

forControlEvents:(UIControlEventTouchUpInside)];

[button4
setTitle:@"移动"

forState:(UIControlStateNormal)];

button4.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button4];

UIButton
*button5 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button5.frame

=
CGRectMake(220,

640,

60,

20);

button5.backgroundColor

= [UIColor

blackColor];

[button5
addTarget:self

action:@selector(actionButton5:)

forControlEvents:(UIControlEventTouchUpInside)];

[button5
setTitle:@"摇一摇"

forState:(UIControlStateNormal)];

button5.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button5];

UIButton
*button6 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button6.frame

=
CGRectMake(280,

640,

40,

20);

button6.backgroundColor

= [UIColor

blackColor];

[button6
addTarget:self

action:@selector(actionButton6:)

forControlEvents:(UIControlEventTouchUpInside)];

[button6
setTitle:@"3D"

forState:(UIControlStateNormal)];

button6.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button6];

UIButton
*button7 = [UIButton

buttonWithType:(UIButtonTypeCustom)];

button7.frame

=
CGRectMake(320,

640,

40,

20);

button7.backgroundColor

= [UIColor

blackColor];

[button7
addTarget:self

action:@selector(actionButton7:)

forControlEvents:(UIControlEventTouchUpInside)];

[button7
setTitle:@"组合"

forState:(UIControlStateNormal)];

button7.titleLabel.textColor

= [UIColor

redColor];

[self.view

addSubview:button7];

}

- (void)actionButton1:(UIButton

*)button

{

[self

xyAnimation];

}

- (void)actionButton2:(UIButton

*)button

{

[self

sizeAnimation];

}

- (void)actionButton3:(UIButton

*)button

{

[self

changBackgroundColor];

}

- (void)actionButton4:(UIButton

*)button

{

[self

positionPoint];

}

- (void)actionButton5:(UIButton

*)button

{

[self

shakePositionPoint];

}

- (void)actionButton6:(UIButton

*)button

{

[self

transform3DRotation];

}

- (void)actionButton7:(UIButton

*)button

{

[self

groupAnimation];

}

// layer

层动画

/**

* CAPropertyAnimation //
抽象类

* CABasicAnimation //
基础动画
更改大小
旋转等

* CAKeyframeAnimation //
主要按轨迹移动

//
比如播放执行一组事件
动画时候使用

*/

//

旋转

- (void)xyAnimation

{

//
新建一个基础动画

//
注意
KeyPath
一定不要拼错了

更改的是形变属性下
弧度的
x
轴

CABasicAnimation
*animation = [CABasicAnimation

animationWithKeyPath:@"transform.rotation.x"];

//
设置更改变化属性

// toValue
需要一个对象类型的
即
NSNumber
或者
NSValue
转化一下

animation.toValue

= [NSNumber

numberWithFloat:M_PI

*
1];

//
设置动画时间

animation.duration

=
1;

//
设置动画重复

animation.repeatCount

=
2;

//
把设置好的动画添加到layer

上

参数2 :

添加动画的表示

[self.myView.layer

addAnimation:animation

forKey:@"transform.rotation.x"];

}

//

改变大小的

- (void)sizeAnimation

{

//
更改大小的话需要更改
bounds.size

CABasicAnimation
*animation = [CABasicAnimation

animationWithKeyPath:@"bounds.size"];

//
设置改变的值

//
初始值

animation.fromValue

= [NSValue

valueWithCGSize:CGSizeMake(10,

10)];

//
结束值

animation.toValue

= [NSValue

valueWithCGSize:CGSizeMake(100,

100)];

animation.duration

=
1;

[self.myView.layer

addAnimation:animation

forKey:@"bounds.size"];

}

//

改变颜色

- (void)changBackgroundColor

{

//
可以执行一组动画

CAKeyframeAnimation
*animation = [CAKeyframeAnimation

animationWithKeyPath:@"backgroundColor"];

//
改变一组颜色

//
创建颜色

CGColorRef
green = [UIColor

greenColor].CGColor;

CGColorRef
red = [UIColor

redColor].CGColor;

CGColorRef
yellow = [UIColor

yellowColor].CGColor;

CGColorRef
orange = [UIColor

orangeColor].CGColor;

CGColorRef
blue = [UIColor

blueColor].CGColor;

animation.values

= [NSArray

arrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue,

nil];

animation.duration

=
5;

animation.repeatCount

=
5;

[self.myView.layer

addAnimation:animation

forKey:@"backgroundColor"];

}

//

轨迹移动

- (void)positionPoint

{

NSLog(@"%@",

NSStringFromCGPoint(self.myView.layer.position));

CAKeyframeAnimation
*animation = [CAKeyframeAnimation

animationWithKeyPath:@"position"];

NSValue
*value1 = [NSValue

valueWithCGPoint:CGPointMake(250,

200)];

NSValue
*value2 = [NSValue

valueWithCGPoint:CGPointMake(200,

250)];

NSValue
*value3 = [NSValue

valueWithCGPoint:CGPointMake(150,

300)];

NSValue
*value4 = [NSValue

valueWithCGPoint:CGPointMake(100,

350)];

NSValue
*value5 = [NSValue

valueWithCGPoint:CGPointMake(50,

400)];

NSValue
*value6 = [NSValue

valueWithCGPoint:CGPointMake(300,

150)];

animation.values

=
@[value1,value2,value3,value4,value5,value6];

animation.duration

=
1;

[self.myView.layer

addAnimation:animation

forKey:@"position"];

}

//

摇一摇

- (void)shakePositionPoint

{

//
方法一

// NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));

// CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

// NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(280, 150)];

// NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(300, 150)];

// NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(320, 150)];

//

// animation.values = @[value1,value2,value3];

// animation.duration = 0.1;

// animation.repeatCount = 3;

// [self.myView.layer addAnimation:animation forKey:@"position"];

//
方法二

CAKeyframeAnimation
*animation = [CAKeyframeAnimation

animationWithKeyPath:@"position.x"];

CGFloat
center =
self.myView.layer.position.x;

NSNumber
*l = [NSNumber

numberWithFloat:center -

10];

NSNumber
*r = [NSNumber

numberWithFloat:center +

10];

NSNumber
*c = [NSNumber

numberWithFloat:center];

animation.values

=
@[l,c,r];

animation.duration

=
0.1;

animation.repeatCount

=
3;

[self.myView.layer

addAnimation:animation

forKey:@"position.x"];

}

// 3D旋转

- (void)transform3DRotation

{

CABasicAnimation
*animation = [CABasicAnimation

animationWithKeyPath:@"transform"];

//
结束值

animation.toValue

= [NSValue

valueWithCATransform3D:(CATransform3DRotate(self.myView.layer.transform,

M_PI,

50,

50,

100))];

animation.duration

=
1;

animation.repeatCount

=
2;

[self.myView.layer

addAnimation:animation

forKey:@"transform"];

}

//

组动画

//

可以执行一组动画

- (void)groupAnimation

{

CAKeyframeAnimation
*animation = [CAKeyframeAnimation

animationWithKeyPath:@"backgroundColor"];

//

改变一组颜色

//
创建颜色

CGColorRef
green = [UIColor

greenColor].CGColor;

CGColorRef
red = [UIColor

redColor].CGColor;

CGColorRef
yellow = [UIColor

yellowColor].CGColor;

CGColorRef
orange = [UIColor

orangeColor].CGColor;

CGColorRef
blue = [UIColor

blueColor].CGColor;

animation.values

= [NSArray

arrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue,

nil];

animation.duration

=
5;

animation.repeatCount

=
5;

//

更改大小的话需要更改
bounds.size

CABasicAnimation
*animation1 = [CABasicAnimation

animationWithKeyPath:@"bounds.size"];

//
设置改变的值

//
初始值

animation1.fromValue

= [NSValue

valueWithCGSize:CGSizeMake(10,

10)];

//
结束值

animation1.toValue

= [NSValue

valueWithCGSize:CGSizeMake(100,

100)];

animation1.duration

=
1;

//

创建组动画

CAAnimationGroup
*group = [CAAnimationGroup

animation];

//
设置组动画的时间

group.duration

=
3;

//
设置执行的数组

//
数组当中

group.animations

=
@[animation,animation1];

[self.myView.layer

addAnimation:group

forKey:@"group"];
}