iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验!
第一类: UIView 动画
UIView动画影响的属性有:
- frame: 视图框架
- center: 视图的位置
- alpha: 视图的透明度
- bounds: 视图的大小
- transform: 视图的装换
- backgroundColor: 背景色
UIView动画块的用法:(特点:全是类方法调用,结构上类似与自动释放池,开始与结束之间的部分是动画改变的部分)
UIView动画的几种设置方法:
- 动画的开始
// 参数1:标识符(名字)
// 参数2:携带的参数
[UIView beginAnimations:@"UIView" context:nil];
- 动画持续时间:
// 设置时间, 在多少秒钟完结动画
[UIView setAnimationDuration:3];
- 动画开始前延时:
// 设置动画延迟, 延迟多少秒开始
[UIView setAnimationDelay:0];
- 动画的速度曲线
// 设置速度曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn]
- 动画的反转
// 设置反转
[UIView setAnimationRepeatAutoreverses:YES];
- 动画的循环次数
// 设置循环执行
[UIView setAnimationRepeatCount:1];
- 设置动画的代理
// 设置代理
[UIView setAnimationDelegate:self];
- 动画开始的代理方法
[UIView setAnimationWillStartSelector:@selector(willStart)];
- 动画结束的代理方法
[UIView setAnimationWillStartSelector:@selector(willStart)];
- 动画从当前状态继续执行
// 设置持续执行动画
[UIView setAnimationBeginsFromCurrentState:YES];
- 动画提交
// 3.动画提交
[UIView commitAnimations];
UIView 动画的两种 block方法:
- 普通的 block 方法
[UIView animateWithDuration:1 animations:^{
// 执行的动画
_imageView.center = CGPointMake(200, 400);
}];
- 较常用的 block 方法(该 block 写动画结束后改做的事)
// 参数3:该 block 写动画结束后改做的事
[UIView animateWithDuration:1 animations:^{
// 如果设置了反转属性,那么在动画结束后不用在另行添加动画效果了
[UIView setAnimationRepeatAutoreverses:YES];
// 这里写执行的动画
} completion:^(BOOL finished) {
// 上面动画结束触发(相当于 代理方法中的完成动画的方法)
// 还可以继续添加其他的动画
[UIView animateWithDuration:1 animations:^{
} completion:^(BOOL finished) {
}];
}];
几种CGAffineTransform2D仿射变换
- 平移
#pragma mark - 平移(2D仿射变换方法)
// 参数3:该 block 写动画结束后改做的事
[UIView animateWithDuration:1 animations:^{
// 如果设置了反转属性,那么在动画结束后不用在另行添加动画效果了
[UIView setAnimationRepeatAutoreverses:YES];
// 执行的动画
// 平移(2D仿射变换方法)
// transform 形变属性
// 参数1:填要形变的 View
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 100, 0);
} completion:^(BOOL finished) {
// 上面动画结束触发(相当于 代理方法中的完成动画的方法)
// 复原位置
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -100, 0);
}];
- 缩放
#pragma mark - 缩放(2D仿射变换方法)
[UIView animateWithDuration:1 animations:^{
// 反转
[UIView setAnimationRepeatAutoreverses:YES];
// 缩放(2D仿射变换方法)
// 参数2/3 是缩放的比例
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 2, 2);
} completion:^(BOOL finished) {
self.imageView.transform = _transform;
}];
- 旋转
#pragma mark - 旋转(2D仿射变换方法)
// 需求:
// 点击按钮,开始旋转,再点停止转动
[UIView animateWithDuration:0.1 animations:^{
// 旋转
// 参数二:旋转角度
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);
} completion:^(BOOL finished) {
// 结束时调用旋转方法
[self rotateAnimation];
}];
_isRuning = !_isRuning;
}
// 循环转
- (void)rotateAnimation
{
if (_isRuning == YES) {
[UIView animateWithDuration:0.1 animations:^{
// 旋转
// 参数二:旋转角度
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);
// 给旋转的初值
self.isRuning = YES;
} completion:^(BOOL finished) {
// 结束时调用旋转方法
[self rotateAnimation];
}];
}
}
实现两个视图控制器的界面动画跳转
需要创建一个控制器,把要实现跳转的两个控制器的 self.view 添加到这个控制器上
#import "RootViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"
@interface RootViewController ()
// 声明两个控制器
@property (nonatomic, retain) SecondViewController *secondVC;
@property (nonatomic, retain) ThirdViewController *thirdVC;
// 声明一个状态标识,标识显示哪个 View
@property (nonatomic, assign) BOOL isShowSecondVC;
@end
@implementation RootViewController
- (void)dealloc
{
[_secondVC release];
[_thirdVC release];
[super dealloc];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor yellowColor];
[self addChildViews];
[self addButtonItem];
}
// 添加控制器并显示视图
- (void)addChildViews
{
// 创建 thirdVC
self.thirdVC = [[ThirdViewController alloc] init];
// 把该控制器添加到 rootVC的子控制器
<span style="color:#FF0000;">[self addChildViewController:self.thirdVC];</span>
// 把 secondVC.view 显示出来
<span style="color:#FF0000;">[self.view addSubview:self.thirdVC.view];</span>
[_thirdVC release];
// 创建控制器
self.secondVC = [[SecondViewController alloc] init];
// 把该控制器添加到 rootVC的子控制器
<span style="color:#FF0000;">[self addChildViewController:self.secondVC];</span>
// 把 secondVC.view 显示出来
<span style="color:#FF0000;">[self.view addSubview:self.secondVC.view];</span>
[_secondVC release];
// 给标识一个初值
self.isShowSecondVC = YES;
}
// 添加按钮
- (void)addButtonItem
{
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithTitle:@"跳转" style:UIBarButtonItemStylePlain target:self action:@selector(actionButton:)];
self.navigationItem.leftBarButtonItem = button;
[button release];
}
// 实现视图切换
- (void)actionButton:(UIBarButtonItem *)button
{
if (_isShowSecondVC == YES) {
<span style="color:#FF0000;">[UIView transitionFromView:self.secondVC.view toView:self.thirdVC.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
}];</span>
} else {
// 切换过来
// UIView 切换动画
<span style="color:#FF0000;">[UIView transitionFromView:self.thirdVC.view toView:self.secondVC.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight completion:^(BOOL finished) {
}];</span>
}
// 更改标识符状态
_isShowSecondVC = !_isShowSecondVC;
}
CALayer 的基本属性
// 创建视图
- (void)addSubViews
{
self.myView = [[UIView alloc] initWithFrame:CGRectMake(100, 150, 100, 100)];
self.myView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:self.myView];
[_myView release];
// layer 是负责显示图层的
// 要更改看到的形状,需要更改 layer
// 设置圆角
// 变圆的先决条件必须是长宽相同
self.myView.layer.cornerRadius = self.myView.frame.size.width / 2;
// 设置阴影的颜色
// CGColorRef 是涂层绘制的颜色
self.myView.layer.shadowColor = [UIColor yellowColor].CGColor;
// 设置阴影的显示范围
self.myView.layer.shadowOffset = CGSizeMake(10, 10);
// 阴影透明度
self.myView.layer.shadowOpacity = 1;
// 模糊程度
self.myView.layer.shadowRadius = 50;
// 设置边框
self.myView.layer.borderWidth = 5;
// 设置边框的颜色
self.myView.layer.borderColor = [UIColor redColor].CGColor;
layer 层动画
CAPropertyAnimation 是一个抽象类
CABasicAnimation 基础动画, 能实现类似:更改大小,旋转等动画
CAKeyframeAnimation 主要能实现类似按轨迹移动, 位置, 执行一组动画(背景颜色)
几种常用的 layer 层动画
- 旋转
// 旋转
- (void)xyAnimation
{
// 创建一个基础动画
// 注意: KeyPath 一定不要拼错
// 要更改的是 transform.rotation.x
// 形变属性下 弧度的点 X 轴
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
// 设置属性变化 到什么值
// toValue 需要一个对象类型,即 NSNumber 或 NSValue
animation.toValue = [NSNumber numberWithFloat:M_PI];
// 设置动画时间
animation.duration = 1;
// 设置动画重复
animation.repeatCount = 2;
// 把设置好的动画添加到 layer上
// 参数2:添加的动画标识
[self.myView.layer addAnimation:animation forKey:@"transform.rotation.x"];
}
- 改变 size
// 改变 size
- (void)sizeAnimation
{
// 更改大小的话,需要更改 bounds.size
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
// 设置改变的值
// fromValue 初始值
animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
// toValue 结束值
animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
// 设置时间
animation.duration = 1;
// 添加到 layer 上
[self.myView.layer addAnimation:animation forKey:@"bounds.size"];
}
- 改变颜色
// 改变颜色
- (void)changeBackGroundColor
{
// 可以执行一组动画
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
// 创建绘制颜色
CGColorRef color1 = [UIColor orangeColor].CGColor;
CGColorRef color2 = [UIColor lightGrayColor].CGColor;
CGColorRef color3 = [UIColor greenColor].CGColor;
CGColorRef color4 = [UIColor blueColor].CGColor;
// 改变一组颜色
animation.values = @[(id)color1, (id)color2, (id)color3, (id)color4];
// 设置时间
animation.duration = 2;
// 添加到 layer 上
[self.myView.layer addAnimation:animation forKey:@"backgroundColor"];
}
- 轨迹移动
// 轨迹移动
- (void)positionPoint
{
// NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 创建一堆点
NSValue *point1 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
NSValue *point2 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
NSValue *point3 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
NSValue *point4 = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
NSValue *point5 = [NSValue valueWithCGPoint:CGPointMake(100, 400)];
// 添加点进数组
animation.values = @[point1, point2, point3, point4, point5];
// 设置时间
animation.duration = 1;
// 添加到 layer上
[self.myView.layer addAnimation:animation forKey:@"position"];
}
- 左右晃动
// 左右晃动
- (void)positionX
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
CGFloat center = self.myView.layer.position.x;
CGFloat left = center - 100;
CGFloat right = center + 100;
NSNumber *r = [NSNumber numberWithFloat:right];
NSNumber *c = [NSNumber numberWithFloat:center];
NSNumber *l = [NSNumber numberWithFloat:left];
animation.values = @[r, c, l, c];
// 设置时间
animation.duration = 0.5;
// 设置重复次数
animation.repeatCount = 1000;
// 添加到 layer上
[self.myView.layer addAnimation:animation forKey:@"position.x"];
}
- 3D 旋转
#pragma mark - 3D旋转
- (void)transform3D
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
// 结束值
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.myView.layer.transform, M_PI, 10, 20, 20)];
animation.duration = 1;
[self.myView.layer addAnimation:animation forKey:@"transform"];
}
- 组动画
#pragma mark - 组动画
- (void)groupAnimation
{
// 创建组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
//改变颜色/
// 改变颜色
// 可以执行一组动画
CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
// 创建绘制颜色
CGColorRef color1 = [UIColor orangeColor].CGColor;
CGColorRef color2 = [UIColor lightGrayColor].CGColor;
CGColorRef color3 = [UIColor greenColor].CGColor;
CGColorRef color4 = [UIColor blueColor].CGColor;
// 改变一组颜色
animation1.values = @[(id)color1, (id)color2, (id)color3, (id)color4];
//改变大小/
// 更改大小的话,需要更改 bounds.size
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
// 设置改变的值
// fromValue 初始值
animation2.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
// toValue 结束值
animation2.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
// 设置组动画时间
group.duration = 3;
// 设置组动画执行的动画数组
group.animations = @[animation1, animation2];
// 添加到 layer 上
[self.myView.layer addAnimation:group forKey:@"group"];
}