iOS開発のLottie--クールなダイナミック

動効はソフトウェア開発において非常によく見られ、クールなアニメーションはアプリケーションのB格を向上させることができるが、デザイナーの設計からプログラム猿GGのコードに変換するのは非常に「苦痛」な過程である.複雑なアニメーションでは、研究と実現に多くの時間がかかる可能性があります.Lottieの出現は、この気まずい局面を解決した.複雑でクールなダイナミック効果の実現が容易になります.
LottieはAirbnbのgithubでのオープンソースプロジェクトで、iOS、Android、Rect Nativeマルチプラットフォームをサポートしています.Adobe After EffectプラグインbodymovinでJSONファイルをエクスポートし、lottieでjsonファイルをロードすることで動的効果を実現し、アニメーション開発を簡単に行うことができます.
 
プロジェクト転送ゲート:
Lottie-iOS:Lottie for iOSダウンロード.
Lottie-Android:Lottie for Androidダウンロード.
Lottie-RectNative:Lottie for RectNativeダウンロード.　　
 
Githubの紹介:
　　Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!
LottieはAndriodとiOSに適用可能なアニメーションライブラリで、bodymovinプラグインによってAdobe After Effectsアニメーションを解析してjsonファイルとしてエクスポートし、携帯電話側のオリジナル方式またはReact Nativeによってベクトルアニメーションをレンダリングします.
注意:iOS 8+をサポートします.
 
公式実現効果図は以下の通りである.
　　　
　
　
　　　　
　　
AEツールのインストールとプラグインの構成とJSONファイルの生成については、ご本人のAdobe After Effect For Macブログを参照してください.
　　
物の準備ができたらアニメーションを実現することができます.
次の操作を行います.
　　Lottie supports iOS 8 and above. Lottie animations can be loaded from bundled JSON or from a URL
　　To bundle JSON just add it and any images that the animation requires to your target in xcode.
ローカルJSONファイルまたはJSONのURLアドレスをロードできます.
サンプルコード:
1、ローカルJSONファイルでロードする:

1 LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
2 [self.view addSubview:animation];
3 [animation playWithCompletion:^(BOOL animationFinished) {
4   // Do Something
5 }];

2、URLでロード:

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

動的効果の進行状況を直接設定できます.

1 CGPoint translation = [gesture getTranslationInView:self.view];
2 CGFloat progress = translation.y / self.view.bounds.size.height;
3 animationView.animationProgress = progress;

カスタムターンテーブルコントローラをサポートできます.

#pragma mark -- View Controller Transitioning

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

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

Swiftサポート:

1 let animationView = LOTAnimationView(name: "hamburger")
2 self.view.addSubview(animationView)
3 
4 animationView.play(completion: { finished in
5     // Do Something
6 })

注意:
　　Animation file name should be first added to your project. as for the above code sample, It won't work until you add an animation file called hamburger.json .. let animationView = LOTAnimatedView.animationNamed("here_goes_your_json_file_name_without_.json")
上記のサンプルコードでは、アクティビティファイルをプロジェクトに追加してから、アクティビティを実行する必要があります.　　
AEがサポートする特性
　　Keyframe Interpolation

Linear Interpolation

Bezier Interpolation

Hold Interpolation

Rove Across Time

Spatial Bezier

　　Solids

Transform Anchor Point

Transform Position

Transform Scale

Transform Rotation

Transform Opacity

　　Masks

Path

Opacity

Multiple Masks (additive)

　　Track Mattes

Alpha Matte

　　Parenting

Multiple Parenting

Nulls

　　Shape Layers

Anchor Point

Position

Scale

Rotation

Opacity

Path

Group Transforms (Anchor point, position, scale etc)

Rectangle (All properties)

Elipse (All properties)

Multiple paths in one group

　　Stroke (shape layer)

Stroke Color

Stroke Opacity

Stroke Width

Line Cap

Dashes

　　Fill (shape layer)

Fill Color

Fill Opacity

　　Trim Paths (shape layer)

Trim Paths Start

Trim Paths End

Trim Paths Offset

　　Layer Features

Precomps

Image Layers

Shape Layers

Null Layers

Solid Layers

Parenting Layers

Alpha Matte Layers

現在サポートされていないAEプロパティ

Even-Odd winding paths

Merge Shapes

Trim Shapes Individually feature of Trim Paths

Expressions

3d Layer support

Gradients

Polystar shapes (Can convert to vector path as a workaround)

Alpha inverted mask

　　　　
 
 
 
 
 
 
 
　　
 
転載先:https://www.cnblogs.com/ZachRobin/p/6872840.html