iOS开发详解之几种基础动画篇

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"];

}