从左到右淡入 UILabel答案

【问题标题】：Fading UILabel in from left to right从左到右淡入 UILabel
【发布时间】：2018-09-28 01:03:00
【问题描述】：

我想为 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];

【问题讨论】：

标签： ios objective-c animation

【解决方案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 进行动画处理。

【讨论】：

【解决方案2】：

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

这是我这样做时的结果（不知道这是否正是您的想法，但也许这是一个开始）：

【讨论】：

能否提供实现这个效果的代码？

【解决方案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 设置动画。这具有将 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 已连接到您的故事板的位置。由于我们已将此视图控制器指定为动画委托，因此我们需要添加：

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

我选择移除遮罩层的位置。

希望这对某人有所帮助！

【讨论】：