iOS 7.1幻灯片解锁文本动画

Question

我不确定之前是否曾经问过，但我很难找到它。也许我没有使用正确的搜索字词，所以如果答案已经存在，如果有人能指出我正确的方向，那么我们将非常感激！

我刚注意到＆＃34;上的微光动画滑动解锁＆＃34;锁定屏幕的文本已随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

您应该可以使用CALayer的mask属性来创建另一个图层内容的剪切。

设置掩码以包含您的文本（也许CATextLayer可以在这里工作）。这是Shimmer所说的。

Answer 3

使标签的前景色为使用

启动的UIColor

+colorWithPatternImage或

-initWithPatternImage

使用动画图像并将标签的背景颜色设置为透明。我没试过这个，但我不明白为什么它不起作用。

Answer 4

执行此操作的最佳方法是使用多层对象。

• 上：UILabel背景不透明，文字清晰

  • 通过复杂的屏蔽过程在drawRect：func中呈现明文：

• 中间：正在执行重复动画的工作人员视图在顶部标签后面移动图像

• 底部：您可以按顺序添加中间和顶部子视图的UIView。可以是你希望文本的任何颜色

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

Answer 5

我发现重现闪烁文本效果的最有效方法是使用Facebook创建的Shimmer Cocoapod。以下是Shimmer GitHub仓库中的示例图片，该仓库位于以下网址：https://github.com/facebook/Shimmer

Shimmer example

有完整的说明在repo上安装和使用Shimmer，但要点是在安装Cocoapod之后，你会添加一个特殊的子视图或图层，其中包含你希望闪烁/闪烁的内容，然后设置效果开始。

Answer 6

尝试为字母设置透明切口的半透明前景。 ＆＃34;微光＆＃34;可以在切口后移动。

Answer 7

在顶部创建一个具有切割图层的图层，其中包含动画PNG或其他内容作为背景。

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

通过这种方式，用户可以看到动画中的字母，以及字母到字母之间的字母。

请确保您拥有代码以使图层保持正确的顺序。

Answer 8

我认为它是一个半透明的视图，但它是一个特殊的视图，其中画面被覆盖以使字母的每个像素着色为相同的颜色（但更强，以使其可见）它下面的视图中的像素。 想象一下这就像放大视图。它会显示其下方视图的放大版本。