PR

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

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

プログラムコード

まず最初にクラスを作成します(リスト3)。

XAMLの中でImageのSourceプロパティにバインディングで指定した「画像名」を定義している

リスト3 ImageInfoクラスの定義

Public Class ImageInfo
    Public Property 画像名 As String
End Class
Public NotInheritable Class MainPage
    Inherits Page

次に、第1回記事で解説した方法でリスト4のコードを生成します。ページがアクティブになった時のコードです。

XElement.Loadメソッドでwinter.xmlを読み込む。ImageInfoクラス型の新しいリストであるmyImageInfoオブジェクトを作成する。Descendantsメソッドで全ての子孫要素画像名の値を、変数resultに格納しながら、反復処理を繰り返す。新しいImageInfoクラスの「画像名」プロパティに、ソリューションエクスプローラー内のImagesフォルダーを指定する「ms-appx:///Images/」文字列と、画像名要素の値を指定する。Addメソッドで、プロパティの指定されたImageInfoクラスのインスタンスをmyImageInfoオブジェクトに追加していく。GridViewのItemsSourceプロパティにmyImageInfoオブジェクトを指定する。GridViewに収まり切れなかった画像は折り返して表示される。これはGridView1のItemsPanelに、WrapPanelを使用したItemsPanelTemplateを適用しているからだ。

リスト4 ページがアクティブになった時の処理

    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
End Class

このコードが実行されると図3のように表示されます。

図3 画像がGridViewに表示された
図3 画像がGridViewに表示された

画像が無事表示されました。しかし、今回はこれで終わりではありません。これからこの任意の画像をタップすると、該当する画像が回転しながら大きくなって表示され、小さくなって消えていくアニメーションを作成します。

アニメーションの作成

ソリューションエクスプローラーからMainPage.xamlを選択して、マウスの右クリックで表示されるメニューから「Blendで開く」を選択します(図4)。

図4 「Blendで開く」を選択する
図4 「Blendで開く」を選択する

Blendの画面が表示されます。では、この画面からストーリーボードを作成していきましょう。

ストーリーボードの作成

「オブジェクトとタイムライン」から「新規作成」アイコンを選択します(図5)

図5 「新規作成」アイコンをタップする
図5 「新規作成」アイコンをタップする

「ストーリーボードリソースの作成」画面が表示されます。「名前(キー)」はデフォルトの「Storyboard1」のままにして、[OK]ボタンをタップします(図6)。

図6 「ストーリーボードリソースの作成」画面が表示される。[OK]ボタンをタップする
図6 「ストーリーボードリソースの作成」画面が表示される。[OK]ボタンをタップする

アートボード全体が赤い枠線で囲まれ、「●Storyboard1 タイムライン 記録オン」と表示されます。この状態でストーリーボードを作成していきます(図7)。

図7 「●Storyboard1 タイムライン 記録オン」と表示される
図7 「●Storyboard1 タイムライン 記録オン」と表示される

ストーリーボードの作成

まず、「オブジェクトとタイムライン」の中からImage1を選択します。黄色の再生ヘッドを0の位置にして、プロパティからVisibilityにVisibleを選択します。すると再生ヘッドが0の位置でImage1の再生ヘッドに楕円のマークが追加されます(図8)。

図8 Image1の再生ヘッドに楕円のアイコンが表示された
図8 Image1の再生ヘッドに楕円のアイコンが表示された

次にImage1を選択したまま、黄色の再生ヘッドを1の位置に移動します。プロパティから[レイアウト]ペイン内のWidthに640、Heightに480と指定し、次にプロパティの[変換]ペインにある「回転」の「角度」に720を指定します(図9)。

図9 Image1のWidthとHeightを指定し、角度に720を指定した
図9 Image1のWidthとHeightを指定し、角度に720を指定した

次に、Image1を選択した状態で黄色の再生ヘッドを2の位置まで移動します。この1秒の間はプロパティのVisibilityの値をVisibleに変更するだけで他は何もしません。そこで「キーフレームの記録」アイコンをタップして、黄色の再生ヘッド上に楕円のマークを追加します(図10)。

図10 黄色の再生ヘッドが2の位置でVisibilityの値をVisibleに変更するだけで他は何もしないで、「キーフレームの記録」アイコンをタップする
図10 黄色の再生ヘッドが2の位置でVisibilityの値をVisibleに変更するだけで他は何もしないで、「キーフレームの記録」アイコンをタップする

次にImage1を選択したまま黄色の再生ヘッドを3の位置に移動します。プロパティから[共通]ペインのWidthに80、Heightに60と指定し、[外観]ペインの「Visibility」に「Collapsed」を指定します(図11)。

図11 Image1のWidthに80、Heightに60を指定し、VisibilityにCollapsedを指定して非表示にする
図11 Image1のWidthに80、Heightに60を指定し、VisibilityにCollapsedを指定して非表示にする

黄色の再生バーをマウスでつまんで0~3の間に移動させてみてください。画像は表示されていませんが、枠がアニメーションを伴って動作すれば成功です。動作が確認できたら、「●Storyboard1 タイムライン 記録オン」の赤い●をタップして、記録オフにします。これでストーリーボードの設定は完了です。Blendを終了してVS2013に戻ります。保存の確認画面が出たら[保存]を選択しましょう。MainPage.xamlを表示すると、「ファイルがソースエディタ以外で表示されました。再度読み込みますか?」のメッセージが出るので、[はい]を選択します。

MainPage.xamlにストーリーボードのコードが追加されますが、ここでは掲載しないので、サンプルファイルをダウンロードして確認してください。

では、次に、いま設定したストーリーボードをVBプログラムから操作できるようにコードを追加します。

Think IT会員限定特典
  • 選択した画像がアニメーションを伴って表示されるプログラム

    『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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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

ストーリーボードでアニメーションを実装する | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。