一款好的app總是不會缺少吸引用戶并且有意義的動畫,在app中適當(dāng)加入經(jīng)過精準(zhǔn)設(shè)計的動畫能極大的提升用戶體驗.
對于專業(yè)的設(shè)計師來說設(shè)計一款飄逸靈動的動畫也許并不是什么難題,但是對于開發(fā)者來說,當(dāng)動畫或者視圖切換非常復(fù)雜時,是很難百分百的將這個動畫在app中完美地展現(xiàn)出來的,飄逸炫酷的動畫意味著代碼量和難度劇增.
但有了Airbnb開發(fā)的Lottie粱甫，開發(fā)者就可以免去寫一行一行的代碼而非常容易地渲染動畫了乏沸。你可以直接把 Adobe After Effects的動畫用在你的Xcode 項目中。這真的非常實用并且還能把你實現(xiàn)動畫的大量時間節(jié)省下來摧冀。
說來慚愧,lottie出來好幾個月了,我也是剛剛研究,以下是我用lottie制作出的動畫效果,初出茅廬,做工難免粗糙:
test-lottieDemo.gif
那么接下來筆者主要說說兩點:
1.制作這種lottie動畫需要的材料
2.項目中需要的相關(guān)代碼
材料
1.這里推薦一個有大量免費lottie資源的網(wǎng)站, 在這里你可以找到并且下載你鐘意的動畫
2.下載完成后將 .json 文件導(dǎo)入到你的Xcode項目中,像這樣就OK啦!
項目中導(dǎo)入json文件.png
代碼
1.pod中導(dǎo)入第三方庫
pod中導(dǎo)入lottie庫.png
2.相關(guān)代碼
//
// ViewController.m
// test-lottieDemo
//
// Created by 鄧昊 on 2017/8/23.
// Copyright ? 2017年 HarrisDeng. All rights reserved.
//
#import "ViewController.h"
#import <Lottie/Lottie.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
[self animaWithName:@"check" Frame:CGRectMake(10, 0, 180, 180)];
[self animaWithName:@"servishero_loading" Frame:CGRectMake(220, 0, 180, 180)];
[self animaWithName:@"cursoranim" Frame:CGRectMake(10, 260, 180, 180)];
[self animaWithName:@"like_animation" Frame:CGRectMake(220, 260, 180, 180)];
[self animaWithName:@"loading.." Frame:CGRectMake(10, 450, 180, 180)];
[self animaWithName:@"playing" Frame:CGRectMake(220, 450, 180, 180)];
}
- (void)animaWithName:(NSString *)name Frame:(CGRect )frame{
LOTAnimationView *animationView = [LOTAnimationView animationNamed:name];
[animationView setFrame:frame];
animationView.loopAnimation = YES;
animationView.contentMode = UIViewContentModeScaleAspectFill;
animationView.animationSpeed = 0.5;
animationView.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:3.0 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
animationView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
[self.view addSubview:animationView];
[animationView play];
}];
}
這樣就可以在你的項目中展示剛才下載的lottie動畫啦,是不是so easy?
