ストーリーボードでアニメーションを実装する

プログラムコードの追加

まず、新たに名前空間を追加します（リスト5）

リスト5　名前空間の追加

Storybordを使用可能にするクラスの含まれるWindows.UI.Xaml.Media.Animation名前空間をインポートする
Imports Windows.UI.Xaml.Media.Animation

次に、メンバー変数を宣言します（リスト6）

リスト6　メンバー変数の宣言

Storyboardクラス型の新しいインスタンスmyStoryBoardオブジェクトを宣言する
Private myStoryBoard As New Storyboard

GridViewの画像が選択された時の処理を記述します（リスト7）

Image1のSourceプロパティにGridViewから選択された項目をImageInfoクラス型にキャストして、その「画像名」プロパティを指定しておく。これで、Image1にはGridViewから選択した画像が表示される。ResourcesでXAML内に記述したStoryboardを指定して、myStorybordオブジェクトで参照して、Beginメソッドでストーリーボードを実行する。すると選択した画像が回転して近づきながら大きくなり、大きくなった時点で一瞬止まり、その後小さくなって消えていく。

リスト7　GridViewの画像が選択された時にアニメーションを実行する処理

Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged
        Image1.Source = New BitmapImage(New Uri(DirectCast(GridView1.SelectedItem, ImageInfo).画像名))
        myStoryBoard = DirectCast(Me.Resources("Storyboard1"), Storyboard)
        myStoryBoard.Begin()
    End Sub

全てのコードをまとめるとリスト8のようになります。

リスト8　全コード

Imports Windows.UI.Xaml.Media.Animation
Public Class ImageInfo
    Public Property 画像名 As String
End Class
Public NotInheritable Class MainPage
    Inherits Page
    Private myStoryBoard As New Storyboard
    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
        Dim xmldoc As XElement = XElement.Load("winter.xml")
        Dim myImageInfo As New List(Of ImageInfo)
        For Each result In From c In xmldoc.Descendants("画像名") Select c
            myImageInfo.Add(New ImageInfo With {.画像名 = "ms-appx:///Images/" & result.Value})
        Next
        GridView1.ItemsSource = myImageInfo
        MyBase.OnNavigatedTo(e)
    End Sub

    Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged
        Image1.Source = New BitmapImage(New Uri(DirectCast(GridView1.SelectedItem, ImageInfo).画像名))
        myStoryBoard = DirectCast(Me.Resources("Storyboard1"), Storyboard)
        myStoryBoard.Begin()
    End Sub
End Class

これでも、わずか23行のコードです。XAMLコードを含めると長くはなりますが、VBコードだけでは23行でこのような処理が実現できます。VS2013は素晴らしい開発環境だと言えるでしょう。

リスト8を実行すると図12のように表示されます。

図12　選択した画像がアニメーションを伴って表示されている

今回はこれで終わりです。Blendと組み合わせるといとも簡単にアニメーションが作れてアプリの表現力も広がります。ひぜ一度Blendを使って試してください。Blendで作成したストーリーボードは、今回のサンプルのように、VS2013からも操作できます。一度やり方さえわかってしまえば、同じ処理を書くだけでいいので簡単です。BlendとVS2013を絡ませたWindows アプリにも挑戦していただきたいです。

次回は、音声認識を使ったアプリの作成方法を紹介します。お楽しみに。