仿腾讯视频实现加载动画

MrZWCui

已于 2022-08-26 08:59:27 修改

阅读量183

点赞数 1

分类专栏： iOS 文章标签： ios objective-c 动画

于 2022-08-26 08:58:04 首次发布

本文链接：https://blog.csdn.net/qq_43441647/article/details/126535944

版权

iOS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

示例图片

loading1

loading2

loading3

实现效果gif图

本文使用的是animateKeyframesWithDuration关键帧动画

[UIView animateKeyframesWithDuration:duration delay:delay 
options:options animations:^{ 
[UIView addKeyframeWithRelativeStartTime:0.0 
relativeDuration:0.5 animations:^{ 
//第一帧要执行的动画 
}]; 
[UIView addKeyframeWithRelativeStartTime:0.5 
relativeDuration:0.5 animations:^{ 
//第二帧要执行的动画 
}]; 
} completion:^(BOOL finished) { 
//动画结束后执行的代码块 
}];

animateKeyframesWithDuration与animateWithDuration不同，容易打错。如若使用了animateWithDuration则动画效果如下所示

源代码

LoadingView.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface LoadingView : UIView

//是否加载
@property (nonatomic, assign) BOOL isloading;

@end

NS_ASSUME_NONNULL_END

LoadingView.m

#import "LoadingView.h"

#define kWeakSelf __weak typeof(self) weakSelf = self;

@interface LoadingView ()

@property (nonatomic, strong) UIImageView *loadIcon1;
@property (nonatomic, strong) UIImageView *loadIcon2;
@property (nonatomic, strong) UIImageView *loadIcon3;

@end

@implementation LoadingView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.loadIcon1.hidden = self.loadIcon2.hidden = self.loadIcon3.hidden = YES;
    }
    return self;
}

//开始动画
- (void)startAnimations {
    CGFloat duration = 2.0;
    CGFloat dur = 1.0 / 12;
    self.loadIcon1.hidden = self.loadIcon2.hidden = self.loadIcon3.hidden = NO;
    self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
    self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
    self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
    [UIView animateKeyframesWithDuration:duration delay:0 options:UIViewKeyframeAnimationOptionRepeat | UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
        //关键帧动画 addKeyframeWithRelativeStartTime开始时间 relativeDuration结束动画
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:dur animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur relativeDuration:dur * 2 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(1, 1);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 2 relativeDuration:dur * 3 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(1.3, 1.3);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 3 relativeDuration:dur * 4 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(1, 1);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 4 relativeDuration:dur * 5 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 5 relativeDuration:dur * 6 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(1, 1);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 6 relativeDuration:dur * 7 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(1.3, 1.3);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 7 relativeDuration:dur * 8 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(1, 1);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 8 relativeDuration:dur * 9 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(1, 1);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 9 relativeDuration:dur * 10 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(1.3, 1.3);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 10 relativeDuration:dur * 11 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(1, 1);
        }];
        [UIView addKeyframeWithRelativeStartTime:dur * 11 relativeDuration:1 animations:^{
            self.loadIcon1.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon2.transform = CGAffineTransformMakeScale(0, 0);
            self.loadIcon3.transform = CGAffineTransformMakeScale(0, 0);
        }];
    } completion:^(BOOL finished) {

    }];
}

/*懒加载*/
- (UIImageView *)loadIcon1 {
    if (!_loadIcon1) {
        _loadIcon1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 9, 10)];
        [_loadIcon1 setImage:[UIImage imageNamed:@"loadIcon1"]];
        [self addSubview:_loadIcon1];
    }
    return _loadIcon1;
}

- (UIImageView *)loadIcon2 {
    if (!_loadIcon2) {
        _loadIcon2 = [[UIImageView alloc] initWithFrame:CGRectMake(11, 0, 9, 10)];
        _loadIcon2.image = [UIImage imageNamed:@"loadIcon2"];
        [self addSubview:_loadIcon2];
    }
    return _loadIcon2;
}

- (UIImageView *)loadIcon3 {
    if (!_loadIcon3) {
        _loadIcon3 = [[UIImageView alloc] initWithFrame:CGRectMake(22, 0, 9, 10)];
        [_loadIcon3 setImage:[UIImage imageNamed:@"loadIcon3"]];
        [self addSubview:_loadIcon3];
    }
    return _loadIcon3;
}

- (void)setIsloading:(BOOL)isloading {
    _isloading = isloading;
    if (_isloading) {
        [self startAnimations];
    } else {
        [self.layer removeAllAnimations];
    }
}

@end