![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
画像組み合わせてフレームアニメーション綺麗に作れないかな?
やりようによってはできるかもしれませんよ。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
複数枚の画像を組み合わせてアニメーションを作ろうと思っても、なかなか滑らかなアニメーションを作ることは難しいですよね。
画像の枚数が多ければ滑らかになるけれど、そこまで用意がないとこんな感じになります。
![](https://creator-blog.jp/wp-content/uploads/2023/12/ai-image-animation.gif)
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
確かにちょっと気になってしまうね。
これはこれで味があって良いですけどね。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
上記のアニメーションは画像を5枚ぐらい用意して、それらをPhotoshopでアニメーションにしたものだけど、画像間のつながりが滑らかではないですよね。もっと動画のように綺麗に動いてほしいです。
そして今回試してみたのがこちらです。
![](https://creator-blog.jp/wp-content/uploads/2024/06/walking_man.gif)
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
綺麗に動いているじゃん!
なかなか綺麗ですよね。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
今回はこれをどのように作ったのかを書いていきます。簡単ですよ。
ToonCrafterを使う
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
ToonCrafterってなんなの?
AIを使った画像間の補完を行ってくれるものです
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
ToonCrafterは開始と終了のフレームを入れることで、その間を補ってアニメーションさせてくれます。
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
サンプル見ても綺麗に動いているね。
そうです今回はこれを使います。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
CartoonCrafterを使う
Huggingfaceから使うことができるので使ってみましょう。開始と終了の画像をそれぞれアップロードしてGenerateです。
![](https://creator-blog.jp/wp-content/uploads/2024/06/スクリーンショット-2024-06-11-115216-1024x542.png)
![](https://creator-blog.jp/wp-content/uploads/2024/06/スクリーンショット-2024-06-11-115038-1024x618.jpg)
![frame-animation](https://creator-blog.jp/wp-content/uploads/2024/06/walking_man.gif)
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
かなり簡単にできたね。
画像入れてボタン押すだけですからね。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
画像をアップロードするだけで間を繋いでアニメーションにしてくれるので、かなり簡単です。もし動かしてみたい画像があればやってみるといいかもしれないです。