第一次寫(xiě)文章,好激動(dòng). 很早覺(jué)得支付寶首頁(yè)效果動(dòng)效做的挺好看的, 一直想自己實(shí)現(xiàn)以下, 后來(lái)各種發(fā)呆于是這個(gè)事情就忘記了.正好這兩天比較閑就實(shí)現(xiàn)了以下:
先看效果吧:
alipayhome.gif
動(dòng)效部分代碼
這部分無(wú)非是滑動(dòng)時(shí)候根據(jù)tableView 的偏移量,控制動(dòng)畫(huà). 導(dǎo)航欄運(yùn)用了一個(gè)的是一個(gè)button數(shù)組, 控制下透明度,就可以做到漸隱效果
根據(jù)偏移量originY 與collectionView 的header高度的一半, 控制導(dǎo)航欄漸變
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)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;
//導(dǎo)航欄漸變
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;
}
}
}
滑動(dòng)table或者collectionView引起聯(lián)動(dòng)的代碼
//禁止中間的collectionView滾動(dòng)
self.collectionView.scrollEnabled = NO;
//移除scrollView所有的手勢(shì)
for (UIGestureRecognizer *gesture in self.scrollView.gestureRecognizers) {
[self.scrollView removeGestureRecognizer:gesture];
}
// 將tableView的手勢(shì)添加到父scrollView上
for (UIGestureRecognizer *gesture in self.tableView.gestureRecognizers) {
[self.scrollView addGestureRecognizer:gesture];
}
}
我感覺(jué)代碼寫(xiě)的挺簡(jiǎn)單的,仔細(xì)看一定能看得懂的,就不多嗶嗶了哈哈~ 詳細(xì)代碼~
新手上路, 寫(xiě)的不好的地方,還望多多指教
