iOS 仿腾讯视频加载动画

[email protected]

[email protected]

[email protected]

动画.gif

#import 

NS_ASSUME_NONNULL_BEGIN

@interface LMLoadingView : UIView
///初始化
+ (instancetype)shareInstancetype;
///控制动画开关
@property (nonatomic, assign) BOOL Startanimationed;
@end

NS_ASSUME_NONNULL_END

#import "LMLoadingView.h"
@interface LMLoadingView ()

@property (nonatomic, strong) UIImageView *iconV1;
@property (nonatomic, strong) UIImageView *iconV2;
@property (nonatomic, strong) UIImageView *iconV3;

@end
@implementation LMLoadingView

+ (instancetype)shareInstancetype {
    static LMLoadingView *loadingView;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        loadingView = LMLoadingView.new;
    });
    return loadingView;
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.iconV1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 9, 10)];
        self.iconV1.image = [UIImage imageNamed:@"obloading1"];
        [self addSubview:self.iconV1];
        self.iconV2 = [[UIImageView alloc]initWithFrame:CGRectMake(11, 0, 9, 10)];
        self.iconV2.image = [UIImage imageNamed:@"obloading2"];
        [self addSubview:self.iconV2];
        self.iconV3 = [[UIImageView alloc]initWithFrame:CGRectMake(22, 0, 9, 10)];
        self.iconV3.image = [UIImage imageNamed:@"obloading3"];
        [self addSubview:self.iconV3];
        self.iconV1.hidden = self.iconV2.hidden = self.iconV3.hidden = YES;
    }
    return self;
}

- (void)setStartanimationed:(BOOL)Startanimationed {
    _Startanimationed = Startanimationed;
    if (Startanimationed) {
        [self startAnimation];
    }else{
        [self.layer removeAllAnimations];
    }
}
///动画效果
-  (void)startAnimation {
    CGFloat duration = 2.0;
    CGFloat dur = 1.0/12;
    KWeakSelf
    self.iconV1.hidden = self.iconV2.hidden =self.iconV3.hidden = NO;
    weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
    weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
    weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);
    [UIView animateKeyframesWithDuration:duration delay:0 options:UIViewKeyframeAnimationOptionRepeat |UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:dur animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur relativeDuration:dur*2 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(1, 1);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*2 relativeDuration:dur*3 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(1.3, 1.3);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

            
        }];
        [UIView addKeyframeWithRelativeStartTime:dur*3 relativeDuration:dur*4 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(1, 1);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*4 relativeDuration:dur*5 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*5 relativeDuration:dur*6 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(1, 1);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*6 relativeDuration:dur*7 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(1.3, 1.3);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*7 relativeDuration:dur*8 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(1, 1);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*8 relativeDuration:dur*9 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(1, 1);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*9 relativeDuration:dur*10 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(1.3, 1.3);

        }];
        [UIView addKeyframeWithRelativeStartTime:dur*10 relativeDuration:dur*11 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(1, 1);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur*11 relativeDuration:1 animations:^{
            weakSelf.iconV1.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV2.transform = CGAffineTransformMakeScale(0, 0);
            weakSelf.iconV3.transform = CGAffineTransformMakeScale(0, 0);
        }];
    } completion:^(BOOL finished) {
        
    }];
    
}

@end

如果有更好的方法，欢迎指教