iOS--不同效果思路分析

  • 本節(jié)主要講解關(guān)于iOS中Swift下拉刷新的思路。

    1. 創(chuàng)建一個scrollView的category:

      • 為scrollView添加headerView與footerView,表示上下拉的窗口。

      • 為scrollView提供兩個屬性:header與footer,表示是進(jìn)行上拉或者下拉刷新。

    2. 創(chuàng)建視圖RefreshView:

      • 為其添加一個枚舉,表示下拉的狀態(tài)(正在加載,正常狀態(tài),下拉狀態(tài),松手后刷新視圖)
      • 為刷新視圖(例如headerView)添加動畫,在正在加載的時候開始刷新視圖的動畫,結(jié)束刷新的時候停止視圖動畫。
    • 為其添加監(jiān)聽observer,監(jiān)聽用戶下拉的距離,并且根據(jù)此距離來決定下拉刷新的狀態(tài)。
    1. 自定義視圖,添加到RefreshView上面,此視圖可以根據(jù)自己的要求來自定義。用于與用戶交互。
  • 本節(jié)主要講解UIBezierPath + CADisplayLink來實現(xiàn)上升水滿效果。

    • 創(chuàng)建自定義的View:GoupView:
//用于屏幕刷新的計時器
@property (nonatomic, strong) CADisplayLink *display;
//視圖起始的狀態(tài)
@property (nonatomic, assign) CGFloat start;
//視圖末位的狀態(tài)
@property (nonatomic, assign) CGFloat end;

    -(void)animation;

   -(void)completeAnimation;
  • 利用UIView動畫機制,先讓一個基礎(chǔ)視圖實現(xiàn)上升的效果
[UIView animateWithDuration:2.0 delay:0 usingSpringWithDamping:1 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveLinear animations:^{
     goupview.center = CGPointMake(375/2, to);
 } completion:^(BOOL finished) {
     [goupview completeAnimation];
 }];

 ```
+ 在GoupView中實現(xiàn)drawRect

//記載一個視圖圖層變化(當(dāng)前正在變化的圖層)
CALayer *layer = self.layer.presentationLayer;
//當(dāng)前變化圖層的位置
CGPoint curpoi = layer.position;

// Drawing code
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat width = rect.size.width;
CGFloat height = rect.size.height;

//比例 根據(jù)數(shù)學(xué)運算出的比例
CGFloat progress =1-(height/2 - (curpoi.y-667)) / (self.from - self.to);
CGFloat delHeight = height/2 * progress;
NSLog(@"%lf",delHeight);
CGPoint startPoint = CGPointMake(0.0, 0.0);
CGPoint endPoint = CGPointMake(width, 0.0);

//接下來是畫出圖層
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:CGPointMake(width/2, delHeight)];
[path addLineToPoint:CGPointMake(width, height)];
[path addQuadCurveToPoint:CGPointMake(0, height) controlPoint:CGPointMake(width/2, height)];

[[UIColor magentaColor] setFill];

[path closePath];
[path fill];


+ 本節(jié)主要講述 QQ粘連效果的實現(xiàn)原理。
本節(jié)網(wǎng)上已經(jīng)有很多很好的講解,可以移步[至此](http://kittenyang.com/drawablebubble/)。
   1.   首先創(chuàng)建自定義QQButton,繼承于UIButton。此類包含了兩個View,一個代表著本身的layer,另一個則在其之下添加一個小的視圖,這個視圖是一個小的圓餅。
   2.  并且在QQButton中添加一個CAShapeLayer,此layer用于在其中連接兩個圓之間的圖層。
   3.  接下來我們添加pan手勢,此手勢解決button移動小圓隨著其與圓心的距離變換半徑的方式。
   4.  最后,通過UIBezierPath 曲線來畫出計算公式中的圖層即可。
注意下面的方式可以讓button隨著手勢的移動而移動,需要用setTranslation設(shè)定其參照點:
//  移動
CGPoint transPoint = [pan translationInView:self];
CGPoint center = self.center;

// NSLog(@"%lf",transPoint.x);
center.x += transPoint.x;
center.y += transPoint.y;
self.center = center;
// NSLog(@"%lf",center.x);
[pan setTranslation:CGPointZero inView:self];

另外,記載一個果凍效果的實例,沒有使用drawRect(此方法占據(jù)很大的內(nèi)存),而巧妙的運用一個小的視圖的位置來決定視圖的變化。移步[至此](http://www.cocoachina.com/ios/20151231/14823.html)。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,462評論 2 378

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