需求如下:
点击列表加载动画效果如下:
屏幕快照 2018-09-10 下午5.06.13.png
成功失败样式如下:
屏幕快照 2018-09-10 下午5.06.23.png
✔️提示 开门成功
❎提示 开门失败
需要
pod 'lottie-ios'
具体用法如下
@interface SCEntranceManagementRightCell()
@property (nonatomic,weak) UIImageView *iconImg;
@property (nonatomic,weak) UILabel *nameLable;
@property (nonatomic,weak) UILabel *onlineLab;
@property (nonatomic,weak) LOTAnimationView *loadingView;
@property (nonatomic, strong) LOTAnimationView *successAnimationView;
@end
初始化
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
self.selectionStyle = UITableViewCellSelectionStyleNone;
UIImageView *iconImg = [[UIImageView alloc] initWithFrame:CGRectMake(15, 15, 40, 40)];
self.iconImg = iconImg;
iconImg.image = [UIImage imageNamed:@"communityRegion"];
[self addSubview:iconImg];
LOTAnimationView *loadingView = [LOTAnimationView animationNamed:@"loading"];
loadingView.frame = iconImg.frame;
loadingView.loopAnimation = true;
loadingView.hidden = YES;
loadingView.animationSpeed = 1;
[self addSubview:loadingView];
self.loadingView = loadingView;
LOTAnimationView *successView = [LOTAnimationView animationNamed:@"kaimengsuccess"];
successView.frame = iconImg.frame;
successView.loopAnimation = NO;
successView.hidden = YES;
[self addSubview:successView];
self.successAnimationView = successView;
UILabel *nameLable = [[UILabel alloc] initWithFrame:CGRectMake(iconImg.maxX + 15, 12, 200, 22)];
nameLable.textColor = [UIColor colorWithHexString:@"#333333"];
nameLable.font = [UIFont systemFontOfSize:16];
nameLable.text = @"西山悦庭";
self.nameLable = nameLable;
[self addSubview:nameLable];
UILabel *onlineLab = [[UILabel alloc] initWithFrame:CGRectMake(iconImg.maxX + 15, nameLable.maxY + 4, 100, 20)];
onlineLab.textColor = [UIColor colorWithHexString:@"#32C347"];
onlineLab.font = [UIFont systemFontOfSize:14];
onlineLab.text = @"在线";
self.onlineLab = onlineLab;
[self addSubview:onlineLab];
}
return self;
}
其中 LOTAnimationView包含一个正在loading和一个成功的view.
在点击加载动画的时候,需要两个方法:
*一个是开始动画
*一个是停止动画
@interface SCEntranceManagementRightCell : UITableViewCell
@property (nonatomic,strong) SCOpenDoorRow *model;
- (void)startOrStopLoading:(BOOL)state;
- (void)showSuccessAnimation:(BOOL)state;
@end
具体实现如下:
- (void)startOrStopLoading:(BOOL)state{
if (state) {
self.iconImg.hidden = YES;
self.successAnimationView.hidden = YES;
self.loadingView.hidden = NO;
[self.loadingView play];
}else{
self.iconImg.hidden = NO;
[self.loadingView stop];
self.loadingView.hidden = YES;
self.successAnimationView.hidden = YES;
}
}
- (void)showSuccessAnimation:(BOOL)state{
if (state) {
self.iconImg.hidden = YES;
self.loadingView.hidden = YES;
self.successAnimationView.hidden = NO;
[self.successAnimationView play];
}else{
self.iconImg.hidden = NO;
[self.successAnimationView stop];
self.successAnimationView.hidden = YES;
self.loadingView.hidden = YES;
}
}
在didSelectRowAtIndexPath中直接调用即可
[cell startOrStopLoading:YES];
当接口返回成功数据之后:
[cell startOrStopLoading:NO];
[cell showSuccessAnimation:YES];
以上就是Lottie的简单动画使用。
json文件如下:
网友评论