雑種のポメラニアン

フリープログラマーの日記とか人生観とか綴るよ

Layer,Layout,Path,Animationの使い方 #FireMonkey

DVDドライブの故障でLinuxブートローダーがインストールできないので
しばらくDelphiXE2のFireMonkeyの調査をする事にした。

<今日のお題>
FireMonkey\AnimationDemo3Dの左下の部分を抜き出して板を回転させる。


  1. 新規作成で「FireMonkey HD アプリケーション」を選んではダメ!。新規作成、その他から「FireMonkey3Dアプリケーション」を選ぶこと。
  2. まず画面にツールパレットのLayerタブにある、TLayer3Dを貼る。これはキャンバスみたいなもんらしい。フォーム上で選択すると拡大縮小回転ができる。Fillプロパティで色が変えられる。
  3. サンプルだとその下にLayoutが貼り付けてあるが、試したところなくても動いたので、今回は外した。
  4. LayerにAnimationsタブにあるTFloatAnimationを貼る。一度フォームに貼り付けてから、左上のオブジェクトツリー図でLayerにぶら下げるといいです。PropertyTypeに「RotationAngle.Y」を指定するとY軸回転する。StopValueに360を指定して、LoopをTrueにするとずーっと回り続ける。InverseにTrueを指定すると一回転したところで逆に回り始める。DurationはStartValue〜StopValueまでの処理時間(秒)。これで板が横に回転するようになる。
  5. ちなみにXは右、Yは上、Zは画面向かって正面となります。この座標はDirectXの座標で、OpenGLはZ軸の向きが手前に来るのですが、OpenGLで動くMacOSXだとどうなるんでしょうね?
  6. LayerにShapesタブにあるTPathを貼り付けます。線を書くだけです。Dataはサンプルのものをそのままコピペしましたが、座標の意味がいまいちよく分からなかったので今後の課題とします。
  7. 線の色はBrushプロパティで変えます。Fillプロパティは線で囲まれた(今回は閉じてませんが)領域の色をつけます。
  8. この線は後で作るPathAnimationの道筋を表示したいだけなので、大きさはPathAnimationに合わせます。本来はPathの線に沿ってPathAnimationさせたいところですが、方法が分かりませんでした。
  9. PathにShapesタブのRoundRectを貼り付けます。Fillプロパティで色を変えられます。
  10. RoundRectにShapesタブのTTextを貼り付けます。Textプロパティで文字列を入力し、Fillプロパティで文字色を変え、Fontプロパティでフォントを変えます。
  11. RoundRectの位置はPathの内側の終端に合わせます。大きさはお好みで。
  12. RoundRectにAnimationsタブのTPathAnimationを貼り付けます。Dataはサンプルからコピりましたがやはり座標の意味がよく分かりませんでした。
  13. PathAnimationTypeは3つしかないので試してみてください。AutoReverseをTrue、LoopをTrueにすることで、内側から外側へ・外側から内側への動作を繰り返します。Durationは始点から終点までの移動時間です。

クルクル回る板の中をパスに沿って、文字列を含む角のとれた四角が行ったり来たりするサンプルができましたが、結構大変ですね。

なるべく一日一本入門アプリが作れるように頑張ります。

部分的にGLSceneのライブラリが取り込めると嬉しいんですけどね。
しかしGLSceneとの共存は難しそうだなぁというのが感想ですね。

ではまた明日(多分)(o・・o)/~