案列：使用pop实现发布界面6个按钮依次坠落的动画

学习笔记666

于 2016-07-19 16:47:14 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS学习—UI部分

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/51957274

iOS学习—UI部分专栏收录该内容

113 篇文章

订阅专栏

// 让控制器的view不能被点击
    // 防止动画过程中被点击
    self.view.userInteractionEnabled = NO;
    
    
   // 数据
    NSArray *images = @[@"publish-video", @"publish-picture", @"publish-text", @"publish-audio", @"publish-review", @"publish-offline"];
    NSArray *titles = @[@"发视频", @"发图片", @"发段子", @"发声音", @"审帖", @"离线下载"];
    
     // 中间6个按钮
    int maxCols = 3;
    CGFloat buttonW = 72;
    CGFloat buttonH = buttonW + 30;
    CGFloat buttonStartY = (ScreenH - 2 * buttonH) * 0.5;
    CGFloat buttonStartX = 20;
    CGFloat xMargin = (ScreenW - 2 * buttonStartX - maxCols * buttonW) / (maxCols - 1);
    for (int i=0; i<images.count; i++) {
        VerticalButton *button = [[VerticalButton alloc] init];
        button.tag = i;
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:button];
        // 设置内容
        [button setTitle:titles[i] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:images[i]] forState:UIControlStateNormal];
        
        // 设置x\y
        int row = i / maxCols;
        int col = i % maxCols;
        CGFloat buttonX =  buttonStartX + col * (xMargin + buttonW);
        CGFloat buttonEndY = buttonStartY + row * buttonH;
        CGFloat buttonBeginY = buttonEndY - ScreenH;
        
        
        // 添加动画
        POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
        anim.springBounciness = 10;
        anim.springSpeed = 10;
        anim.beginTime = CACurrentMediaTime() + 0.1 * i;
        anim.fromValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonBeginY, buttonW, buttonH)];
        anim.toValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonEndY, buttonW, buttonH)];
        [anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
            // 动画执行完毕, 恢复view可点击
            self.view.userInteractionEnabled = YES;
        }];
        [button pop_addAnimation:anim forKey:nil];
    }

效果演示: