iOS動(dòng)畫-Lottie

最近項(xiàng)目用動(dòng)畫的地方很多,自己又懶的去寫,找到一個(gè)比較好的三方庫(kù)進(jìn)行分享。

首先cocoapods進(jìn)行安裝

swift版本就使用最新的就可以
pod 'lottie-ios'
OC版本需要添加版本號(hào)
pod 'lottie-ios' ,'~> 2.5.3'

Lottie 動(dòng)畫文件

在使用Lottie之前,你需要一個(gè)以JSON文件形式輸出的動(dòng)畫數(shù)據(jù)庫(kù)。如果你已經(jīng)有了一個(gè)After Effects動(dòng)畫,用Bodymovin插件來(lái)創(chuàng)建JSON文件。

如果你不會(huì)使用After Effects呢?你可以雇一位設(shè)計(jì)師為你設(shè)計(jì)動(dòng)畫,或者你學(xué)會(huì)用After Effects。

還有一個(gè)就是去這里自己下載,這里有許多設(shè)計(jì)師設(shè)計(jì)的,找相同的進(jìn)行更改:Lottie Files

以下是我的布局,一個(gè)UIView,兩個(gè)Button:


布局.png

如何使用:

// 包含頭文件
@import Lottie;
// 設(shè)置動(dòng)畫View
@property (strong,nonatomic) LOTAnimationView *animation;
// 關(guān)聯(lián)UIView
@property (weak, nonatomic) IBOutlet UIView *animalView;

// 初始化動(dòng)畫
-(void)initAnimal
{
    self.animation = [LOTAnimationView animationNamed:@"servishero-loading"];
            
    self.animation.frame = CGRectMake(0, 0, self.animalView.frame.size.width, self.animalView.frame.size.height);
    
    [self.animalView addSubview:self.animation];
}

// 按鈕點(diǎn)擊開始動(dòng)畫
- (IBAction)startAnimal:(UIButton *)sender {
        
    NSLog(@"開始動(dòng)畫");
    self.animation.loopAnimation = YES; // 讓動(dòng)畫一直執(zhí)行
    [self.animation playWithCompletion:^(BOOL animationFinished) {
        // 動(dòng)畫停止后要做的事情
        NSLog(@"動(dòng)畫停止");
    }];
}

// 按鈕點(diǎn)擊暫停動(dòng)畫
- (IBAction)stopAnimal:(UIButton *)sender {
    
    NSLog(@"停止動(dòng)畫");
    [self.animation stop];
}

紅色框里就是在網(wǎng)站上下載的其他設(shè)計(jì)師的文件,需要下載別的都可以進(jìn)行替換


動(dòng)畫Json.png

因?yàn)镺C版的三方庫(kù)已經(jīng)不再更新了,好多動(dòng)畫展示都有些問題,所以使用了Lottie的Swift版本,項(xiàng)目用OC調(diào)用Swift三方庫(kù)

pod 'lottie-ios' ,'~> 4.2.0'

這里是LottieDemo,需要自行下載。
這里是OC調(diào)用Swift,需要自行下載。

有問題請(qǐng)指出~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容