概要: アニメーションGetting started: Animation

アニメーションの追加Adding animations

iOS では、ほとんどの場合、アニメーション効果はプログラムで実現されます。In iOS, you most often create animation effects programmatically. たとえば、このための方法として、ブロック ベースの UIView クラスの animateWithDuration メソッド、または以前の非ブロック ベースのメソッドによって提供されるアニメーションを使うことができます。For example, you might use animations provided by the block-based UIView class's animateWithDuration methods, or the older non-block based methods. または、CALayer クラスを明示的に使ってレイヤーをアニメーション化することもできます。Or, you might explicitly use the CALayer class to animate layers. Windows アプリでのアニメーションもプログラムで作成できますが、Extensible Application Markup Language (XAML) を使った宣言で定義することもできます。Animations in Windows apps can be created programmatically, but they can also be defined declaratively with Extensible Application Markup Language (XAML). Microsoft Visual Studio を使用して XAML コードを直接編集できますが、Visual Studio にはユーザーがデザイナーでアニメーションを扱っているときに XAML コードを自動的に作成する、Blend というツールも付属しています。You can use Microsoft Visual Studio to edit XAML code directly, but Visual Studio also comes with a tool called Blend, which creates XAML code for you as you work with animations in a designer. 実際、Blend では、グラフィック表示で、完全な Visual Studio プロジェクトを開いて、設計、ビルド、実行できます。In fact, Blend allows you to open, design, build, and run complete Visual Studio projects, graphically. 以下のチュートリアルを実行して、実際に試してみてください。The following walkthrough lets you try this out.

新しいユニバーサル Windows プラットフォーム (UWP) アプリを作成し、"SimpleAnimation" のような名前を付けてください。Create a new Universal Windows Platform (UWP) app and name it something like "SimpleAnimation". このプロジェクトでは、四角形を移動し、フェード効果を適用した後でもう一度表示します。In this project, we're going to move a rectangle, apply a fade effect, and then bring it back into view. XAML のアニメーションは、ストーリーボードの概念に基づいています (iOS のストーリーボードではありません)。Animations in XAML are based on the concept of storyboards (not to be confused with iOS storyboards). ストーリーボードでは、キーフレームを使って、プロパティの変更をアニメーション化します。Storyboards use keyframes to animate property changes.

次の図に示すように、プロジェクトを開いた状態で、ソリューション エクスプローラーで、プロジェクトの名前を右クリックし、 [Blend で開く] または [Blend でデザイン] を選択します。With your project open, in Solution Explorer, right-click the project's name and then select Open in Blend or Design in Blend, as shown in the following figure. Visual Studio は、バックグラウンドで実行を続けます。Visual Studio continues to run in the background.

[Blend で開く] メニュー コマンド

Blend が起動されると、次の図のような画面が表示されます。After Blend starts, you should see something similar to the following figure.

Blend の開発環境

ソリューション エクスプローラーで画面左側にある [MainPage.xaml] をダブルクリックします。Double-click on MainPage.xaml in the Solution Explorer on the left hand side. 次に、中央のデザイン ビューの端にあるツールの垂直方向のストリップから四角形ツールを選択し、次の図に示すように、デザイン ビューで四角形を描画します。Next, from the vertical strip of tools on the edge of the central Design View, select the Rectangle tool, and then draw a rectangle in Design View, as shown in the following figure.

デザイン ビューへの四角形の追加

四角形を緑色で塗るために、 [プロパティ] ウィンドウの [ブラシ] 領域で、 [単色ブラシ] ボタンをクリックします。次に、 [色スポイト] アイコンをクリックします。To make the rectangle green, look in the Properties window, and in the Brush area, click on the Solid color brush button, and then click the Color eyedropper icon. 色合いが緑色の任意の部分をクリックします。Click somewhere in the green band of hues.

四角形のアニメーション化を開始するために、次の図に示すように、 [オブジェクトとタイムライン] ウィンドウで、プラス記号 ( [新規作成] ) ボタンをタップし、 [OK] をタップします。To begin animating the rectangle, in the Objects and Timeline window, tap the plus symbol (New) button as shown in the following figure, and then tap OK.

ストーリーボードの追加

[オブジェクトとタイムライン] ウィンドウにストーリーボードが表示されます (正しく表示するにはビューのサイズの変更が必要である可能性があります)。A storyboard appears in the Objects and Timeline window (you may need to resize the view to see it properly). デザイン ビューが変化して、Storyboard1 タイムラインの記録がオンであることが示されます。The Design View display changes to show that Storyboard1 timeline recording is on. 四角形の現在の状態をキャプチャするために、次の図に示すように、 [オブジェクトとタイムライン] ウィンドウで、黄色い矢印の上の [キーフレームの記録] ボタンをタップします。To capture the current state of the rectangle, in the Objects and Timeline window, tap the Record Keyframe button just above the yellow arrow, as shown in the following figure.

キーフレームの記録

次に、四角形を移動させながら徐々に非表示にします。Now, let's move the rectangle and fade it away. そのためには、オレンジ色/黄色の矢印を 2 秒の位置にドラッグし、緑色の四角形を右方向へ少し移動します。To do this, drag the orange/yellow arrow to the 2-second position, and then move your green rectangle slightly to the right. 次に、次の図に示すように、 [プロパティ] ウィンドウの [外観] 領域で、 [Opacity] (不透明度) プロパティを 0 に変更します。Then, in the Properties window, in the Appearance area, change the Opacity property to 0, as shown in the following figure. アニメーションをプレビューするために、ストーリーボード パネルの [再生] ボタンをタップします。To preview the animation, tap the Play button in the Storyboard panel.

[プロパティ] ウィンドウと [再生] ボタン

次に、四角形をもう一度表示します。Next, let's bring the rectangle back into view. [オブジェクトとタイムライン] ウィンドウで、 [Storyboard1] をダブルクリックします。In the Objects and Timeline window, double-click Storyboard1. 次に、次の図に示すように、 [プロパティ] ウィンドウの [共通] 領域で、 [AutoReverse] を選択します。Then, in the Properties window, in the Common area, select AutoReverse, as shown in the following figure.

ストーリーボードの選択

最後に、 [再生] ボタンをクリックして、動作を確かめます。Finally, click on the Play button to see what happens.

プロジェクトをビルドして実行するには、ウィンドウの上部にある緑色の [実行] ボタンをクリックします (または、単に F5 キーを押します)。You can build and run the project by clicking on the green run button at the top of the window (or just press F5). これを行った場合、プロジェクトのビルドと実行が実際に表示されますが、緑色の四角形はそのまま残ります。If you do this, you'll see your project will indeed build and run, but the green rectangle will stubbornly sit perfectly still, like a toddler denied candy in a supermarket aisle. アニメーションを開始するには、プロジェクトにコードを追加する必要があります。To start the animation, you'll need to add a line of code to the project. 以下にその方法を示します。Here's how.

[ファイル] メニューを開き、 [MainPage.xaml の保存] を選択して、プロジェクトを保存します。Save the project, by opening the File menu, and selecting Save MainPage.xaml. Visual Studio に戻ります。Return to Visual Studio. 変更されたファイルを読み込み直すかどうかをたずねる Visual Studio のダイアログ ボックスが表示された場合は、 [はい] を選択します。If Visual Studio displays a dialog box asking whether you want to reload the modified file, select Yes. MainPage.xaml の下に隠れている MainPage.xaml.cs ファイルをダブルクリックして開き、次のコードを public MainPage() メソッドのすぐ上に追加します。Double-click the MainPage.xaml.cs file, which is hidden under MainPage.xaml, to open it, and add the following code just above the public MainPage() method:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

もう一度プロジェクトを実行して、四角形がアニメーション化されることを確かめます。Run the project again, and watch the rectangle animate. 問題ないことを確認しました。Hurrah!

MainPage.xaml ファイルを XAML ビューで開くと、デザイナーで作業していたときに Blend によって自動的に追加された XAML コードを確認できます。If you open the MainPage.xaml file, in XAML view, you'll see the XAML code that Blend added for you as you worked in the designer. 特に、<Storyboard> 要素と <Rectangle> 要素のコードに注目してください。In particular, look at the code in the <Storyboard> and <Rectangle> elements. 次のコードに例を示します The following code shows an example. (省略記号は、わかりやすくするために無関係のコードを省略したことを示します。さらに、見やすくするために、改行が追加されています)。Ellipses indicate unrelated code omitted for brevity, and line breaks have been added for code readability.)

...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

この XAML を手動で編集するか、または Blend に戻って操作を続行することができます。You can edit this XAML manually, or return to Blend to continue working on it there. Blend を使うと興味を引くユーザー インターフェイスを作成することが楽しくなり、グラフィカル ツールを使用してそれらをアニメーション化する機能によって開発時間を大幅に高速化することができます。Blend makes it fun to create interesting user interfaces, and the ability to animate them using a graphical tool can dramatically speed up development time. アニメーションについて詳しくは、「アニメーションの概要」をご覧ください。For more info about animations, see Animations overview.

  のアニメーションについてJavaScript と HTML を使った UWP アプリを参照してくださいUI (HTML) をアニメーション化します。Note  For info about animations for UWP apps using JavaScript and HTML, see Animating your UI (HTML).

次の手順Next step

はじめに。次のステップGetting started: What next?