iOS 7.1 滑动解锁文字动画

Question

iOS 7.1 滑动解锁文字动画

iosobjective-canimationios7.1

16

我不确定之前是否有人提出过类似问题，但我很难找到相关信息。也许我没有使用正确的搜索术语，如果已经存在答案，希望有人能够指引我正确的方向，非常感谢！

我刚刚注意到，在iOS 7.1更新中，“滑动以解锁”文本的闪烁动画已经发生了变化。现在聚光灯呈椭圆形/菱形状，沿着字母连续播放，而不会在它后面的视图上显示。

iOS 7.1锁屏文本动画

过去，我曾通过逐个更改字母的颜色来复制此类特性，但对于这个问题，动画是穿过字母的中间，而不影响背景的。

我该如何复制这种效果？

- Logan

也许可以使用不透明的前景，并在字母上留出透明的空白部分？你可以让椭圆形状在背景中移动，覆盖在更重的不透明度上方。 - Blue Ice

@BlueIce 这可能可行，但我真正好奇的是他们如何在透明背景上实现了这样的效果。 - Logan

可以按照我建议的方法完成，只需使用不同的透明度变量权重作为区分特征，而不是颜色。通过非常不透明或非常白色的色调，可以实现“闪烁”的效果。 - Blue Ice

但是不会遮挡视图下面的任何东西吗？例如，在这个例子中，我仍然可以看到字母周围的锁屏背景。您建议的方法听起来像是字母是透明的，但它们周围的空间是不透明的。我有误解吗？ - Logan

1

我认为你需要更多的图层。我曾经用放大镜做过类似的事情，需要不同图层的不透明度和透明度。你想要透明的切口，如所描述的那样，以便下面的一层通过它被看到。将这两个元素封装在另一个图层中，其透明度相反。这样，闪烁效果可以通过字母的切口看到，但相对于下面的内容是不透明的。 - Victor Engel

显示剩余4条评论

8个回答

4

你应该能够使用CALayer的mask属性来创建另一个图层内容的剪切。将mask设置为包含你的文本（也许可以在这里使用CATextLayer）。这就是Shimmer所使用的方法。

- Taum

如果可以的话，只需使用shimmer。它在cocoa pod中提供，并且非常易于使用。 - cbrulak

1

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

顶部: UILabel，具有不透明的背景和清晰的文本
- 清晰的文本通过复杂的遮罩处理在drawRect：函数中呈现
中间: Worker View，执行重复动画将图像移动到顶部标签后面
底部: UIView，您按照该顺序添加中间和顶部子视图。可以是任何您想要的文本颜色

示例可以在此处查看 https://github.com/jhurray/AnimatedLabelExample

- jhurray

1

使标签的前景色成为使用 +colorWithPatternImage 或 -initWithPatternImage 初始化的 UIColor，使用动画图像并将标签的背景色设置为透明。我没有尝试过这个，但我认为它应该可以工作。

- Victor Engel

你能否使用动画图像作为colorWithPattern吗？ - Logan

我想是这样。不幸的是，我现在无法测试它，因为我升级到了需要新Xcode的iOS7.1，而这将至少需要一个小时才能下载。 :( 如果您不能使用动画png，则可以使用一组图像。我已经用UIView做过这个，但对于UILabels来说还没有，它们只是UIView子类。编辑 - 没关系。我想到了UIImageView，您可以设置一个图像数组进行动画。 - Victor Engel

如果动画无法正常工作，请搜索initWithPatternImage动画以获取多种解决方案，包括此链接：http://stackoverflow.com/questions/16461469/animating-uiimageview-with-colorwithpatternimage - Victor Engel

1

我发现重新创建闪烁文本效果最有效的方法是使用Facebook创建的Shimmer Cocoapod。下面是来自Shimmer GitHub存储库的示例图像，位于以下URL：https://github.com/facebook/Shimmer Shimmer example 在存储库中有完整的安装和使用Shimmer的说明，但要点是，在安装Cocoapod之后，您将添加一个特殊的子视图或层，其中包含您希望闪烁/闪烁的内容，然后设置效果开始。

- Ian Rahman

0

我认为这是一个半透明视图，但它是一个特殊的视图，在其中覆盖了drawrect以使用与其下方视图中像素相同的颜色（但更强烈以使其可见）来着色每个字母的每个像素。可以将其想象为放大镜视图。它显示了其下方视图的放大版本。

- blackmoon

0

尝试使用半透明的前景和透明的切口字母。 "闪烁" 可以在切口后面移动。

- Blue Ice

0

在顶部创建一个带有裁剪图层的层，背景为动态PNG或其他动画。

在此层下面，再添加一个完全相反透明度的层（字母不透明，字母之间的空白透明）。

这样，用户可以透过字母看到动画，在字母之间可以看到字母所在位置的内容。

只需确保编写代码以保持层的正确顺序即可。

- Victor Engel

我在第一步遇到困难，请问你能展示一下我在哪里做错了吗？-- 对问题的编辑 - Logan

您可能还想看一下这个类似的问题，它有示例代码。https://dev59.com/N2Mm5IYBdhLWcg3wKskj - Victor Engel

是的，那就是我一直在依赖的，我曾试图用另一种方式来实现它，但一直无法完美地实现。谢谢。 - Logan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hitesh Vaghela · Accepted Answer

您可以动画标签文本并使用自定义滑块来实现，希望这能帮到您：

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;