仿iOS通知栏删除按钮
最近变懒了,通知栏很久都不清除了,清除的时候看到了删除的动画,觉得还可以,而且也想将学过的layer和view层的动画都复习一遍,顺便做点demo练练手,就先从他开始了。
分析
我们观察到这个按钮最开始是圆形,中间有2条垂直且倾斜的线,然后点击之后,十字(姑且叫十字,哈哈)会向左边移动,且逐渐虚化消失,然后蹦跶出来2个字,也是有浅到深,而且仔细观察会发现,字的出现是先右边出现,然后左边出现的,而且有点震动的动画。分析之后其实该动画很简单,就是一个位移和透明度渐变动画,加上字的显现。
动起来
创建初始状态
首先,我们来写上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倍,然后再缩小到原来大小。
写完代码后,动画就是这样的:
其他
基本这个动画的点就是这么多。还有一点就是,点击其他地方,按钮需要缩小回来,这里采用的是对Windows写的一个分类,劫持响应者链,然后发送通知。
结尾
基本这次就是这些,干货并不多或者没有((⊙﹏⊙)b),后面还会到dribbble上面去找一点好看的动画来做,其实做动画还是很简单,主要是分解成很多小动画来找思路。
好了,这次的demo放在github上,有兴趣的可以看看。