iOS 7.1幻灯片解锁文本动画

Question

我不确定之前是否曾经问过,但我很难找到它.也许我没有使用正确的搜索词,所以如果答案已经存在,如果有人可以指出我正确的方向,那将是非常感谢!

我刚刚注意到锁屏的"滑动解锁"文本中的微光动画随iOS 7.1更新而改变.聚光灯现在有一个卵形/钻石形状,它在字母之间层叠而不会出现在它后面的视图上.

在过去,我通过按顺序改变单个字母的颜色来复制这种类型的特征,但为此,动画通过字母的中间.不影响背景.

我怎么能复制这个？

Answer 1

您可以为标签文本设置动画并为其使用自定义滑块,我希望它可以帮助您:

CALayer *maskLayer = [CALayer layer];
// Mask image ends with 0.15 opacity on both sides. Set the background color of the         layer
// to the same value so the layer can extend the mask image.
maskLayer.backgroundColor = [[UIColor colorWithRed:0.0f green:0.0f blue:0.0f  alpha:0.15f] CGColor];
maskLayer.contents = (id)[[UIImage imageNamed:@"Mask.png"] CGImage];

// Center the mask image on twice the width of the text layer, so it starts to the left
// of the text layer and moves to its right when we translate it by width.
maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = CGRectMake(myLabel.frame.size.width * -1, 0.0f,   myLabel.frame.size.width * 2, myLabel.frame.size.height);
// Animate the mask layer's horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:myLabel.frame.size.width];
maskAnim.repeatCount = 1e100f;
maskAnim.duration = 1.5f;
[maskLayer addAnimation:maskAnim forKey:@"slideAnim"];
myLabel.layer.mask = maskLayer;

Answer 2

尝试使用半透明的前景和透明的字母切口。“微光”可以移动到切口后面。