iOS 7.1幻灯片解锁文本animation

我不确定这是否曾被问过，但我很难find它。 也许我没有使用正确的search条件，所以如果答案已经存在，如果有人能指引我正确的方向，那将是最感激！

我只是注意到，锁屏的“滑动解锁”文本上的微光animation随着iOS 7.1更新而改变。 聚光灯现在具有卵形/菱形形状，可以横跨字母而不会出现在背后的视图上。

过去，我通过顺序地改变单个字母的颜色来复制这种types的特征，但是为此，animation通过字母的中间。 不影响背景。

我怎样才能复制这个？

Answer 1

你可以animation标签文本，并使用自定义滑块，我希望它可以帮助你：

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

您应该能够使用CALayer的mask属性来创build另一个图层的内容的剪切。

设置蒙版包含您的文字（也许一个CATextLayer可以在这里工作）。 这是Shimmer所说的。

Answer 3

使您的标签的前景颜色成为一个UIColor启动

+colorWithPatternImage或

-initWithPatternImage

使用animation图像并将标签的背景颜色设置为透明。 我没有尝试过，但我不明白为什么它不会工作。

Answer 4

最好的方法是使用多层对象。

• 顶部：具有不透明背景和明文的UILabel

  • 清除文本通过复杂的遮罩过程在drawRect：func中呈现

• 中间：工作人员视图执行重复animation，将图像移到顶部标签后面

• 底部：一个UIView，您可以按顺序添加中间和顶部的子视图。 可以是任何你想要的文字颜色

一个例子可以在这里看到https://github.com/jhurray/AnimatedLabelExample

Answer 5

我发现重新创build闪烁文字效果的最有效方法是使用Facebook创build的Shimmer Cocoapod。 下面是来自Shimmer GitHub仓库的示例图像，位于以下URL： https : //github.com/facebook/Shimmer

微光的例子

有完整的说明安装和使用Shimmer的回购，但要点是，安装Cocoapod后，你会添加一个特殊的子视图或图层，将去的内容，你想闪烁/微光，然后设置效果开始。

Answer 6

尝试有一个半透明的前景与字母的透明切口。 “微光”可以在切口后面移动。

Answer 7

在上面创build一个图层，并用animationPNG或其他东西作为背景。

在这个图层下面，有另一个完全相反透明的图层（字母不透明，字母之间的空格是透明的。

这样，用户通过字母来看animation，以及字母之间的任何字母都结束。

只要确保你有代码保持在正确的顺序层。

Answer 8

我认为这是一个半透明的视图，但是这是一个特殊的视图，其中用直angular坐标覆盖了每个像素的相同颜色的颜色（但是为了使其可见）。 想象这就像放大视图。 它显示下面的视图的放大版本。