CodeZine(コードジン)

特集ページ一覧

Silverlight 3で強化されたグラフィックとメディア機能

Silverlight 3徹底入門(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

イージング関数によるアニメーション

 Silverlightのアニメーションでは、タイムラインの初めと終わりにSilverlightのオブジェクトがどこにあるかを指定すれば、後はSilverlightのアニメーションが途中の動作を補完してアニメーションをさせることができました。

 アニメーションの再生では、ボールが机から落ちるような動きを作った場合は、開始直後は激しくバウンドし、だんだんと緩やかなバウンドになっていくといった変化(イージング)をつけることでアニメーションの動きを自然に見せることができます。

 Silverlight 2までは、アニメーションの開始と終了の動作をKeySpline(図4)で設定して、アニメーションが最初は遅く動き、終わりにつれて速く動くといった設定を行う必要がありました。ExpressionBlendでKeyFrameのプロパティを表示すると、図4のようにKeySplineの設定ウインドウが表示され、どのようにFrame間のアニメーションを補完させるかを指定できます。

 図4はExpressionBlendで「始めちょろちょろ中ぱっぱ」の動作をKeySplineに設定し、表現した例です。

図4:イージングの指定
図4:イージングの指定

 Silverlight 3では、このKeySplineの動作をイージング関数としてあらかじめ定義し、プログラムやExpressionBlendから利用できるようになっています。

図5:イージング関数の指定
図5:イージング関数の指定

 せっかくなので、第3回で取り上げたビヘイビアーを利用して先ほどのアニメーションを再生してみましょう(図6)。

図6:アニメーションの実行
図6:アニメーションの実行

 ここでは、ストーリーボードを再生するためのControlStorybordActionビヘイビアーを、画面上に配置したストーリーボードを再生するためのボタンに設定し、再生するストーリーボードを設定しています。

 図7は実際の実行結果です。キャプチャーだとわからないと思いますが、実行するとKeySplineでの指定もイージング関数での指定も同じようにアニメーションが行われることを確認できると思います。

図7:イージング関数によるアニメーションの実行結果
図7:イージング関数によるアニメーションの実行結果

エフェクトとピクセルシェーダー

 Silverlight 3ではレンダリングされたXAML要素に対してボタンの下に影を付けたり、ぼかしをいれたりといったエフェクト効果を、XAMLで定義したりプログラミングによって指定できるようになりました。

あらかじめ組み込まれているピクセルシェーダー効果

 画像やSilverlightの要素に対しぼかしといったピクセルシェーダー効果を適用するには、各要素のEffectプロパティにエフェクトをかけたいピクセルシェーダーを設定します。[リスト3]は、Silverlightにあらかじめ組み込まれている要素の下に影を付けるドロップシャドウ(DropShadowEffect)と、要素にぼかしを入れるブラー(BlurEffect)をボタンに適用した例です。

[リスト3]ドロップシャドウとぼかしの適用(Effect.xaml)
<StackPanel>
    <Button Content="ボタンに影" Width="200" Margin="10">
        <Button.Effect>
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="25" 
                              BlurRadius="5" Opacity="0.5" />
        </Button.Effect>
    </Button>
    <Button Content="ボタンにぼかし" Width="200" Margin="10">
        <Button.Effect>
            <BlurEffect Radius="2" />
        </Button.Effect>
    </Button>
</StackPanel>

 DropShadowEffectは指定した要素の下に影を付けるエフェクトです。この例では、ボタンの右下(Direction="320")の少し離れた位置(ShadowDepth="25")に大きめ(BlurRadius="5")の黒い透明な影(Color="Black" Opacity="0.5")を描画しています。

 BlurEffectは指定した要素に焦点をずらしたぼかしを入れるエフェクトです。この例では小さめのぼかし(Radius="2")でボタンの表示をぼかしています。図8は[リスト3]の実行結果です。

図8:[リスト3]の実行結果
図8:[リスト3]の実行結果

複数の効果を適用する

 エフェクトは1つのオブジェクトに対し1つのみ適用することが可能です。もし複数のエフェクトを適用したい場合、[リスト4]のようにコンテナに対しエフェクトを適用し、そのコントロールを入れ子にします。

[リスト4]ドロップシャドウとぼかしの適用(Effect.xaml)
<Grid>
    <Grid.Effect>
        <BlurEffect Radius="10" />
    </Grid.Effect>
    <Button Content="入れ子になったエフェクト" Width="200" Height="30" Margin="10">
        <Button.Effect>
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="25" 
     BlurRadius="5" Opacity="0.5" />
        </Button.Effect>
    </Button>
</Grid>

 実行すると図9のように、ドロップシャドウとぼかしの2つの効果が適用されていることを確認できます。ただし、MSDNにも注意書きがあるように複数の効果を入れ子にした場合パフォーマンスに問題が発生する可能性があるので注意が必要です。

図9:[リスト4]の実行結果
図9:[リスト4]の実行結果

カスタムエフェクト

 現在のところ、標準で用意されているエフェクトは上記の2つのエフェクトのみです。

 Silverlightでカスタムエフェクトを作成する場合は、System.Windows.Media.Effects.ShaderEffectクラスを継承し、Direct3Dのシェーダー記述言語であるHLSLでコンパイルしたバイナリのUriをPixelShaderクラスのUriSourceプロパティに設定することで作成できます。詳しくはMSDNのピクセルシェーダー効果のカスタムシェーダー効果の作成を参照ください。

 あいにく筆者はDirect3DやHLSLについてあまり理解がないため、カスタムエフェクトの詳細については触れませんが、CodePlexで公開されているWPFとSilverlightの両方で利用できるWindows Presentation Foundation Pixel Shader Effects Libraryというカスタムエフェクトを利用すると、次の動画のようなエフェクトがSilverlightで利用できます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5