ZSNavigationFilterMenuView動畫解析 --- 基于navigationBar的titleView創造

之前學習了一些繪圖的方式和動畫的制作,于是簡單地制作了一個下拉列表,我把它定位于navigationBar的titleView主要是因為基于新浪微博的Groups分組,新創的一種類似于UIActionSheet的展現方式,至于用法方面,在GitHub上可以完全看到:SeraZheng的ZSNavigationFilterMenuView。這篇文章,主要是想寫一些我在制作過程中用到的一些知識,還有一些想法和感受。先上圖,下面是一個沒有使用icon的簡單效果,具體效果可以去GitHub看。

設計思路

首先,我自定義的ZSNavigationFilterMenuView是繼承自UIButton的,這樣我可以直接設置title和icon,免去了大部分的工作,所以在使用我自定義的ZSNavigationFilterMenuView的時候,一些UIButton的屬性及方法都可以直接使用,很方便根據自己不同的需求定制個性化內容。我使用了tableView作為主要的展示,這樣有利于我定制自己的內容,同時也很方便后期的擴展。上圖中的圖標,都是我使用CoreGraphics畫出來,以達到一些練手的目的,但是在真正的開發中,還是要直接使用現成的圖片,這樣可以提升很大的性能。而關于我選擇的展示動畫,主要是沒有什么設計上的靈感,在DribbleCapptivate上搜著一些相關內容,并沒有很大的啟發,因此這里暫時決定了倆種簡單動畫。

動畫

1.UIView

其他的內容都是一些簡單的內容,這里主要講一下,我制作動畫時使用到的一些知識。Apple在SDK中為我們封裝好了一些直接使用的API,可以達到我們想要的簡單動畫的效果。其中我們可以直接使用UIView的動畫,主要有三種方式。

第一種最基礎的方式就是使用UIView 的擴展UIViewAnimation提供的方法:

[UIView beginAnimations:@"_bodyView" context:nil];

[UIView setAnimationDuration:0.5]; //設置動畫延時

[UIView setAnimationRepeatCount:1]; //設置動畫重復次數

[UIView setAnimationCurve:UIViewAnimationCurveLinear]; //設置動畫曲線

[UIView setAnimationDelay:0.f]; //設置動畫延遲

[UIView setAnimationRepeatAutoreverses:YES]; //設置動畫重復時以動畫形式從終點回到起點

[_bodyView setBackgroundColor:ZSSTYLEVAR(bodyViewHighlightedColor)];

[_bodyView.layer setBorderWidth:0.f];

[UIView commitAnimations];

第二種比較簡單的使用方式就是使用UIView的擴展UIViewAnimationWithBlocks提供的方法:

[UIView animateWithDuration:0.5 delay:0.f options:UIViewAnimationOptionAutoreverse animations:^(){

? ? ? ? ? ?[_bodyView setBackgroundColor:ZSSTYLEVAR(bodyViewHighlightedColor)];

? ? ? ? ? ?[_bodyView.layer setBorderWidth:0.f];

} completion:NULL];

第三種就是使用UIView的擴展UIViewKeyframeAnimations提供的創建關鍵幀動畫的方法:

[UIView animateKeyframesWithDuration:0.5 delay:0.f options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionCalculationModeLinear animations:^(){

? ? ? ? ? [_bodyView setBackgroundColor:ZSSTYLEVAR(bodyViewHighlightedColor)];

? ? ? ? ? [_bodyView.layer setBorderWidth:0.f];

} completion:NULL];

關于上面三種的使用方式是大同小異,個人傾向于簡單的動畫使用block的方式,因為這不僅減少了我們的代碼量,而且可讀性也比較好。UIView的擴展UIViewAnimationWithBlocks提供了其他一些讓我們可以直接創建動畫效果的方法,比如可以直接創建彈簧動畫效果,而我在展現tableView時,使用到的也是這種效果。

2.CoreAnimation

底層的實現動畫的方式,就是利用QuartzCore框架,通過CAAnimation來達到我們想要的動畫效果。QuartzCore框架也比較簡單,主要提供了關于CALayer,CAAnimation的個性化定制的使用方法。

CGPoint viewPosition = self.contentView.layer.position;

_shakeAnimation = [CABasicAnimation animationWithKeyPath:@"position"];

[_shakeAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]]; //設置動畫曲線效果

[_shakeAnimation setFromValue:[NSValue valueWithCGPoint:CGPointMake(viewPosition.x - 10, viewPosition.y)]]; //設置起始值

[_shakeAnimation setToValue:[NSValue valueWithCGPoint:CGPointMake(viewPosition.x + 10, viewPosition.y)]]; //設置終點值

[_shakeAnimation setAutoreverses:YES]; //設置以動畫方式回到起始值

[_shakeAnimation setRepeatCount:2]; //設置動畫重復次數

[_shakeAnimation setDuration:0.05]; //設置動畫時間

[self.contentView.layer addAnimation:_shakeAnimation]; //添加動畫到layer

關于動畫基礎和動畫原理,我推薦一篇非常棒的博客:objc系列譯文(12.1):動畫解釋

貝塞爾曲線

談到動畫,不得不說的就是貝塞爾曲線,堪稱是制作精美動畫效果的基礎法則。蘋果給我們提供了一個非常好的使用貝塞爾曲線的封裝:UIBezierPath。而關于UIBezierPath的基礎使用,我推薦一篇比較詳細的博客:標哥的技術博客--UIBezierPath精講

反饋

關于動畫的基礎原理甚至是貝塞爾曲線得原理及使用,我們都可以在維基百科上搜到很好的教程。想學習的朋友可以自行查閱。關于項目中的動畫的設計效果,暫時沒有什么靈感,如果在Dribble和Capptivate上找到了動畫效果和靈感,會及時的更新項目和這篇文章,也希望如大家有什么好的動畫效果和其他方面的建議,可以多多評論給我!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 前言 本文只要描述了iOS中的Core Animation(核心動畫:隱式動畫、顯示動畫)、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,659評論 7 11
  • 在iOS實際開發中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23
  • 概覽 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你...
    Yiart閱讀 3,864評論 3 34