示例图片
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
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
相关链接
发表评论