複雑なアニメーションについて

Question

「プログラミングに関する質問」かどうかは微妙なのですが、
以下に示すようなイラストが動くようなアニメーションはどのように作成、実装されているのでしょうか？
オブジェクトの大きさや色をアニメーションさせるのは分かるのですが、
イラストが動くようなアニメーションはどうやって作成しているのでしょうか？

「アドビなんちゃらでアニメーション部分を作成？」→「実装？」という手順でしょうか...？
私は普段はWPFやXamarinを使います。

https://assets.st-note.com/production/uploads/images/9727190/picture_pc_3afd3dfda5075154ac17e72eb188e156.gif
※鳥が飛んでくるアニメーション

https://giphy.com/gifs/fV8ATUzVAinjkJRzCb
※動物が走るアニメーション

Answer 1

色々調べたところ、DaVinci ResolveやBlenderで使ってアニメーションの作成ができそうでした。

DaVinci Resolveを実際に使ったところ、
鳥のアニメーションはなんとかできそうでしたが、
動物が走っているようなアニメーションはBlenderでないとできない感じでした（Blenderは何ができるか調べた程度）。

ただしやっぱり学習コストが高いです。

１つ勘違いしていたことがあり、gifはなめらかなアニメーションができないと思っていましたが、
調べたところ60pfsなどのgifも作成可能でした。（ただ調整が難しかった....）

Answer 2

Webで見たりするのはLottieかもしれません。

Xamarin・UWPでは苦も無く表示できるようです。
Baseflow/LottieXamarin: Render After Effects animations natively on Android, iOS, MacOS and TvOS for Xamarin

Lottie - Windows Community Toolkit | Microsoft Docs

WPFでも手がないわけではないようです。
[WPF] Lottie-Windows in WPF apps · Issue #132 · CommunityToolkit/Lottie-Windows

自作するには結局「アドビなんちゃら」になってしまうので、興味はあるが試したことはないです^^;

xamlでも（がんばれば）相当凝ったことができるはずですが、やったことはないですしやりたくもないですねｗ

Comments

[Mashimasa]

ありがとうございます。
Lottieについて調べたところ「After Effectsで作成したアニメーションをそのままWEB（json）に落とし込める」というものなんですね。
After Effectsあたりも興味があったので検討してみたいと思います。

Answer 3

以下に示すようなイラストが動くようなアニメーションはどのように作成、実装されているのでしょうか？

https://giphy.com/gifs/fV8ATUzVAinjkJRzCb
※動物が走るアニメーション

こたえは、そのページに書いてありませんか。

Animated GIF ...

https://ja.wikipedia.org/wiki/GIF%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

教科書の隅に描いた、パラパラ漫画。

Comments

[Mashimasa]

ありがとうございます。
WikiにあったWebPあたりが良いかなと思いました。
つまるところ、アニメーションするには連続した画像（パラパラ漫画）を表示するしかなく、
アニメーションを作成するツールはあれやこれやあるので、
「アニメーション作成」→「連続した画像として出力」→「WebPに変換」→「実装」
（↑この手順がイメージ出来ていなかった）
という方法がまあ現実的なのかなと思いました。

[shiketa]

game engineつかってゴリゴリアニメーションを動かすこともできるんじゃないでしょうか。その界隈は疎いので知りませんが。
あなたが挙げた例ふたつは、GIFアニメーションのようです、というだけのこと。