Lottie-iOS 4.0.0以降でアニメーションがうまく表示されない時の対処法

この記事を書くきっかけ

先日、Lottieで3Dレイヤーを含むアニメーションファイルに対応したPRがマージされており、ちょうど3Dレイヤーを含むアニメーションを使用したいためアップデートを行いました。
アップデート後にアニメーションを確認してみると、一部のアニメーションで座標がずれたり、レイヤーの色が真っ黒になってしまうなどの問題がありLottieのissueや検証などを含め解決法を模索しました。

Lottie-iOS 4.0.0の主な変更内容

• Lottie 3.4.0 から対応されているCore Animationがデフォルトで有効になる
• RenderingEngineOptionのデフォルト値が.automaticになる
• DecodingStrategy.dictionaryBasedがデフォルトで有効になる
• AppleのフレームワークとのコンフリクトがあるためAnimationViewなどがRenameされている
• BackgroundBehaviorのデフォルトがpause ではなく .pauseAndRestoreに変更されている
• dotLottieのファイル形式をサポート

結局何が原因だったのか

直接的な原因としては2つめの変更点である
RenderingEngineOptionのデフォルト値が.automaticになるという部分が原因でした。
元々のデフォルト値は.mainThreadだったので.automaticになり内部的に.coreAnimationが選択されてしまっているようでした。

ちなみに.automaticの挙動についてはCoreAnimationに対応しているJsonかどうかで決まっているようです。

public init(
    renderingEngine: RenderingEngineOption = .automatic, // ここが該当部分
    decodingStrategy: DecodingStrategy = .dictionaryBased,
    colorSpace: CGColorSpace = CGColorSpaceCreateDeviceRGB())
  {
    self.renderingEngine = renderingEngine
    self.decodingStrategy = decodingStrategy
    self.colorSpace = colorSpace
  }

解決方法

一番簡単な解決方法はinitでrenderingEngineを.mainThreadに変更する方法です。
（ちなみに公式もmainThreadに指定する解決方法を提案していました。)

let animationView = LottieAnimationView(configuration: .init(renderingEngine: .mainThread))

LottieAnimationViewを生成する際にconfigurationを指定します。
現状はconfigurationがletのため変更できずinitの際に指定する方法が一番妥当だと思いました。

Xibで使っている場合の対処法

LottieAnimationViewをXibで作っている場合は、現状のAnimationViewをUIViewに変更しそのViewに対してLottieAnimationViewをaddSubviewするのが手っ取り早いと思います。

複数画面の場合は大変だと思うので、今回のように3Dレイヤーを含むアニメーションを使いたいなど、特にこだわりがなければ4.0.0以前のバージョンを使うのが良さそうです。

参考文献

• Lottie-iOS Release 4.0.0
  https://github.com/airbnb/lottie-ios/releases/tag/4.0.0
• Animation looks differently with different rendering mode #1876
  https://github.com/airbnb/lottie-ios/issues/1876