16

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

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

iOS 7.1 锁屏文字动画

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

我怎样才能复制这个？

4

8 回答 8

8

您可以为标签文本设置动画并为其使用自定义滑块，希望对您有所帮助：

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;
于 2014-04-24T10:27:18.130 回答
4

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

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

于 2014-03-11T22:21:43.733 回答
1

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

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

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

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

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

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

于 2014-04-23T14:18:14.843 回答
1

使标签的前景色成为 UIColor 发起的

+colorWithPatternImage或者

-initWithPatternImage

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

于 2014-03-12T17:26:37.213 回答
1

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

微光示例

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

于 2016-05-25T03:32:34.960 回答
0

I think that it's a semi transparent view, but it's a special view in which the drawrect is overridden to color each pixel of the letters with the same color (but stronger to make it visible) of the pixel in the view beneath it. Imagine this like the magnifying view. it displays a magnified version of the the view beneath it.

于 2014-09-22T13:42:40.847 回答
0

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

于 2014-03-11T21:51:59.370 回答
0

在顶部创建一个图层，该图层具有带有动画 PNG 或其他内容的剪切图层作为背景。

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

这样，用户可以看穿动画中的字母，以及字母之间的任何字母。

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

于 2014-03-11T22:15:41.500 回答