After EffectsでLottieの穴あき（型抜き）が表現できない？パスの方向で解決！
ドーナツ状や型抜きしたシェイプのような、真ん中に穴が開いた図形を作ったとき、After Effects上ではちゃんと穴が開いているのに、書き出してLottieにすると穴が消えてしまう。そんなことはありませんか？
MP4やGIFへの書き出しなら問題なく穴が開いた状態になるので、図形の作り方自体は間違っていないはず……。
ところが、BodymovinでLottieのJSONを書き出して、LottieFilesのプレビューページなどで確認してみると、なぜか穴の部分まで塗りつぶされてしまう。
そんな問題を解決する方法が分かりました。
まず、型抜き(Subtract)がどんな仕組みで穴を作るか
穴を開けるために使っているのは、After Effectsのパスの結合(Merge Paths)、その中の型抜き(Subtract)というモードです。
型抜き(Subtract)は、外側の図形と、くり抜きたい内側の図形、2つのパスを使って穴を作る仕組みです。
結論：外側のパスの方向を反転すれば直ります
穴が塗りつぶされてしまう原因は、型抜きに使っている外側と内側、2つのパスの「方向」が揃ってしまっていたことです。
レイヤーを展開し、外側のパスを選択して、方向を反転すれば直ります。
※レイヤーの中では、外側のパスが上、内側のパスが下の順に並んでいます。
実際に外側のパスを反転すると、このように穴が開いた状態に直ります。
なぜこれで直るのか、もう少し詳しい話は以降で説明します。
原因：型抜きに使っているパスの「方向」でした
型抜きが成功したパーツと、失敗しているパーツのデータを比べたところ、原因は型抜きに使っている2つのパスの方向にありました。
パスには、時計回り・反時計回りという「方向」があります。
図形の描き方（パスファインダーで作る、ペンツールで手動で描くなど）によって、どちらの向きになるかはその都度変わります。「外側は必ず時計回り」というような決まりはありません。
外側の円から内側の円をくり抜いて穴を作る場合、この2つのパスの方向が重要になります。
外側と内側のパスの方向が逆になっていれば、正しく型抜きされます。
これは、穴が1つの場合に限りません。穴が複数あっても、それぞれの内側の穴は、外側のパスの方向と逆になっていれば型抜きされ、同じ方向であれば塗りつぶされます。
穴が複数ある場合、外側のパスは基本的に1つなので、外側の方向を反転すれば、すべての穴との関係が一括で入れ替わります。内側のパスを1つずつ直すより、外側を直す方が効率的です。
どんな図形で起こる？
円形だけでなくどんな形でも、外側と内側、両方の輪郭を持つ「複合パス」で、見た目として穴が開いていれば、同じことが起こり得ます。
※複合パス：Illustratorで、複数の輪郭をひとまとめにして1つの図形として扱う状態のこと。
ちなみに：パスの結合(Merge Paths)のモード設定自体は問題ありませんでした
型抜きが表示されないとき、まず疑うのはパスの結合(Merge Paths)の設定です。
パスの結合(Merge Paths)には、以下の5つのモードがあります。
- 結合(Merge)
- 追加(Add)
- 型抜き(Subtract)
- 交差(Intersect)
- 中マド(Exclude Intersections)
実際にこのモード設定を確認したところ、正しく型抜き(Subtract)になっていました。
モード設定が正しくても、原因は別のところ(パスの方向)にあることがある、という点は覚えておくと役立つかもしれません。
まとめ
Lottieで、型抜きが正しく表示されないのは、パスの方向が原因でした。
解決方法は、外側になるパスの方向を反転することです。
ぜひ、参考にしてみてくださいね。
イラストからアニメーションまでまとめて承っております。
制作のご相談・お見積りはこちらからお気軽にお問い合わせください！
