Airbnb的开源项目Lottie简易实现动画

Airbnb的开源项目Lottie简易实现动画

Lottie是Airbnb最近推出的开源项目,设计师只要使用AE把动画做出来,再使用Bodymovin插件就能把动画文件导出成json文件。这个json文件中包括动画的点的坐标,运行的轨迹等数据,在项目中引用这个开源库,使用这个json文件（或者URL）就可以实现动画,极快的完成了一个动画效果,要知道,简单的一个动画,用代码实现起来都需要花一定的时间。

跨平台使用

这个库是跨平台的,只要设计出一套json动画描述文件,就可以支持Android,iOS,ReactNative,iOS目前是支持iOS8及以上的,同时支持OC和Swift,下面讲iOS的用法。

支持使用Cocoapods和Carthage导入

pod 'lottie-ios'
pod install

github "airbnb/lottie-ios" "master"
carthage update

简单代码实现

加载json本地文件

//加载本地的json描述文件
LAAnimationView *animation = [LAAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
//循环播放
animation.loopAnimation = YES;
//1.直接开启
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];

//2.手动开启
//设置动画的进度
//animation.animationProgress = 0
//[animation play]
//手动关闭
//[animation pause]

加载URL

LAAnimationView *animation = [[LAAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

增加转场动画

#pragma mark -- View Controller Transitioning

\\
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting
sourceController:(UIViewController *)source {
LAAnimationTransitionController *animationController = [[LAAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}

\\
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
LAAnimationTransitionController *animationController = [[LAAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}

Swift实现

let animationView = LAAnimationView.animationNamed("hamburger")
self.view.addSubview(animationView!)

animationView?.play(completion: { (finished) in
// Do Something
})

相关文章

这个项目碉堡了

Airbnb/Lottie-iOS