CTFアニメーションSlideOut

ここでは、「CTFアニメーションSlideOut」 に関する記事を紹介しています。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CTFWikiに興味深いアニメーション技法が有りましたので試してみました。
その名も「SlideOut」、なかなか唆られる名前ですねーw

これは画像から画像の一部を切り出すことが出来るアニメーション技法です。
図を使って具体的に説明してみたいと思います。


test.png
今回はこれを例にします。サイズは100x100で1区間50x50です。


とりあえずXML記述例、Object名はslide_outという名前にしてあります。


【速度関連】
"duration" 画像を切りだして表示するまでの実行終了までの時間です。
"accelMode" 速度に緩急を付けることができます、これは通常0x0でいいかも。詳しくはWikiにて。

【切り出し関連】(ここでは範囲はポジション指定ではなく100分率小数指定になります)
"posXscale""posYscale" これらは切り出しの開始地点の指定です。これは画像の左端を基準に考えます。
"xcompress""ycompress"これらは開始地点を基準にして切り出す範囲を指定します。


test2.png
つまり図で表すとこうなる。入力する数値は百分率を小数で表します。ただし,基本的にマイナスは考えないこと




例えば、B(50x50)を切り出したい場合を例にしてみよう。

test3_20110519213417.png
今回は100x100の中の1区間50x50を切り抜く前提で行くので半分の0.5(50%)で切り出すことを目的に進めます。


切り出し開始地点は基準からX軸方向に"0.5"離れた位置にY軸方向に"0"ほど離れた部分です。
今回はそこからBを切りだす。つまり100x100の半分50x50を切り出すわけです。
ということは開始地点より元の画像のサイズ(100x100)の0.5ずつ切り抜いていけばBを切り抜けるわけです。
XMLで記述するならば



という記述になります。




ではCの場合はどうでしょう?やり方はやはり同じです。

test4.png



まずは基準から切り出し開始地点を指定します。
開始点はX軸方向に"0"離れた位置にY軸方向"0.5"離れた位置に置く。
そこから同様に画像の縦横半分の50x50を切り出すわけですから,0.5ずつ切り抜くことになります。
XMLで表すと



という記述になります。大体これでイメージが掴めたかと思います。


ところが、SlideOutは切り抜いたイメージを元の画像(今回は100x100)のサイズで表示しようとします。
つまりAを切り抜いた場合、そのままSlideOutで表示してみると

test5.png


図のような100x100のAを表示させてしまいます。
大抵の場合はそのまま切り出す用途につかう技術だと思うので,50x50のサイズを維持する必要があると思います。

そこで,SlideOutの後にResizeを使って画像の大きさを50x50(0.5)で表示するようにします。

ResizeのXML記述例


【速度関連】
"duration" 画像のリサイズの実行終了までの時間です。
"accelMode" リサイズする速度に緩急を付けることができます、これは通常0x0でいいかも。詳しくはWikiにて。
【リサイズ関係】
"scaleWidth" 画像の幅のリサイズを行う動作です。これも百分率小数の数値を入力します。
"scaleHeight" 画像の高さのリサイズを行う動作です。これも百分率小数の数値を入力します。

今回は100x100を0.5(50%)で表示するようにするため

という記述にします。


test6.png


すると,このように50x50のサイズを変更せずに切り抜くことができたAが表示できます。


これで判ると思いますが、基本的にサイズを保持して切り抜きたい場合

"xcompress" = "scaleWidth""ycompress" = "scaleHeight"

が成り立ちます。ただし,そのまま大きくしたり小さくしたりしたい場合は例外です。



と,このようにSlideOutは表示と切り出しを行ってくれます。これを応用して何か作れたら楽しそうですね。


今回のこのABCD切り取りのアニメーションサンプルCTFを作っておいたので,
PSPで適応するなりソースを確認するなりしてみてください。Rotate動作とMoveTo動作はおまけですw

ダウンロード

この記事は一部、CTF カスタムテーマまとめ Wiki 「SlideOutの使用例」 から引用しています
スポンサーサイト
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://electricvoice.blog40.fc2.com/tb.php/654-55c2d311
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。