之前學習了一些繪圖的方式和動畫的制作，于是簡單地制作了一個下拉列表，我把它定位于navigationBar的titleView主要是因為基于新浪微博的Groups分組，新創的一種類似于UIActionSheet的展現方式，至于用法方面，在GitHub上可以完全看到：SeraZheng的ZSNavigationFilterMenuView。這篇文章，主要是想寫一些我在制作過程中用到的一些知識，還有一些想法和感受。先上圖，下面是一個沒有使用icon的簡單效果，具體效果可以去GitHub看。
設計思路
首先，我自定義的ZSNavigationFilterMenuView是繼承自UIButton的，這樣我可以直接設置title和icon，免去了大部分的工作，所以在使用我自定義的ZSNavigationFilterMenuView的時候，一些UIButton的屬性及方法都可以直接使用，很方便根據自己不同的需求定制個性化內容。我使用了tableView作為主要的展示，這樣有利于我定制自己的內容，同時也很方便后期的擴展。上圖中的圖標，都是我使用CoreGraphics畫出來，以達到一些練手的目的，但是在真正的開發中，還是要直接使用現成的圖片，這樣可以提升很大的性能。而關于我選擇的展示動畫，主要是沒有什么設計上的靈感，在Dribble和Capptivate上搜著一些相關內容，并沒有很大的啟發，因此這里暫時決定了倆種簡單動畫。
動畫
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上找到了動畫效果和靈感，會及時的更新項目和這篇文章，也希望如大家有什么好的動畫效果和其他方面的建議，可以多多評論給我！
