防簡書的用戶頭像動效和自定義的導航欄特效

最近換了工作虎囚,一直忙些瑣碎的事情横缔,除了學習swift,對技術也沒有新的研究己肮。之前看到簡書上面有個用戶頭像的簡單動效寫出來之后士袄,又根據(jù)新產品的需求做了擴展悲关。效果如下:


product.gif

導航欄.gif

自定義view.gif

** 上面兩種效果分兩種情況:
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是同一層級的调卑。

圖層.png

** 算了解釋這挺累地,大家自己看代碼吧豁辉,demo地址:
demo
**

** 最后還有一個問題解釋一下令野,向我上面那種情況,icon一般容易超出父視圖的frame徽级,不能和用戶進行交互气破。那如果需要交互的時候腫么辦呢?
我的做法是做一個button餐抢, 判斷icon超出父視圖時现使,就跟隨icon低匙,這樣就可以和用戶進行交互了
**

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市碳锈,隨后出現(xiàn)的幾起案子顽冶,更是在濱河造成了極大的恐慌,老刑警劉巖售碳,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件强重,死亡現(xiàn)場離奇詭異,居然都是意外死亡贸人,警方通過查閱死者的電腦和手機间景,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來艺智,“玉大人倘要,你說我怎么就攤上這事∈穑” “怎么了封拧?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長夭问。 經常有香客問我泽西,道長,這世上最難降的妖魔是什么缰趋? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任尝苇,我火速辦了婚禮,結果婚禮上埠胖,老公的妹妹穿的比我還像新娘。我一直安慰自己淳玩,他們只是感情好直撤,可當我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蜕着,像睡著了一般谋竖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上承匣,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天蓖乘,我揣著相機與錄音,去河邊找鬼韧骗。 笑死嘉抒,一個胖子當著我的面吹牛,可吹牛的內容都是我干的袍暴。 我是一名探鬼主播些侍,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼隶症,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了岗宣?” 一聲冷哼從身側響起蚂会,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎耗式,沒想到半個月后胁住,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡刊咳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年彪见,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芦缰。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡企巢,死狀恐怖,靈堂內的尸體忽然破棺而出让蕾,到底是詐尸還是另有隱情浪规,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布探孝,位于F島的核電站笋婿,受9級特大地震影響,放射性物質發(fā)生泄漏顿颅。R本人自食惡果不足惜缸濒,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望粱腻。 院中可真熱鬧庇配,春花似錦、人聲如沸绍些。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柬批。三九已至啸澡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間氮帐,已是汗流浹背嗅虏。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留上沐,地道東北人皮服。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冰更。 傳聞我的和親對象是個殘疾皇子产徊,可洞房花燭夜當晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件蜀细、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,109評論 4 62
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,186評論 25 707
  • 參加海比特初級營舟铜,是閨蜜給我介紹這個訓練營的。那時候的我在參加一個21天閱讀打卡奠衔,發(fā)覺身為懶癌后期患者的自己在別人...
    花十閱讀 251評論 1 0
  • 西安的秋天到了 今天是霜降 也是我來西安離開深圳七七八八算二個月十三天了 之前的那種沮喪和不安也漸漸散去因為習慣 ...
    清風又見清風閱讀 300評論 0 0
  • 昨晚曾輝在群里分享了《愛的五種語言》憨颠,即愛的五種表達方式:1辟癌、肯定的語言/words of affirmation...
    CrystalatBJ閱讀 396評論 0 0