17-UIKit（UIView的动画）

2. UIView的动画

UIView类本身具有动画的功能

2.1 概念

由UI对底层Core Animation框架的封装

可以轻松简单的实现动画效果

2.2 两种使用方式

1> Block

基本步骤

1>设置参与动画的视图的初始状态   alpha=0.0

2>[UIView animateWithDuration:]

3>将结束状态写到block中

例1

- (IBAction)start:(id)sender {
    [UIView animateWithDuration:3.0 animations:^{
        self.imageView.alpha = 1.0;// 目标值
    }];
}

例2

// 界面显示后调用此方法，一般用来设置动画
-(void)viewDidAppear:(BOOL)animated{
    // label动画
    [super viewDidAppear:animated];
    CGRect endFrame = self.label.frame;
    CGRect startFrame = endFrame;
    startFrame.origin.x = - self.label.frame.size.width;
    self.label.frame = startFrame;// frame开始值
    self.label.alpha = ;// 透明度开始值
    [UIView animateWithDuration:2.0 animations:^{
        self.label.frame = endFrame;// frame结束值
        self.label.alpha = 1.0;// 透明度结束值
    }];
    // 飞机入场
    self.imageView.image = [UIImage animatedImageNamed:@"ship-anim" duration:1.0];
    endFrame = self.imageView.frame;
    startFrame = endFrame;
    startFrame.origin.y = self.view.frame.size.height;
    self.imageView.frame = startFrame;
    [UIView animateWithDuration:2.0 animations:^{
        self.imageView.frame = endFrame;
    }];
}
- (IBAction)start:(id)sender {
    CGPoint center = self.imageView.center;
    center.y -= ;
//    CGAffineTransform transform = CGAffineTransformRotate(self.imageView.transform, M_PI);
//    CGAffineTransform transform = CGAffineTransformMakeScale(1.5, 1.5);
    // Duration动画时长 delay延迟
    [UIView animateWithDuration:2.0 delay: options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat animations:^{
        self.imageView.center = center;
//        self.imageView.transform = transform;
    } completion:nil];

}

- (IBAction)back:(id)sender {
    CGRect endFrame = self.imageView.frame;
    endFrame.origin.y += ;
    [UIView animateWithDuration:1.0 delay: options:UIViewAnimationOptionCurveEaseIn animations:^{
        self.imageView.frame = endFrame;
    } completion:nil];
}

例3

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self animateOnView:self.imageView duration:1.0 clockWise:NO];// clockWise  YES顺时针
}
-(void)animateOnView:(UIView *)view duration:(NSTimeInterval)duration clockWise:(BOOL)clockWise{
    // completion动画结束要做的事
    [UIView animateWithDuration:duration delay: options:UIViewAnimationOptionCurveLinear animations:^{
        view.transform = CGAffineTransformRotate(view.transform, M_PI_2 * (clockWise ?  : -));
    } completion:^(BOOL finished) {
        if (!self.needStoped) {
            // 递归调用
            [self animateOnView:view duration:duration clockWise:clockWise];
        }
    }];
}
// 停止动画
- (IBAction)stopAnimation:(id)sender {
    self.needStoped = YES;
}
// 恢复动画
- (IBAction)startAnimation:(id)sender {
    self.needStoped = NO;
    [self viewDidAppear:YES];
}

2> Commit

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    // 1开始一个动画,给动画起个名字,
    [UIView beginAnimations:@"snow" context:nil];
    // 2设置动画相关属性
    [UIView setAnimationDuration:4.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    // 3动画目标值
    self.snow.center = CGPointMake(self.snow.center.x, self.view.bounds.size.height - self.snow.frame.size.height);
    // 4提交动画,动画开始
    [UIView commitAnimations];
}

2.3 什么属性能做动画的设置属性

.frame

.bounds

.center

.transform

.alpha

等

稍复杂的动画[MX6-飘雪花练习]

#define MAX_SIZE 10
#define MAX_DURATION 5//速度
#define MAX_OFFSET_X 100
#define FPS 30
#define DISAPPER_DURATION 2

@interface MXViewController ()
@property(nonatomic) NSInteger count;
@property(nonatomic,strong) NSTimer *timer;
@end

@implementation MXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(viewDidAppear:) userInfo:nil repeats:YES];
    self.timeInterVal = /FPS;
}

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [NSTimer scheduledTimerWithTimeInterval:self.timeInterVal target:self selector:@selector(generatorSnow) userInfo:nil repeats:YES];
}
// 生成雪片
-(void)generatorSnow{
    self.count++;
    // 创建随机大小的雪花
    NSInteger size = arc4random() % MAX_SIZE + MAX_SIZE;
    UIImageView *snow = [[UIImageView alloc] initWithFrame:CGRectMake(arc4random() % , , size, size)];
    snow.image = [UIImage imageNamed:@"snow.png"];
    snow.tag = self.count;
    // 加入到父视图中
    [self.view addSubview:snow];

    // 创建动画
    [UIView beginAnimations:[NSString stringWithFormat:@"%d",self.count] context:nil];
    [UIView setAnimationDuration:arc4random() % MAX_DURATION + ];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

    // 设置了delegate，动画结束后才会自动调用disappearAnimate:
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(disappearAnimate:)];// 动画结束后调用disappearAnimate

    NSInteger offSetX = arc4random() % MAX_OFFSET_X - ;
    // 设置动画目标值
    snow.center = CGPointMake(snow.center.x + offSetX, self.view.bounds.size.height - );
    snow.transform = CGAffineTransformMakeRotation((arc4random() % )/ * M_PI * );
    [UIView commitAnimations];
}
- (IBAction)changeSnow:(UISlider *)sender {
    CGFloat value = sender.maximumValue - sender.value;
    self.timeInterVal = value * FPS;
    [self.timer invalidate];
    self.timer = [NSTimer scheduledTimerWithTimeInterval:self.timeInterVal target:self selector:@selector(generatorSnow) userInfo:nil repeats:YES];
}
// 雪花消失
-(void)disappearAnimate:(NSString *)animationId{
    [UIView beginAnimations:animationId context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationDuration:arc4random() % DISAPPER_DURATION + ];

    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(deleteView:)];

    UIImageView *snow = (UIImageView *)[self.view viewWithTag:[animationId intValue]];
    snow.alpha = ;
    [UIView commitAnimations];
}
// 删除雪花对象
-(void)deleteView:(NSString *)animationId{
    UIImageView *snow = (UIImageView *)[self.view viewWithTag:[animationId intValue]];
    [snow removeFromSuperview];// 删除子视图的方式
    // NSLog(@"雪花对象:%p,雪花数量:%d",snow,[self.view subviews].count);
}

2.4 UIView执行动画的方法:

[UIView animateWithDuration:duration delay:delay             options:UIViewAnimationOptionCurveEaseIn animations:^{

self.playerView.frame = endFrame;

} completion:nil];

duration:  动画时长(秒)

delay: 启动动画的延迟(秒)

animations:

设置动画结束后的状态

completion:

动画结束后需要做事的

options:

UIViewAnimationOptionCurveEaseInOut 动画先从慢到快，再从快到慢

UIViewAnimationOptionCurveEaseIn    越来越快

UIViewAnimationOptionCurveEaseOut   越来越慢

UIViewAnimationOptionCurveLinear    匀速

UIViewAnimationOptionAllowUserInteraction  在动画期间是否允许用户交互

UIViewAnimationOptionBeginFromCurrentState  动画要不要从当前位置开始，如果不选，那就从初始位置开始

UIViewAnimationOptionRepeat   动画重复执行

UIViewAnimationOptionAutoreverse   动画是否需要反向执行

UIViewAnimationOptionLayoutSubviews 当动画发生大小变化时，是否需要重新布局

UIViewAnimationOptionAllowAnimatedContent  在动画的同时要不要执行Redraw

旋转动画

2.5 UIView设置全局属性方式动画

1>设置开始状态

2>开始动画,并给动画命名

[UIView beginAnimations:@"动画名" ….];

3>设置动画相关属性

[UIView setAnimationDuration:…];

[UIView setAnimationCurve:…];

….

4>设置动画结束状态

5>提交动画

[UIView commitsAnimation];

注意：

当设置了delegate后，DidStopSelector才会有效。

[UIView setAnimationDelegate:self];

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

3. iOS7新增DynamicAnimator

@interface MXViewController () <UIDynamicAnimatorDelegate>
@property(nonatomic,strong) UIDynamicAnimator *animator;//
@property(nonatomic,strong) UIDynamicBehavior *behavior;// 行为(容器)
@property(nonatomic,strong) UIGravityBehavior *gravity;// 重力
@property(nonatomic,strong) UICollisionBehavior *collision;// 碰撞

@end

@implementation MXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
-(UIGravityBehavior *)gravity{
    if (!_gravity) {
        _gravity = [[UIGravityBehavior alloc] init];
        _gravity.magnitude = 0.9;// 重力值
    }
    return _gravity;
}
-(UICollisionBehavior *)collision{
    if (!_collision) {
        _collision = [[UICollisionBehavior alloc] init];
        _collision.translatesReferenceBoundsIntoBoundary = YES;// 周围边界翻译为碰撞边界
    }
    return _collision;
}
-(UIDynamicBehavior *)behavior{

    if (!_behavior) {
        _behavior = [[UIDynamicBehavior alloc] init];
        [_behavior addChildBehavior:self.gravity];
        [_behavior addChildBehavior:self.collision];
    }
    return _behavior;
}
-(UIDynamicAnimator *)animator{
    if (!_animator) {
        _animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
        _animator.delegate = self;
    }
    return _animator;
}
- (IBAction)dropTap:(id)sender {
    UIView *dropView = [[UIView alloc] initWithFrame:CGRectMake(arc4random() % , , , )];
    dropView.backgroundColor = [self roundColor];
    [self.view addSubview:dropView];
    [self.gravity addItem:dropView];
    [self.collision addItem:dropView];
    [self.animator addBehavior:self.behavior];

}
-(UIColor *)roundColor{
    switch (arc4random() % ) {
        case :
            return [UIColor greenColor];
            break;
        case :
            return [UIColor grayColor];
            break;
        case :
            return [UIColor redColor];
            break;
        case :
            return [UIColor yellowColor];
            break;
        case :
            return [UIColor blackColor];
            break;
        default:
            break;
    }
    return nil;
}
-(void)dynamicAnimatorDidPause:(UIDynamicAnimator *)animator{
    [animator removeBehavior:self.behavior];
}

作业:

1. 飞机大战Demo版

屏幕上有一个飞机，你点在屏幕的哪，飞机就飞到哪儿

2. 模仿一个淘宝的购物车

窗口左上角一个一图片，代表一个宝贝，点宝贝，会落入屏幕下方的一个小车车中，落下时，宝贝会越来越小，注意宝贝本身还在。

3. 简单看看UIDynamicAnimator文档