類似餓了么訂單詳情頂部動(dòng)畫效果

項(xiàng)目中可能有這樣一種需求砂豌,類似餓了么訂單詳情頂部那種漸變效果阳距,偶然看到這個(gè)后塔粒,發(fā)現(xiàn)在項(xiàng)目中也可以用,所以就提議加上了這個(gè)功能筐摘,功能實(shí)現(xiàn)點(diǎn)非常簡(jiǎn)單卒茬,這里我不做理論方面的闡述,直接看重要代碼即可:

源碼參考地址

先看下動(dòng)圖效果:

topAnimation.gif

這里一般適用于滾動(dòng)視圖滾動(dòng)球恤,頂部改變的情形,需要監(jiān)聽滾動(dòng)視圖的contentOffset:

 [_tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:NULL];

技術(shù)實(shí)現(xiàn)荸镊,需要拿到頂部視圖的起始frame以及終止frame

具體的變化控制如下:

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
        if (offset.y <= 0) {
            _topView.frame = CGRectMake(0, 0, self.view.frame.size.width, topHeight);
        }else {
            CGFloat scale = (topHeight - offset.y) / topHeight;
            if (scale <= 0) {
                scale = 0;
            }
            if (scale >= 1) {
                scale = 1;
            }
            CGFloat height = topHeight - (1- scale) * (topHeight - _destHeight);
            _topView.frame = CGRectMake(0, 0, self.view.frame.size.width, height);
            _tableView.contentInset = UIEdgeInsetsMake(height, 0, 0, 0);
            [_topView updateTopViewWithScale:scale];
        }
    }
}

這里主要控制topView的frame漸變咽斧,至于topView中的個(gè)別控件控制,這里以titleLabel為例:

- (void)updateTopViewWithScale:(CGFloat)scale {
    CGPoint center = _titleLabel.center;
    center.x = (_titleSourceCenter.x + (1-scale) * (_titleDestCenter.x - _titleSourceCenter.x));
    center.y = _titleSourceCenter.y - (1-scale) * (_titleSourceCenter.y - _titleDestCenter.y);
    _titleLabel.center = center;
    CGFloat font = 18 * scale;
    if (font < 15) {
        font = 15;
    }
    _titleLabel.font = [UIFont systemFontOfSize:font];
    [_titleLabel layoutIfNeeded];
}

只需要知道titleLabel起始終止center躬存,以及font即可

源碼值提供了實(shí)現(xiàn)思路和方法张惹,需要的可以移步這里,小可還做了一些常用的工具類岭洲,有感興趣的宛逗,可以到這里查看

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市盾剩,隨后出現(xiàn)的幾起案子雷激,更是在濱河造成了極大的恐慌,老刑警劉巖告私,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屎暇,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡驻粟,警方通過查閱死者的電腦和手機(jī)根悼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜀撑,“玉大人挤巡,你說我怎么就攤上這事】崧螅” “怎么了玄柏?”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)贴铜。 經(jīng)常有香客問我粪摘,道長(zhǎng)瀑晒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任徘意,我火速辦了婚禮苔悦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘椎咧。我一直安慰自己玖详,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開白布勤讽。 她就那樣靜靜地躺著蟋座,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脚牍。 梳的紋絲不亂的頭發(fā)上向臀,一...
    開封第一講書人閱讀 51,208評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音诸狭,去河邊找鬼券膀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛驯遇,可吹牛的內(nèi)容都是我干的芹彬。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼叉庐,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼舒帮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起陡叠,我...
    開封第一講書人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤会前,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后匾竿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瓦宜,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年岭妖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了临庇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡昵慌,死狀恐怖假夺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斋攀,我是刑警寧澤已卷,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站淳蔼,受9級(jí)特大地震影響侧蘸,放射性物質(zhì)發(fā)生泄漏裁眯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一讳癌、第九天 我趴在偏房一處隱蔽的房頂上張望穿稳。 院中可真熱鬧,春花似錦晌坤、人聲如沸逢艘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽它改。三九已至,卻和暖如春商乎,著一層夾襖步出監(jiān)牢的瞬間央拖,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來泰國打工截亦, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留爬泥,地道東北人柬讨。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓崩瓤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親踩官。 傳聞我的和親對(duì)象是個(gè)殘疾皇子却桶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容