iOS程序猿之iOS动画基础

来源：互联网发布：西班牙wifi破解软件编辑：程序博客网时间：2024/04/30 09:35

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

0 0