iOS开发-动画iOS

多个小球的依次下落和碰撞

2016-03-18  本文已影响128人  怀心逝水

先上效果图

Dynamic.gif

难点:
1.怎样让一个小球具有下落和碰撞的属性。
2.每一个小球都会有一个动画,动画时间不能自己去设置,怎样让每个小球在相同的时间间隔后执行动画(不能采用[UIView Animation.....])。
3.用一个UIDynamicAnimator还是用多个UIDynamicAnimator

总体用到的知识点有:
1.IOS7中UIDynamic中的重力,碰撞以及碰撞的边界。
2.利用NSTimer实现时间间隔后的执行动画。

方法:
用到了三个方法,
1.首先初始化一个NSTimer的对象,0.5s后执行timeChange方法

self.timer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
[self.timer fireDate];

2.需要几个小球的动画,那么可以设置在每一秒执行一个动画

- (void)timeChange {
    static int time = 0;
    if (time == 0 || time <= 8) {
        [self getDynamicViewWithIndex:time];
    }
    time ++;
    if (time > 8) {
        time = 0;
        [_timer invalidate];
        _timer = nil;
    }
}
// [self getDynamicViewWithIndex:time]是后面需要用的方法

3.在这个方法中可以创建我们所需要的小球,并设置它们各自的起始位置。之后再给每个小球添加动画。

- (void)getDynamicViewWithIndex:(NSInteger)idx {
    
    UIView *dynamciView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    dynamciView.layer.cornerRadius = 25;
    [self.view addSubview:dynamciView];
    if (idx%3 == 0) {
        dynamciView.left = 160 - 20 - 50*3/2.0;
        dynamciView.backgroundColor = [UIColor colorWithRed:0.500 green:0.724 blue:0.815 alpha:1.000];
    }else if (idx%3 == 1){
        dynamciView.centerX = 160;
        dynamciView.backgroundColor = [UIColor colorWithRed:0.216 green:0.815 blue:0.271 alpha:1.000];
    }else if (idx%3 == 2) {
        dynamciView.left = 160 + 50/2.0 + 20;
        dynamciView.backgroundColor = [UIColor colorWithRed:0.054 green:0.127 blue:0.815 alpha:1.000];
    }
    [self getAnimatorWithAni:self.animatorArr[idx] view:dynamciView idx:idx];
}
//如果你想让你的小球在不同的位置落下,你需要改变dynamicView的left,这里用.left是因为自己在UIView添加了类目。
-(CGFloat)left{
    return self.frame.origin.x;
}

-(void)setLeft:(CGFloat)left{
    CGRect frame = self.frame;
    frame.origin.x = left;
    self.frame = frame;
}

-(CGFloat)top{
    return self.frame.origin.y;
}

-(void)setTop:(CGFloat)top{
    CGRect frame = self.frame;
    frame.origin.y = top;
    self.frame = frame;
}

-(CGFloat)right{
    return self.frame.origin.x + self.frame.size.width;
}

-(void)setRight:(CGFloat)right{
    CGRect frame = self.frame;
    frame.origin.x = right - frame.size.width;
    self.frame = frame;
}

-(CGFloat)bottom{
    return self.frame.origin.y + self.frame.size.height;
}

-(void)setBottom:(CGFloat)bottom{
    CGRect frame = self.frame;
    frame.origin.y = bottom - frame.size.height;
    self.frame = frame;
}

-(CGFloat)centerX{
    return self.center.x;
}

-(void)setCenterX:(CGFloat)centerX{
    self.center = CGPointMake(centerX, self.center.y);
}

-(CGFloat)centerY{
    return self.center.y;
}

-(void)setCenterY:(CGFloat)centerY{
    self.center = CGPointMake(self.center.x, centerY);
}
//这些代码是我们布局的辅助代码一般放在
UIView+Category.h中

3.现在我们已经得到每一个小球,并且添加到父视图上了。接下来就是给每一小球添加动画。
在这个方法之前先说明一下:
经过我的实验发现,如果只有一个UIDynamicAnimator,并且这个UIDynamicAnimator必须是全局变量,而不能是局部的变量,否则你不会看到相应的动画,一个UIDynamicAnimator的变量只能作为一个物体的动画(这个个体可以是一个小球或是若干个小球,但它们的效果只是一起执行。),所以这儿我们需要9个UIDynamicAnimator的对象,我是把它们放在数组中。

- (NSArray *)animatorArr {
    
    NSMutableArray *aniArr = [NSMutableArray new];
    for (int i = 0; i < 9; i++) {
        UIDynamicAnimator *ani = [UIDynamicAnimator new];
        [aniArr addObject:ani];
    }
    if (!_animatorArr) {
        _animatorArr = [aniArr copy];
    }
    return _animatorArr;
}

得到了有九个UIDynamicAnimator对象的数组后,并且这些对象是全局的。之后就可以给每个对象添加属性了(如重力,碰撞)

- (void )getAnimatorWithAni:(UIDynamicAnimator *)ani view:(UIView *)view idx:(NSInteger)i{
    
    UIGravityBehavior *gravityBehaviour = [[UIGravityBehavior alloc] initWithItems:@[view]];
    gravityBehaviour.magnitude = 100;
    gravityBehaviour.gravityDirection=CGVectorMake(0, 1);
    UICollisionBehavior *collision = [UICollisionBehavior new];
    UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[view]];
    [itemBehavior setElasticity:0.6];
    [collision addItem:view];
    collision.translatesReferenceBoundsIntoBoundary = YES;
    CGPoint startP;
    CGPoint endP;
//设置碰撞边界
    if (i < 3) {
        startP = CGPointMake(0, 440 - 10);
        endP = CGPointMake(320, 440 - 10);
    }else if (i >= 3 && i <=5) {
        startP = CGPointMake(0, 440 - 10 - 60 - 50);
        endP = CGPointMake(320, 440 - 10 - 60 - 50);
    }else if (i > 5 && i < 9) {
        startP = CGPointMake(0, 440 - 10 - (60 + 50)*2);
        endP = CGPointMake(320, 440 - 10 - (60 + 50)*2);
    }
    [collision addBoundaryWithIdentifier:@"line1" fromPoint:startP toPoint:endP];
    [ani addBehavior:gravityBehaviour];
    [ani addBehavior:collision];
    [ani addBehavior:itemBehavior];
}

代码到这儿已经写完了。

上一篇下一篇

猜你喜欢

热点阅读