先上效果图
难点:
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];
}
代码到这儿已经写完了。