IOS 新浪弹簧出现效果

实现新浪弹簧出现效果

1.宏定义

//视图距离视图边框单间距
#define kOffset 20
//视图高度
#define kHeight 90
//视图宽度
#define kWidth 90
//视图与视图间距
#define kPadding ((self.view.frame.size.width-20-20-3*kWidth)*0.5)

2.创建一个数组放入即将弹出的视图

//创建数组
   self.itemsArray = [NSMutableArray arrayWithCapacity:3];
//创建三个视图
   for (int i = 0; i < 3; i++){
    //创建一个视图
       UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(kOffset + (kWidth + kPadding)*i, self.view.frame.size.height + 10, kWidth, kHeight)];
        //视图由方形变为圆形
       tempView.layer.cornerRadius = kWidth*0.5;
        //视图背景颜色
       tempView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[self.imageNamesArray objectAtIndex:i]]];

       [self.view addSubview:tempView];
        //添加到数组里面
       [self.itemsArray addObject:tempView];
}

3.懒加载

#pragma mark ------- 懒加载 ---------
- (NSMutableArray *)imageNamesArray{
    if (_imageNamesArray == nil) {
        self.imageNamesArray = [NSMutableArray arrayWithArray:@[@"red_Background",@"purple_Background",@"blue_Background2"]];
    }
    return _imageNamesArray;
}

4.懒加载进行触摸事件

#pragma mark ------- 触摸事件 ---------
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //先获取动画的对象
    for (int i = 0; i < self.itemsArray.count; i++) {
        UIView *aview = [self.itemsArray objectAtIndex:i];
        [UIView animateWithDuration:2 delay:i*0.2 usingSpringWithDamping:0.5 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveLinear animations:^{
            aview.center = CGPointMake(aview.center.x, 200);
        } completion:nil];
    }

}