iOS 骨架加载动画

Question

我正在向 iOS 应用程序添加骨架加载。我有一个 UICollectionView，其中每个单元格在加载数据时都应显示“加载”状态。为了处理这种状态，将使用骨架加载技术。

对于这种情况，我只是获取标签和图像，并向它们添加一个子层，即灰色子层，被每个标签或图像的边界所掩盖。这工作正常。

问题是我还想要一个“光泽”或“闪光”动画，从左到右穿过每个视图并重复。但我无法让动画工作。它只是看起来像这样，没有任何动画。第二项颜色较浅，因为它被禁用，否则它们将是相同的颜色。但是一切看起来都很好，只是应该有一个动画。

代码

这是我的代码。同样，问题是动画没有发生。应该有一个 CAGradientLayer 从左侧开始，在视野之外，并在右侧动画，直到它离开视野。然后一切都在重复。

@interface MyCollectionViewCell ()

/**
 * If this is YES, then the skeleton loading layers and animation need to be shown.
 * If this is NO, then the normal view should be shown. No skeleton loading layers should be shown.
 */
@property (assign, nonatomic, getter=isLoading) BOOL loading;

@end

@implementation MyCollectionViewCell

//... initialization and other logic

/**
 * This finds the direct subviews of the contentView that are either labels or images.
 */
- (NSArray<__kindof UIView *> *)loadableSubviews {
    NSMutableArray<UIView *> *views = [[NSMutableArray alloc] init];
    for (UIView *view in self.contentView.subviews) {
        if ([view isKindOfClass:[UILabel class]]) {
            [views addObject:view];
        } else if ([view isKindOfClass:[UIImageView class]]) {
            [views addObject:view];
        }
    }
    return views;
}

- (void)setLoading:(BOOL)loading {
    self->_loading = loading;
    
    NSArray<__kindof UIView *> *loadingViews = [self loadableSubviews];
    
    if (loading) {
        //display the skeleton loading layers

        UIColor *backgroundColor = [UIColor colorWithRed:(210.0/255.0) green:(210.0/255.0) blue:(210.0/255.0) alpha:1.0];
        UIColor *highlightColor = [UIColor colorWithRed:(235.0/255.0) green:(235.0/255.0) blue:(235.0/255.0) alpha:1.0];
        CALayer *skeletonLayer = [CALayer layer];
        skeletonLayer.backgroundColor = backgroundColor.CGColor;
        skeletonLayer.name = @"skeletonLayer";
        skeletonLayer.anchorPoint = CGPointZero;
        skeletonLayer.frame = UIScreen.mainScreen.bounds;
        
        for (UIView *loadingView in loadingViews) {
            CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
            gradientLayer.colors = @[backgroundColor, highlightColor, backgroundColor];
            gradientLayer.startPoint = CGPointMake(0.0, 0.5);
            gradientLayer.endPoint = CGPointMake(1.0, 0.5);
            gradientLayer.frame = UIScreen.mainScreen.bounds;
            gradientLayer.name = @"skeletonGradient";
            
            loadingView.layer.mask = skeletonLayer;
            [loadingView.layer addSublayer:skeletonLayer];
            [loadingView.layer addSublayer:gradientLayer];
            loadingView.clipsToBounds = YES;
            
            CGFloat width = UIScreen.mainScreen.bounds.size.width;
            
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
            animation.duration = 3.0;

            //TODO: is there maybe something wrong with the y coordinate here?
            animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(-width, gradientLayer.frame.origin.y)];
            animation.toValue = [NSValue valueWithCGPoint:CGPointMake(width, gradientLayer.frame.origin.y)];
            animation.repeatCount = CGFLOAT_MAX;
            animation.autoreverses = NO;
            animation.fillMode = kCAFillModeForwards;
            
            [gradientLayer addAnimation:animation forKey:@"gradientShimmer"];
        }
    } else {
        //remove the skeleton loading layers

        for (UIView *loadingView in loadingViews) {
            for (NSInteger x = loadingView.layer.sublayers.count - 1; x >= 0; x--) {
                CALayer *sublayer = loadingView.layer.sublayers[x];
                if ([sublayer.name isEqualToString:@"skeletonLayer"] || [sublayer.name isEqualToString:@"skeletonGradient"]) {
                    [sublayer removeFromSuperlayer];
                }
            }
        }
    }
}

@end

调试

我在将动画添加到图层后添加了一个断点，并检查了 LLDB 中的gradientLayer，它显示动画已附加到图层：

(lldb) po gradientLayer
<CAGradientLayer:0x280964380; name = "skeletonGradient"; position = CGPoint (187.5 406); bounds = CGRect (0 0; 375 812); allowsGroupOpacity = YES; name = skeletonGradient; endPoint = CGPoint (1 0.5); startPoint = CGPoint (0 0.5); colors = (
    "UIExtendedSRGBColorSpace 0.823529 0.823529 0.823529 1",
    "UIExtendedSRGBColorSpace 0.921569 0.921569 0.921569 1",
    "UIExtendedSRGBColorSpace 0.823529 0.823529 0.823529 1"
); animations = [gradientShimmer=<CABasicAnimation: 0x2809645e0>]>

但由于某种原因，它似乎没有运行。

问题

1. 有人知道为什么动画不工作吗？
2. 有没有更好的方法来做到这一点？
3. 特别是，有没有更好的方法来移除加载状态？有没有更好的方法来移除这些层？

Answer 1

您将一组 UIColor 对象设置为 gradientLayer 的 colors 属性。相反，您必须使用 CGColors，请在此处查看 Apple 的文档：

定义每个渐变色标的 CGColorRef 对象数组。动画。

见https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462403-colors?language=objc

所以这意味着您应该按如下方式更改分配：

gradientLayer.colors = @[(id)backgroundColor.CGColor, (id)highlightColor.CGColor, (id)backgroundColor.CGColor];

测试

在小动画 GIF 中，灰色渐变不如实际效果好，但您可以看到它给出了预期的结果