iOS 骨架加载动画

如何解决iOS 骨架加载动画

我正在为 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. 特别是，有没有更好的方法来移除加载状态？有没有更好的方法来去除这些层？

解决方法

您将一组 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中，灰度渐变没有实际效果好，但可以看到它给出了预期的结果