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本地文件
LAAnimationView *animation = [LAAnimationView animationNamed:@"Lottie"]; [self.view addSubview:animation]; animation.loopAnimation = YES; [animation playWithCompletion:^(BOOL animationFinished) { }];
|
加载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 })
|
相关文章
这个项目碉堡了
Airbnb/Lottie-iOS