目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

ExpressionBlendでアニメーションを入れ子にする

このエントリーをはてなブックマークに追加
ExpressionBlendでアニメーションを入れ子にすると便利です。
2つの動きを別々に設定することでより自然なアニメーションが作れます。

ladybird.jpg
飛びまわるテントウムシを作ってみます。

左右の羽と胴体、頭の4つの素材をそれぞれ用意して配置します。
四つまとめて選択して右クリックするとグループ化設定できます。
今回はGridでまとめてみました。(ショートカットでコントロール+GでもOK)

group.jpg
オブジェクトとタイムラインからストーリーボードを作っていきます。
下図赤丸右の「+マーク」クリックで新しいストーリーボードが作れます。
すでに作ったアニメーション(ストーリーボード)は赤丸左の↓から編集できます。
ストーリーボードの編集をやめたい時は下図赤丸真ん中「×マーク」を必ずクリックして終了しておきます。

ladybird1.jpg

キーフレームを設定していきます。
下図0+みたいなアイコンをクリック。
タイムラインのオブジェクトごとに設定出来るので、
今回はまず羽二枚をテントウムシの羽ばたきを再現します。

閉じている状態と開いている状態を作りたいのでまずはタイムライン0秒にクリックしてキーフレームをマーク。
タイムラインを羽を開いた状態に変えて、0.02秒後くらいにキーフレームをマーク。

再生して動きをチェックして問題なければ、
タイムライン上の開いた状態・閉じた状態のキーフレームを選択し、ひたすらコピペします。

また再生して動きをチェック。
問題なければ、今度は「羽ばたきながら飛び回る」を再現します。

Gridを選択しタイムラインの0秒にキーフレームをマーク秒を進めて適当な位置にGridごと移動させます。
回転させたりしてもオッケーです。
再生して確認しながら、自然な動きに仕上げていきます。

キーフレーム

最後、元の位置に戻します。
ぴたっと戻したいので、プロパティ画面下の方にある変換メニューで微調整します。
XとYを0にすると元の位置に戻ります。
また、回転させている場合は、回転から数値を0に。

変換で設定した方がかっちり作れるので初心者向けです。

テントウムシが飛び回るキーフレームと羽ばたきのキーフレームの終了位置が同じになるようにします。
※ずれるとアニメの仕上がりがいまいちになります。



最後に繰り返しパターンを設定します。

設定したいストーリーボードを選択すると右側のプロパティが下記のように変わります。
1x(1回)、2X(2回)、3X(3回)、Forever(エンドレス)、
さらにAuto Reverse(一回再生したアニメーションを巻き戻す)を設定できます。
エンドレスに飛び回ってもらいたいのでForeverにチェックを入れます。

animetype.jpg
スポンサーサイト
  1. 2012/06/04(月) 22:18:51|
  2. Blend for VisualStudio
  3. | トラックバック:0
  4. | コメント:0
<<自分メモ*タイマーイベント* | ホーム | 自分メモ*少ないコードで年齢を計算*>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/10-15fd2e16
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。