美文网首页
Lottie 实现开门动画效果

Lottie 实现开门动画效果

作者: 羊妞麻麻 | 来源:发表于2018-09-10 18:13 被阅读78次

需求如下:
点击列表加载动画效果如下:


屏幕快照 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文件如下:

相关文章

网友评论

      本文标题:Lottie 实现开门动画效果

      本文链接:https://www.haomeiwen.com/subject/pywsgftx.html