从左到右褪色UILabel

Question

我想动画UILabel从左到右淡化文本。我的代码会立即淡化整个UILabel，但我想逐字逐句或逐字逐句。此外，可以在此文本中添加单词，当发生这种情况时，我只想淡入新单词，而不是整个UILabel。

__weak ViewController *weakSelf = self;
weakSelf.label.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
                 animations:^{ weakSelf.label.alpha = 1;}
                 completion:nil];

Answer 1

我之前已经做过一次这样的结果。您可能需要根据自己的喜好进行调整。

第一步是创建一个渐变图像，使其与您希望文本淡入的方式相匹配。如果您的文本颜色为黑色，则可以尝试此操作。

- (UIImage *)labelTextGradientImage
{
    CAGradientLayer *l = [CAGradientLayer layer];
    l.frame = self.label.bounds;
    l.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] CGColor], (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:1] CGColor], nil];
    l.endPoint = CGPointMake(0.0, 0.0f);
    l.startPoint = CGPointMake(1.0f, 0.0f);

    UIGraphicsBeginImageContext(self.label.frame.size);
    [l renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *textGradientImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return textGradientImage;
}

该代码会创建一个应从左向右淡化的黑色图像。

接下来，当您创建标签时，您需要根据我们刚刚生成的图像制作的图案来设置其文本颜色。

self.label.alpha = 0;
self.label.textColor = [UIColor colorWithPatternImage:[self labelTextGradientImage]];

假设有效，最后一步是将标签设置为视图，并在发生这种情况时更改其文本颜色。

[UIView transitionWithView:self.label duration:0.2 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    self.label.textColor = [UIColor blackColor];
    self.label.alpha = 1;
} completion:^(BOOL finished) {
}];

动画代码有点时髦，因为UILabel的textColor属性似乎不具有UIViewAnimation的动画效果。

Answer 2

嗯，我知道我会怎么做。我会制作一个包含渐变的蒙版，并在标签的正面设置蒙版动画。

这是我做的时候的结果（不知道它是不是你的想法，但也许它是一个开始）：

Answer 3

我设法实现了这一点，并在UIView扩展中创建了一个功能：

@discardableResult public func addSlidingGradientLayer(withDuration duration: Double = 3.0, animationDelegate delegate: CAAnimationDelegate? = nil) -> CAGradientLayer {

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor, UIColor.clear.cgColor]
    gradientLayer.startPoint = CGPoint(x: -1.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

    let gradientAnimation = CABasicAnimation(keyPath: "startPoint")
    gradientAnimation.fromValue = gradientLayer.startPoint
    gradientAnimation.toValue = gradientLayer.endPoint
    gradientAnimation.duration = duration
    gradientAnimation.delegate = delegate

    gradientLayer.add(gradientAnimation, forKey: "startPoint")

    layer.mask = gradientLayer

    return gradientLayer

}

首先，我们创建一个CAGradientLayer实例，将其用作视图的遮罩（在本例中为UILabel）。

然后，我们创建一个CABasicAnimation实例，该实例用于为startPoint的{​​{1}}设置动画。这具有通过提供的一些CAGradientLayer值将startPoint从左向右滑动的作用。

最后，我们还是duration的代表。然后，如果我们遵守CABasicAnimation协议，则可以在动画完成后执行一些代码。

这是您使用此扩展程序的方式：

CAAnimationDelegate

class ViewController: UIViewController { @IBOutlet weak var someLabel: UILabel! private func configureSomeLabel() { someLabel.text = "Sliding into existence!" someLabel.sizeToFit() someLabel.addSlidingGradientLayer(withDuration: 3.0, animationDelegate: self) } override func viewDidLoad() { super.viewDidLoad() configureSomeLabel() } } 已连接到情节提要的位置。并将此视图控制器分配为动画委托后，我们需要添加：

someLabel

我选择删除遮罩层的地方。

希望这对某人有帮助！