仿iOS通知欄刪除按鈕
最近變懶了矢否，通知欄很久都不清除了，清除的時候看到了刪除的動畫僵朗，覺得還可以，而且也想將學過的layer和view層的動畫都復習一遍验庙，順便做點demo練練手酱酬，就先從他開始了壶谒。
分析
我們觀察到這個按鈕最開始是圓形，中間有2條垂直且傾斜的線膳沽，然后點擊之后，十字（姑且叫十字陨界，哈哈）會向左邊移動，且逐漸虛化消失痛阻，然后蹦跶出來2個字菌瘪，也是有淺到深，而且仔細觀察會發(fā)現(xiàn)，字的出現(xiàn)是先右邊出現(xiàn)俏扩，然后左邊出現(xiàn)的，而且有點震動的動畫捌木。分析之后其實該動畫很簡單嫉戚，就是一個位移和透明度漸變動畫，加上字的顯現(xiàn)彬檀。
動起來
創(chuàng)建初始狀態(tài)
首先，我們來寫上2條互相交叉的線努潘，
CALayer *vertical = [CALayer layer];;
vertical.backgroundColor = [UIColor blackColor].CGColor;
vertical.frame = CGRectMake(self.bounds.size.height/2,(self.bounds.size.height - width)/2, 1, width);
CALayer *horizontal = [CALayer layer];;
horizontal.backgroundColor = [UIColor blackColor].CGColor;
horizontal.frame = CGRectMake((self.bounds.size.height - width)/2, self.bounds.size.height/2, width, 1);
分別命名為vertical何horizontal盯桦，代表豎直和水平方向的線。
且分別算出2條線的frame拥峦，這個沒難度，這里的width是高度一半的平方和求根
CGFloat width = sqrtf(pow(self.bounds.size.height/2, 2)*2);刑峡，
因為后面這2條線都是一起運動的玄柠，所以現(xiàn)在將他們加到一個layer上，直接對該layer添加動畫即可宫患。
CALayer *containtLayer = [CALayer layer];
[containtLayer addSublayer:vertical];
[containtLayer addSublayer:horizontal];
containtLayer.frame = CGRectMake(0, 0, self.bounds.size.height, self.bounds.size.height);
containtLayer.transform = CATransform3DMakeRotation((M_PI*45)/180, 0, 0, 1);
self.containtLayer = containtLayer;
[self.layer addSublayer:containtLayer];
細心的同學應(yīng)該發(fā)現(xiàn)了中間出現(xiàn)了一個3D的東西還有M_PI這些東西这弧。這個其實就是控制整個layer的傾斜的，向左或者向右偏移45度其實都可以匾浪。
這樣，一個傾斜的十字就做出來了蛋辈，然后就是點擊事件。
點擊動畫
按鈕點擊之后渐白，按鈕會向左移動，并且變寬纯衍，但是高度和cornerRadius不變（這里我使用的是：）
self.layer.cornerRadius = self.frame.size.height/2;
self.clipsToBounds = YES;）
這種做法，這會導致離屏渲染，但是我們這兒就1個view柒巫，姑且不管他），控制view的動畫我采用的是UIView的動畫应结，直接改變self的frame.
[UIView animateWithDuration:animationTime animations:^{
if (self.style == CCButtonStyleLeftToRight) {
self.frame = CGRectMake(self.originalFrame.origin.x, self.originalFrame.origin.y, self.originalFrame.size.width, self.originalFrame.size.height);
}else{
self.frame = CGRectMake(self.originalFrame.origin.x, self.originalFrame.origin.y, self.originalFrame.size.width, self.originalFrame.size.height);
}
}];
我定義了2種樣式泉唁，向左和向右的。
然后是十字的動畫扮休。
直接采用CABasicAnimation拴鸵，設(shè)置transform、transform.translation.x和opacity劲藐，然后添加到CAAnimationGroup，一起進行動畫兄渺，在動畫之后汰现，保持動畫的樣子，不要回到開始服鹅。
transformGroup.removedOnCompletion = NO;
transformGroup.fillMode=kCAFillModeForwards;
文字
這兒的文字我采用CATextLayer進行顯示企软，但是用textlayer就有一個問題，就是它默認是豎直向上的，并不是居中铅辞，所以就會導致顯示出來的文字靠上萨醒，目前來說我并沒有找到有什么好方法，我采用寫死的富纸，寫到居中（(⊙﹏⊙)b）。
CATextLayer和UILabel還會有一點區(qū)別的堵漱，它的字體用的是CFTypeRef
/* The font to use, currently may be either a CTFontRef, a CGFontRef,
* or a string naming the font. Defaults to the Helvetica font. Only
* used when the `string' property is not an NSAttributedString. */
但是這個類可以從UIFont中獲取到涣仿，可以看出其實是可以用CTFontRef、CGFontRef或者直接是字體名的好港；并且可以看出，只有不是NSAttributedString才會有用丈探。
添加到self.layer之后崭孤，需要將opacity置為0，開始并不現(xiàn)實遗锣，然后再點擊之后顯示出來嗤形，改變opacity為1精偿。而且還要控制放大縮小的動畫赋兵。
CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
scale.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0, 0, 0)], [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 0)],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.25, 1.25, 0)],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 0)]];
CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacity.fromValue = [NSNumber numberWithFloat:0];
opacity.toValue = [NSNumber numberWithFloat:1];
大小需要先放大到1.25倍笔咽，然后再縮小到原來大小霹期。
寫完代碼后，動畫就是這樣的：
其他
基本這個動畫的點就是這么多甩十。還有一點就是，點擊其他地方侣监，按鈕需要縮小回來，這里采用的是對Windows寫的一個分類窃爷，劫持響應(yīng)者鏈姓蜂，然后發(fā)送通知。
結(jié)尾
基本這次就是這些钱慢，干貨并不多或者沒有（(⊙﹏⊙)b），后面還會到dribbble上面去找一點好看的動畫來做，其實做動畫還是很簡單御吞，主要是分解成很多小動畫來找思路。
好了挟裂，這次的demo放在github上揍诽，有興趣的可以看看。
