質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

3回答

754閲覧

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

Mashimasa

総合スコア50

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2022/07/11 00:59

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

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

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

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

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

投稿2022/08/25 22:51

Mashimasa

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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でも(がんばれば)相当凝ったことができるはずですが、やったことはないですしやりたくもないですねw

投稿2022/07/11 04:22

TN8001

総合スコア9244

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mashimasa

2022/07/11 04:42

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

0

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

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

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

投稿2022/07/11 01:10

編集2022/07/11 01:16
shiketa

総合スコア3971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mashimasa

2022/07/11 01:25 編集

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

2022/07/11 01:59

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問