iOS 仿支付宝首页动效

第一次写文章,好激动. 很早觉得支付宝首页效果动效做的挺好看的, 一直想自己实现以下, 后来各种发呆于是这个事情就忘记了.正好这两天比较闲就实现了以下:

先看效果吧:

alipayhome.gif

---

动效部分代码
这部分无非是滑动时候根据tableView 的偏移量,控制动画. 导航栏运用了一个的是一个button数组, 控制下透明度,就可以做到渐隐效果
根据偏移量originY 与collectionView 的header高度的一半, 控制导航栏渐变

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        double originY = self.tableView.contentOffset.y + self.collectionViewHeight;
        NSLog(@"%f", originY);
        if (originY > 0) {
            self.collectionView.y = -originY;
            //导航栏渐变
            double height = _headerView.height / 2.0;
            self.headerView.contentView.alpha = 1 - originY / self.headerView.height;
            if (originY < height) {
                CGFloat alpha = originY / height;
                self.searchTextField.alpha = 1 - alpha;
                [self updateNavigationItem:NO];
                for (UIBarButtonItem *item in self.itemsArr) {
                    UIButton *btn = item.customView;
                    btn.alpha = 1 - alpha;
                }
            } else {
                [self updateNavigationItem:YES];

                CGFloat alpha = (originY - height) / height;
                for (UIBarButtonItem *item in self.navigationItem.leftBarButtonItems) {
                    UIButton *btn = item.customView;
                    btn.alpha = alpha;
                }
            }
            
        } else {
            self.collectionView.y = 0;
            self.headerView.contentView.alpha = 1;
            self.searchTextField.alpha = 1;
        }
    }
}

滑动table或者collectionView引起联动的代码

    //禁止中间的collectionView滚动
    self.collectionView.scrollEnabled = NO;
    
    //移除scrollView所有的手势
    for (UIGestureRecognizer *gesture in self.scrollView.gestureRecognizers) {
        [self.scrollView removeGestureRecognizer:gesture];
    }
    
    // 将tableView的手势添加到父scrollView上
    for (UIGestureRecognizer *gesture in self.tableView.gestureRecognizers) {
        [self.scrollView addGestureRecognizer:gesture];
    }
}

我感觉代码写的挺简单的,仔细看一定能看得懂的,就不多哔哔了哈哈~ 详细代码~

新手上路, 写的不好的地方,还望多多指教