Blend を使ったアニメーション構築


Introduction

Blend を使って必要な画像を生成したり、アニメーションを作成してアプリケーションのUIを作ることができます。また作成したアプリケーションをプログラムから起動したり、パラメーターを変えてアニメーションの動作を変化させることもできます。

Building the Sample

本手順を試すには、Visual Studio 2013 Update 3 以降が必要です

Description

■準備

  1. Visual Studio を起動します。
  2. Visual Studio のメニューの [ファイル]を選択し、[新規作成]、[プロジェクト] の順に選択します。
    1. [新しいプロジェクト] ダイアログが表示されたら、左ペインの [Visual C#] とその下の [Windows ストアアプリ]さらにその下の[Windowsアプリ] を選択し、中央ペインの [空のアプリケーション(Windows)]を選び、[OK] ボタンをクリックします。
  3. アプリケーションのひな形が生成されたら、ソリューション エクスプローラー上の [ MainPage.xaml ] をダブルクリックし、画面を表示します。
  4. ソリューション エクスプローラー上のプロジェクト(太字で Appxx(Windows 8.1)の表示)を右クリックし、コンテキストメニューの下から2番目にある「Blendで開く」を選択し、作成したプロジェクトをBlendで開きます。

■図形の結合

  1. 左端の「ツール」バーから「四角形」を選択し、画面上で左上から右下にドラッグして四角形を作成します。
    image
  2. もう一度「四角形」を選択し、作成した四角形の上に、小さい四角形を作成します。
    image
  3. 「Shift」キーを押しながら初めの四角形を選択します。(2つの四角形が選択されている状態)
    image
  4. 「オブジェクト」メニューの「結合」から「減算」をえらび、初めの四角から小さい四角で切抜いた図形を作ります。

    image

  5. ブラシパネルのFillを選択し、パレットから黒を選びます。またRGBAのAを80%に変更します。塗りつぶしの透明度を設定できます。

    image

 

■アニメーションの作成

  1. 「オブジェクトとタイムライン」パネルの「新規作成ボタン」(+)をおしてアニメーション(ストーリーボード)を作成します。
    image
  2. ダイアログが表示されたら、OKを押します。
    image
  3. タイムラインの黄色い線を1秒のところまで進めます。
    image
  4. 作成した四角を右上に移動します。
  5. タイムラインの「先頭に移動ボタン」(|◀)をおしてタイムラインを戻し、「再生ボタン」(▶)を押してアニメーションを確認します。
  6. オブジェクトとタイムラインから、「ストーリーボードを閉じるボタン」(×)を押して、ストーリーボードエディタを終了させます。
  7. 「ファイル」メニューから「すべて保存」を選択して、保存します。

■アニメーション項目の命名

  1. Visual Studio に戻ります。
  2. ファイルの変更についてのダイアログが表示されたら、「すべてに適用」を選んで、Blend での修正を読み込みます。
  3. XAMLのコードのStoryboard直後のDoubleAnimationを選択します。
    image
  4. DoubleAnimation の名前を、プロパティ欄の名前に記述して、コードから再利用しやすくします。
    image

■アプリを作る

  1. Visual Studio を起動します。
  2. Visual Studio のメニューの [ファイル]を選択し、[新規作成]、[プロジェクト] の順に選択します。
  3. [新しいプロジェクト] ダイアログが表示されたら、左ペインの [Visual C#] とその下の [Windows ストアアプリ]さらにその下の[Windowsアプリ] を選択し、中央ペインの [空のアプリケーション(Windows)]を選び、[OK] ボタンをクリックします。
  4. アプリケーションのひな形が生成されたら、ソリューション エクスプローラー上の [ MainPage.xaml ] をダブルクリックし、画面を表示します。

①画面の作成

  1. 画像ファイルをダウンロードします。
  2. 「プロジェクト」メニューから「既存項目の追加」でダウンロードしたダウンロードしたファイルを追加します。
  3. Image コントロールをダブルクリックして画面に配置します。
  4. Image コントロールのプロパティを設定します。
    • 共通:Source :icons.png
    • 共通:Stretch:UniformToFill
    • レイアウト:Width:1366
    • レイアウト:Height:768
    • レイアウト:HolizontalAlignment:Center(左から2つ目のアイコン)
    • レイアウト:VerticalAlignment:Center(左から2つ目のアイコン)
  5. ドキュメント アウトラインでImage コントロールを右クリックし「グループ(パネル)に含める」から「Grid」を選びます。
    image
  6. 続けて、作成された Grid  を右クリックし「グループ(パネル)に含める」から「Viewbox」を選びます。
    image
  7. ソリューション エクスプローラー上のプロジェクト(太字で Appxx(Windows 8.1)の表示)を右クリックし、コンテキストメニューの下から2番目にある「Blendで開く」を選択し、作成したプロジェクトをBlendで開きます。(ファイルの保存ダイアログが出たときは保存しておきます)
  8. オブジェクトとタイムラインを開き[Grid][Viewbox][Grid]と展開してViewbox直下のGridを選択します。
  9. 四角形をダブルクリックして追加します。
    image
  10. 四角形のプロパティを設定します。
    • ブラシ:Fill :#CC000000
    • 共通:Stretch:UniformToFill
    • レイアウト:Width:2732
    • レイアウト:Height:1536
  11. さらに四角形をダブルクリックして追加し、プロパティを設定します。
    • レイアウト:Width:115
    • レイアウト:Height:112
    • レイアウト:Margin左:1265
    • レイアウト:Margin上:672
  12. Shift キーを押しながら最初に追加した四角形をクリックします。
  13. 「オブジェクト」メニューの「結合」から「減算」をえらび、初めの四角から小さい四角で切抜いた図形を作ります。
  14. 作成されたPathオブジェクトのプロパティを設定します。
    • レイアウト:Margin左:-697
    • レイアウト:Margin上:-334
  15. ツールボックスから「アセット」(>>)を選択し、表示されたパネルで Hyper と入力してHyperLinkButton を表示させたらクリックする。
    image
  16. ツールボックスのアセットの下に追加されたHyperLinkButton をダブルクリックして追加する。
  17. HyperLinkButton のプロパティを設定します。
    • レイアウト:HolizontalAlignment:Center(左から2つ目のアイコン)
    • レイアウト:VerticalAlignment:Bottom(左から3つ目のアイコン)
    • テキスト:フォントサイズ:48pt
    • 共通:Content:https://aka.ms/cr_monitor
    • 共通:NavigateUrl:https://aka.ms/cr_monitor
    • 外観:Opacity:0 %
  18. ここまでで作成された画面表示用のコード

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox>
            <Grid Height="768" Width="1366">
                <Image HorizontalAlignment="Center" Height="768" VerticalAlignment="Center" Width="1366" Source="icons.png" Stretch="UniformToFill"/>
                <Path Data="M1265.5,672.5 L1265.5,783.5 L1379.5,783.5 L1379.5,672.5 z M0.5,0.5 L2731.5,0.5 L2731.5,1535.5 L0.5,1535.5 z" Fill="#CC000000" HorizontalAlignment="Left" Height="1536" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="2732" Margin="-697,-334,-668.047,-433.988"/>
                <HyperlinkButton Content="https://aka.ms/cr_monitor" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="64" NavigateUri="https://aka.ms/cr_monitor" Opacity="0"/>
            </Grid>
        </Viewbox>
    </Grid>

  19.  

②アニメーションの作成1

  1. 「オブジェクトとタイムライン」パネルの「新規作成ボタン」(+)をおしてアニメーション(ストーリーボード)を作成します。    
  2. ダイアログが表示されたら「move」と名前を付けてOKを押します。
    image
  3. 「オブジェクトとタイムライン」パネルのPathオブジェクトを選択します。
    image
  4. タイムラインの黄色い線を0.1秒(小さい1メモリ)のところまで進めます。
    image
  5. マスク用のPathオブジェクトを右下にアイコン1つ分だけ動かします。
    image
  6. タイムラインの「先頭に移動ボタン」(|◀)をおしてタイムラインを戻し、「再生ボタン」(▶)を押してアニメーションを確認します。

③アニメーションの作成2

  1. 「オブジェクトとタイムライン」パネルの「新規作成ボタン」(+)をおしてアニメーション(ストーリーボード)を作成します。    
  2. ダイアログが表示されたら「ShowLink」と名前を付けてOKを押します。
  3. タイムラインの黄色い線を1秒(1の数字)のところまで進めます。
  4. HyperLinkButton を選択して、プロパティの「外観」の「Opacity」を100%にします。
  5. タイムラインの「先頭に移動ボタン」(|◀)をおしてタイムラインを戻し、「再生ボタン」(▶)を押してアニメーションを確認します。

④プログラムのためのアニメーションの設定

  1. オブジェクトとタイムラインから、「ストーリーボードを閉じるボタン」(×)を押して、ストーリーボードエディタを終了させます。(エディット画面を囲んでいた赤い枠が消えます。 )
  2. 「ファイル」メニューから「すべて保存」を選択して、保存します
  3. Visual Studio に戻ります。 ファイルの変更についてのダイアログが表示されたら、「すべてに適用」を選んで、Blend での修正を読み込みます。
    image
  4. ソースコードの DoubleAnimation の上(対象がTransformXの方)をクリックして選択します。
    image
  5. プロパティ欄で「moveX」と名前を付けます。
    image
  6. 同様に下段のDoubleAnimation も選択し、プロパティ欄でmoveYと名前を付けます。
  7. 「ファイル」メニューから「すべて保存」を選択して、保存します
  8. ここまでで出来上がったコード

    <Page.Resources>
        <Storyboard x:Name="move">
            <DoubleAnimation x:Name="moveX" Duration="0:0:0.1" To="117.91" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="path" d:IsOptimized="True"/>
            <DoubleAnimation x:Name="moveY" Duration="0:0:0.1" To="116.418" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="ShowLink">
            <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="hyperlinkButton" d:IsOptimized="True"/>
        </Storyboard>
    </Page.Resources>

  9. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox>
            <Grid Height="768" Width="1366">
                <Image HorizontalAlignment="Center" Height="768" VerticalAlignment="Center" Width="1366" Source="icons.png" Stretch="UniformToFill"/>
                <Path x:Name="path" Data="M1265.5,672.5 L1265.5,783.5 L1379.5,783.5 L1379.5,672.5 z M0.5,0.5 L2731.5,0.5 L2731.5,1535.5 L0.5,1535.5 z" Fill="#CC000000" HorizontalAlignment="Left" Height="1536" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="2732" Margin="-697,-334,-668.047,-433.988" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <CompositeTransform/>
                    </Path.RenderTransform>
                </Path>
                <HyperlinkButton Content="https://aka.ms/cr_monitor" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="64" NavigateUri="https://aka.ms/cr_monitor" Opacity="0"/>
            </Grid>
        </Viewbox>
    </Grid>

    コードの実装

  1. 「表示」メニューから「コード」を選択してC#のコードを表示します。
  2. アニメーションをコントロールするコードを記述するため Using 句を追加します。
    using Windows.UI.Xaml.Media.Animation;
  3. 移動管理のためのフラグ用の変数と、乱数を始めるためのインスタンスを定義します。
    public sealed partial class MainPage : Page
    {
        Boolean bMove = true;
        Random rnd = new Random();
  4. 乱数で表示を移動させるアニメーションを設定し動作させるためのコードを実装します。
  5. private void movehole()
    {
        switch (rnd.Next(4))
        {
            case 1:
                if (moveX.To < 600) moveX.To += 115;
                break;
            case 2:
                if (moveX.To > -500) moveX.To -= 115;
                break;
            case 3:
                if (moveY.To < 300) moveY.To += 112;
                break;
            default:
                if (moveY.To > -300) moveY.To -= 112;
                break;
        }

        move.Begin();
    }

  6. Load イベントハンドラを実装し、定義した movehole を起動するように実装します。this.Loaded += まで打ったら[Tab]キーを2回押すと自動的に関数が作られます。作成された関数内の throw new NotImplementedException(); を削除して movehole(); を実装します。
  7. public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        throw new NotImplementedException();
        movehole();
    }

  8. 移動アニメーションが終わったら、続けて移動アニメーションを実行するコードを実装します。こちらも move.Completed += まで打ったら[Tab]キーを2回押すと自動的に関数が作られますので、関数内の throw new NotImplementedException(); を削除して 下記コードをを実装します。

    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
        move.Completed += move_Completed;
    }

  9. void move_Completed(object sender, object e)
    {
        throw new NotImplementedException();
        if (bMove) movehole();
    }

  10. タップされた時のコードを実装します。こちらも this.Tapped += まで打ったら[Tab]キーを2回押すと自動的に関数が作られますので、関数内の throw new NotImplementedException(); を削除して 下記コードをを実装します。タップされたら、アニメーション継続実行フラグを停止して、所定の場所に移動させます。ばねのような停止アニメーション ElasticEase モードを設定しています。public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
        move.Completed += move_Completed;
        this.Tapped += MainPage_Tapped;
    }

void MainPage_Tapped(object sender, TappedRoutedEventArgs e)
{
    bMove = false;

    moveX.To = -452;
    moveY.To = -214;
    moveX.Duration = new Duration(new TimeSpan(0, 0, 1));
    moveY.Duration = new Duration(new TimeSpan(0, 0, 1));
    moveX.EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseOut };
    moveY.EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseOut };

    move.Begin();
    ShowLink.Begin();
}

③実行してテストする

  1. 「F5」キーを押して実行します。
  •  

    1.  


    Comments (0)

    Skip to main content