从左到右褪色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实例，我们用它来为CAGradientLayer的startPoint设置动画。 这具有使用一些提供的duration值从左向右滑动startPoint的效果。

最后，我们也是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已经连接到你的故事板。 因为我们已经将此视图控制器指定为动画委托，所以我们需要添加：

extension ViewController: CAAnimationDelegate {
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        someLabel.layer.mask = nil
    }
}

我选择去除掩蔽层的地方。

希望这有助于某人！