之前學習了一些繪圖的方式和動畫的制作,于是簡單地制作了一個下拉列表,我把它定位于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上找到了動畫效果和靈感,會及時的更新項目和這篇文章,也希望如大家有什么好的動畫效果和其他方面的建議,可以多多評論給我!