最近換了工作虎囚,一直忙些瑣碎的事情横缔,除了學習swift,對技術也沒有新的研究己肮。之前看到簡書上面有個用戶頭像的簡單動效寫出來之后士袄,又根據(jù)新產品的需求做了擴展悲关。效果如下:
** 上面兩種效果分兩種情況:
1、在導航欄上面 娄柳;
2寓辱、自定義的view 的效果
**
一、在導航欄上
其實這個很簡單西土,自定義一個img, 添加到navigationBar上面就好了讶舰。
[self.navigationController.navigationBar addSubview:self.titleIMg];
然后就是跟隨scrollview的偏移量改變img 的center和bounds就好了⌒枇耍可能比較費勁的一點就是確定一些比例吧,我也是自己試了幾次才確定最佳效果
#define MaxIconWH 70.0 //用戶頭像最大的尺寸
#define MinIconWH 30.0 // 用戶頭像最小的頭像
#define MaxIconCenterY 44 // 頭像最大的centerY
#define MinIconCenterY 22 // icon最小的centerY
#define maxScrollOff 180
下面就是scrollview的代理方法:
我的基本思路是:
1跳昼、知道icon 從MaxIconWH到MinIconWH變化時,scrollview的最小偏移量(maxScrollOff)肋乍;
2鹅颊、然后icon的尺寸的變化率等于scrollview的變化率相等就好了。其實就是墓造,icon的尺寸減少的部分/尺寸最大變化量 = scrollview的contentoffset.y / maxScrollOff;
3堪伍、 當然實際情況還要考慮一些情況,具體實現(xiàn)看代碼
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// 是scrollview的偏移量
CGFloat updateY = scrollView.contentOffset.y ;
NSLog(@"%f",scrollView.contentOffset.y);
// 隨著scrollview 的滾動觅闽,改變bounds
CGRect bound = _titleIMg.bounds;
// 隨著滾動縮減的頭像的尺寸
CGFloat reduceW = updateY *(MaxIconWH - MinIconWH)/(maxScrollOff - 64);
reduceW = reduceW < 0 ? 0 : reduceW;
// 寬度縮小的幅度要和headview偏移的幅度成比例帝雇,但是最小的寬度不能小于MinIconWH
CGFloat yuanw = MAX(MinIconWH, MaxIconWH - reduceW);
_titleIMg.layer.cornerRadius = yuanw/2.0;
bound.size.height = yuanw;
bound.size.width = yuanw;
_titleIMg.bounds = bound;
// 改變center, max - min是滾動 centery值最大的偏差
CGPoint center = _titleIMg.center;
CGFloat yuany = MAX(MinIconCenterY, MaxIconCenterY - updateY * (MaxIconCenterY - MinIconCenterY)/(maxScrollOff - 64) ) ;
yuany = yuany > MaxIconCenterY ? MaxIconCenterY : yuany;
center.y = yuany;
_titleIMg.center = center;
}
二、 自定義的view
其實這個效果是結合下拉放大效果一起做的◎茸荆現(xiàn)在主流的scrollview或其子類都有頭部(headView)下拉放大效果尸闸。
scrollview下拉放大效果我在文章: iOS Scrollview 的頭部view的拉伸伸縮效果里面寫過了, 但是不同的情況細微之處有點不同孕锄,我下面放的demo里面也有實現(xiàn)吮廉。
實際我的導航欄不是真正的導航欄,是一個自定義的navigationBarView代替導航欄的畸肆。然后他的顏色和scrollview里面的headview背景顏色是一樣的宦芦。造成了好像是icon好像是在headview的,實際父控件是navigationBarView轴脐,navigationBarView和scrollview是同一層級的调卑。
** 算了解釋這挺累地,大家自己看代碼吧豁辉,demo地址:
demo
**
** 最后還有一個問題解釋一下令野,向我上面那種情況,icon一般容易超出父視圖的frame徽级,不能和用戶進行交互气破。那如果需要交互的時候腫么辦呢?
我的做法是做一個button餐抢, 判斷icon超出父視圖時现使,就跟隨icon低匙,這樣就可以和用戶進行交互了
**