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

2014年6月20日(金)
薬師寺 国安

プログラムコードの追加

まず、新たに名前空間を追加します(リスト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 選択した画像がアニメーションを伴って表示されている
図12 選択した画像がアニメーションを伴って表示されている

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

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

  • 選択した画像がアニメーションを伴って表示されるプログラム

    『Windows ストア アプリ 100行プログラミング』 第8回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています