皆様、あけましておめでとうございます。
年末年始とバタバタしておりまして今更なご挨拶ですが、皆様いかがお過ごしでしょうか?
「CHIZTEK(チズテク) 手描き地図検索」の開発チームです。
さて、早速ですがSilverlightの話題です。
ご存知の方も多くいらっしゃると思いますが、SilverlightのXAMLはWPFで使用するXAMLのサブセットとなっています。
そのため、いくつかの機能が省略されてしまっているのですが、個人的に大変残念なのが「Blur(ブラー)」です。
以前、「Vista サイドバーガジェットについて(Blur編)。」というエントリーでも紹介しましたが、Blurは一見地味な機能である一方、上手く使うと大変面白い効果が得られます。
しかし残念なことに、SilverlightのXAMLでは使用することが出来ません。
でもただ「出来ない」というだけでは悔しいので、擬似的になんとかならないかと実験してみた結果がコチラです。

(※動作にはSilverlight2.0 ランタイムのインストールが必要です)
原理としてはこのようになっています。
まず、以下のような3パターンのPNG画像を用意します。



(一番右の画像は、ピンク色の部分が実際には透過色になっています)
一番左は元画像、真ん中はPhotoShopのガウスぼかしなどでボカシた画像、一番右は、背景や他のパーツが透過しないための「下敷き」のようなものです。
(この一番右の画像が無いと、チズテクちゃん同士が重なったときに透けてしまう場合があるのです)
そして、XAML上でこれらの画像を重ね、一番左の元画像と真ん中の既にボカシた画像の、それぞれの透明度(Opacity)を同時に変更させることによって混ぜています。
例えば、ぼかしたい場合は、元画像のOpacityの値を下げて、ボカシた画像の値を上げます。
それを段階的に行うことによって、「ハッキリとした画像」から「ボンヤリした画像」への変化が、(割と)スムーズにできるようになるわけです。
今回は、回転運動のY座標の高さによってボカシの値と、遠近感を出すためにサイズが変更するようにしていますが、使いたいシーンによって色々な条件で応用が出来るテクニックだと思います。
また、今回のサンプルではチェックボックスでBlurのオン・オフが切り替えられますので、見比べてみて印象の違いを感じていただければと思います。
いかがだったでしょうか?
機能的には存在していなくても、このような工夫をして(それっぽく)実現できるのがプログラミングの面白いところです。
皆様も是非トライしてくださいね。
それでは、よいSilverlightを!(キメ言葉)