仿iOS通知栏删除按钮
仿iOS通知栏删除按钮
最近变懒了，通知栏很久都不清除了，清除的时候看到了删除的动画，觉得还可以，而且也想将学过的layer和view层的动画都复习一遍，顺便做点demo练练手，就先从他开始了。
222.gif
分析
初始.jpg
我们观察到这个按钮最开始是圆形，中间有2条垂直且倾斜的线，然后点击之后，十字（姑且叫十字，哈哈）会向左边移动，且逐渐虚化消失，然后蹦跶出来2个字，也是有浅到深，而且仔细观察会发现，字的出现是先右边出现，然后左边出现的，而且有点震动的动画。分析之后其实该动画很简单，就是一个位移和透明度渐变动画，加上字的显现。
动起来
创建初始状态
代码初始.jpg
首先，我们来写上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条线都是一起运动的，所以现在将他们加到一个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];
细心的同学应该发现了中间出现了一个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，设置transform、transform.translation.x和opacity，然后添加到CAAnimationGroup，一起进行动画，在动画之后，保持动画的样子，不要回到开始。
transformGroup.removedOnCompletion = NO;
transformGroup.fillMode=kCAFillModeForwards;
文字
这儿的文字我采用CATextLayer进行显示，但是用textlayer就有一个问题，就是它默认是竖直向上的，并不是居中，所以就会导致显示出来的文字靠上，目前来说我并没有找到有什么好方法，我采用写死的，写到居中（(⊙﹏⊙)b）。
CATextLayer和UILabel还会有一点区别的，它的字体用的是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，开始并不现实，然后再点击之后显示出来，改变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倍，然后再缩小到原来大小。
写完代码后，动画就是这样的：
代码完成.gif
其他
基本这个动画的点就是这么多。还有一点就是，点击其他地方，按钮需要缩小回来，这里采用的是对Windows写的一个分类，劫持响应者链，然后发送通知。
结尾
基本这次就是这些，干货并不多或者没有（(⊙﹏⊙)b），后面还会到dribbble上面去找一点好看的动画来做，其实做动画还是很简单，主要是分解成很多小动画来找思路。
好了，这次的demo放在github上，有兴趣的可以看看。
