iOS 7.1 滑动解锁文字动画

Posted 2023-03-10

技术标签:

【中文标题】iOS 7.1 滑动解锁文字动画【英文标题】：iOS 7.1 Slide To Unlock Text Animation 【发布时间】：2014-03-11 20:58:46 【问题描述】：

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

我刚刚注意到，随着 ios 7.1 的更新，锁屏的“滑动解锁”文本上的微光动画发生了变化。聚光灯现在具有椭圆形/菱形形状，在字母上层叠而不会出现在其后面的视图中。

过去，我通过按顺序更改单个字母的颜色来复制这种类型的功能，但为此，动画会穿过字母的中间。不影响背景。

我怎样才能复制这个？

【问题讨论】：

也许是一个不透明的前景，带有透明的字母切口？您可以使椭圆形在背景中移动，在较重的不透明度之上。 @BlueIce 这可能行得通，但我真正好奇的是他们是如何在透明背景上实现它的。可以按照我的建议完成，只需使用可变的不透明度权重作为区分特征而不是颜色。 “微光”可以通过非常不透明或非常白的色调来实现。但是不透明的视图不会阻挡它下面的任何东西，例如在这个上，我仍然可以看到字母周围的锁屏背景。您建议的方法听起来像是字母是透明的，但它们周围的空间是不透明的。我是不是误会了？我认为您需要的是更多层。我用放大镜做了类似的事情，需要不同层的不透明性和透明度。如上所述，您需要透明切口，以便通过它看到切口下方的图层。将这两者封装在另一个透明度相反的层中。这样，通过字母的切口可以看到微光，但相对于其下方的内容而言是不透明的。 【参考方案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;

【讨论】：

谢谢@Hitesh，我现在不在电脑旁，但今晚我会试一试！能否请您也提供“Mask.png”图片？提前致谢好像是从这里复制粘贴过来的：***.com/a/2778232/151706【参考方案2】：

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

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

【讨论】：

如果可以，请使用微光。装在可可豆荚中，非常非常易于使用。【参考方案3】：

使标签的前景色成为 UIColor 以

启动

+colorWithPatternImage 或

-initWithPatternImage

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

【讨论】：

你可以使用动画图像作为 colorWithPattern 吗？我想是的。不幸的是，我现在无法测试它，因为我升级到了iOS7.1，它需要新的Xcode，至少需要一个小时才能下载。 :( 如果你不能使用动画 png，你可以使用一组图像，我相信。我已经用 UIViews 做到了这一点，但不适用于 UILabels，它们只是 UIView 的子类。编辑 - 没关系。我在想的 UIImageView，您可以在其中设置动画图像数组。如果动画不起作用，请搜索 initWithPatternImage 动画的几种解决方案，包括这个：***.com/questions/16461469/…【参考方案4】：

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

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

在drawRect中呈现清晰的文本：func通过复杂的屏蔽过程

中间：执行重复动画的工作视图将图像移动到顶部标签后面

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

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

【讨论】：

【参考方案5】：

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

Shimmer example

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

【讨论】：