仿iPhone的锁屏滚动动画

最近工作上没什么项目,今天下午我就尝试模仿了一个iPhone锁屏底部文字的滚动渐变效果,这里用到的技术点:图层CALayer,这个大家应该都不会陌生,嗯,现在呢,我拿CALayer的子类CAGradientLayer实现一个iPhone锁屏文字渐变的动效,总体来讲,其实我觉得主要的难点就是图层的mask属性,这个技术点你理解熟悉了,实现渐变动画就容易多了,这里渐变的文字没有借用label,我的处理是把外界传入的字符串添加到图形上下文,这样减少了控制器的负担,也便于我们移植到别的工程。

先附上整体的效果

这里单独创建一个继承UIView的类,类的.h声明一个字符串,用来接受外界传入的文字

/** 外界传入的字符 .h文件 */
@property (nonnull, nonatomic, copy) NSString *textStr;

说下CAGradientLayer属性

  • startPoint 渐变开始的点,映射到layer的矩形范围内
  • endPoint 渐变结束的点,映射到layer的矩形范围内
  • 默认(0,0)在左下角,(1,1)在右上角,默认起始点的值是(0.5, 0),结束点的值是(0.5, 1),如图:
这里设置`CAGradientLayer`沿水平中线从左往右渐变
//设置渐变的开始点、结束点
 _gradientLayer.startPoint = CGPointMake(0.0, 0.5);
 _gradientLayer.endPoint = CGPointMake(1.0, 0.5);
  • colors 颜色类 CGColorRef 数组 这里需要黑白两种颜色,但整个过程中需要三种渐变色(黑、白、黑)
//设置渐变过程中点的颜色
 NSArray *colors =@[
                     (id)[UIColor blackColor].CGColor,
                     (id)[UIColor whiteColor].CGColor,
                     (id)[UIColor blackColor].CGColor
                    ];
 _gradientLayer.colors = colors; //colors 渐变中的每一个渐变点
  • locations 范围(1,1), 数组内的对象必须是单调递增的, "locations"对象对应属性"colors"中的对象,用来定位渐变颜色出现的位置,"locations"内第一个对象-渐变开始的点,最后一个对象-渐变结束的点
//设置每个渐变点颜色对应的位置
NSArray *locations = @[@0.2, @0.5, @0.8];
_gradientLayer.locations = locations;

处理文字

  • 添加文字到图形上下文, 这个就简单了,这里我直接贴代码了,如下:
 NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
 paragraphStyle.alignment = NSTextAlignmentCenter;
    
 NSDictionary *attributes = @{
                              NSFontAttributeName:[UIFont fontWithName:@"HelveticaNeue" size:25.0],
                              NSParagraphStyleAttributeName:paragraphStyle,
                              };
    
 //开启图形上下文
 UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0);
    
 //绘制字符到图形
 [textStr drawInRect:self.bounds withAttributes:attributes];
    
 //获取图形上下文
 UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
 //结束图形上下文
 UIGraphicsEndImageContext();
  • 这里说下神秘的mask

首先,iOS的控件自带alpha的值,但是针对的是整个icon或者ui的透明效果,不能做到自定义的透明或者镂空效果
mask含义:属于CALayer,但其并不会呈现出来,它是用其alpha来控制原layer内容的渲染,若mask的alpha值为1,那原layer就会渲染出来,反之,就不会渲染出来
mask原理:默认会显示mask层底部的内容,如果渐变层放在mask层上,就不会显示了,需将渐变层添加到view的图层上面
mask层工作原理:按照透明度裁剪,只保留非透明部分,文字是非透明的,因此除了文字,其他都被裁剪掉,这样就只会显示文字下面渐变层的内容,相当于留了文字的区域,让渐变层去填充文字的颜色

  • 将图像上下文赋值为图层的内容,并将图层设置为透明,然后将这个图层layer作为被裁减的视图的layermask, 这样就可以实现自定义的透明或者镂空效果
CALayer *layer = [CALayer layer];

 //layer,其尺寸需与所要裁减的视图的尺寸一样
layer.frame = self.bounds;

 //将图像CGImageRef赋值给layer视图
layer.contents = (id)(image.CGImage);

 //一个裁减图形作为其layer的mask 设置透明
layer.backgroundColor = [UIColor clearColor].CGColor;

 //作为mask的layer不能有superLayer或者subLayer
[layer removeFromSuperlayer];
    
 //将layer作为渐变图layer的mask
self.gradientLayer.mask = layer;
  • 设置渐变层的大小
//和视图view等宽高
self.gradientLayer.frame = self.bounds;
  • 最后就是将渐变层添加到视图view的图层上面,添加动画,代码如下:
[self.layer addSublayer:self.gradientLayer];

/**
 *  KeyPath 告诉系统要执行什么样的动画
 */
CABasicAnimation *aniamtion = [CABasicAnimation animationWithKeyPath:@"locations"];
    
 /**
 *  在整个动画中,第一个黑色原色从0移动到0.75的位置,白色原色从0移动到1的位置,第二个黑色原色从0.25移动到1的位置
 */
aniamtion.fromValue = @[@0.0,@0.0,@0.25];
aniamtion.toValue = @[@0.75,@1.0,@1.0];

aniamtion.duration = 2.5;
aniamtion.repeatCount = MAXFLOAT;

最后,外界控制器传值

  • 外界控制器只需传入想渐变的字符串即可,如下:



好了,也不早了,先就写到这里吧,时间仓促…有什么理解错误的地方欢迎交流咯。。。

推荐阅读更多精彩内容

  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 4,328评论 0 13
  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 2,841评论 1 4
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 2,510评论 0 17
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 7,400评论 6 28
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 4,332评论 5 13
  • 刷微博时看到一句话特别有感触 男生不擅长说分手 却擅长逼你说分手 男生想要分手是有前兆的 他开始不理你 不回消息 ...
    拜星月慢阅读 356评论 0 3
  • 史明苏看尹然天天忙得昏天暗地,两眼发黑,忍不住说:“那是你什么人值当你忙前跑后的?你看看你那脸,还是人脸吗?一点精...
    可可豆子阅读 82评论 0 5
  • 一张假币 ...
    草根作家阅读 392评论 5 3
  • 许多数学家他们从小便爱动脑筋,拥有探知精神 ,所以他们长大才取得成就。 德国著名大数学家高斯(1777...
    是你们永远的飞哥阅读 287评论 0 0