Blend を使った画像処理とアニメーションサンプル

#wpdev_jp #win8dev_jp

今回紹介した、Code Recipe の モニターキャンペーン。ご応募いただいた方の中から抽選で 50 名様に特典を進呈するものですが、その応募先はレシピを完了した際に表示されます。(かんたんですのでぜひご応募ください)

[期間限定 モニター キャンペーン!] Code Recipe: コード サンプルから手軽に試せる Visual Studio 2013 おススメ機能

https://aka.ms/recipecampaign

サンプルを作るにあたって、まぁ、特にひねりを入れる必要はなかったのですが、どうせならぜひ機能を覚えていただきましょう!ということでちょっとだけ使い方の技術を入れこんでます。

Blend を使ったアニメーション構築

まず一つが、Blend の図形を使った画像加工のテクニックPower Point の画像処理テクニックでもご紹介したことがありますが、基本図形の結合処理だけで簡単なアイコン的なものを作ることができます。

今回のサンプルでは、スポットライトのような効果を出すために、穴の開いたマスクフィルター(なんて言ってますが要は半透明の四角の図形です)を作るのにこの手法を使ってます。パスオブジェクトなので、拡大縮小や、色を実行時に変えられるメリットがあります。

そして、もう一つ紹介しているのが、アニメーションの作り方...だったら単純なのですが、アニメーションの可動項目に対して、インスタンス名を付けて、実行時に状況に合わせてアニメーションの動作を変える、という方法です。

image

また、サンプルの中では、定義済みのアニメーションに対して、実行時にイージングオプションをつけて動作させる、ということも実施しています。

これだったら、初めからコードでアニメーションを作ればいいじゃん?と思うかもしれません。実際そちらの方がいい場合もあります。ただ、アニメーションの定義は圧倒的にXAMLのほうがシンプルになります。管理もしやすいですし。今回のように変更する要素が少ない場合にはXAMLでアニメーションを定義して必要に応じてパラメーターを実行時に変える、という方法はなかなか便利です。

ぜひチャレンジしてみてくださいね。

アプリを実行すれば応募方法と答えがわかります!

ご参加いただいた方の中から抽選で 50 名様に特典を進呈しますが、その応募先はレシピを完了した際に表示されます。

image