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

Silverlight 3徹底入門（6）

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

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

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

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

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

図4：イージングの指定

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

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

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

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

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

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

図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］の実行結果

複数の効果を適用する

　エフェクトは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］の実行結果

カスタムエフェクト

　現在のところ、標準で用意されているエフェクトは上記の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で利用できます。

• Video demonstrating the effects