XAML デザイナーでのオブジェクトのアニメーション化Animate objects in XAML Designer

オブジェクトを動かす短いアニメーションを作成したり、フェードインとフェードアウトを行うことができます。You can create short animations that move objects, or fade them in and out.

最初に、 ストーリー ボードを作成します。To get started, create a storyboard. ストーリー ボードには、1 つ以上の タイムラインがあります。A storyboard contains one or more timelines. タイムライン上で キーフレーム を設定してプロパティの変更をマークします。Set keyframes on a timeline to mark property changes. 次に、アニメーションの実行時に、Blend は、指定した期間全体でプロパティの変更を補間します。Then, when you run the animation, Blend interpolates the property changes over the designated period of time. 結果として、移行がスムーズになります。The result is a smooth transition. オブジェクトに属する任意のプロパティをアニメーション化できます。非視覚プロパティでも同様です。You can animate any property that belongs to an object, even nonvisual properties.

次の図は、「 MoveUp」という名前のストーリーボードを示しています。The following illustration shows a storyboard named MoveUp. タイムラインには、四角形の X と Y 位置をマークするキーフレームが含まれています。The timeline contains keyframes that mark the X and Y position of a rectangle. このアニメーションを実行すると、四角形はある位置から別の位置にスムーズに移動します。When this animation runs, the rectangle moves from one position to another smoothly.

次のビデオを見ると、アニメーションの作成について確認できます。Learn to create animations by watching these videos.

短いビデオを見る:Watch a short video: 次の方法を確認する:Learn how to:
インストールされている機能を構成する タイムラインを作成するConfigure Installed Features Create timelines タイムラインを作成し、タイムライン内のオブジェクトを使用します。Create a timeline, and work with objects in the timeline.
インストールされている機能を構成する キーフレームを追加し、アニメーション繰り返すConfigure Installed Features Add keyframes and repeat the animation キーフレームを追加し、各キーフレームでプロパティを設定します。Add keyframes and set properties at each keyframe. 次に、アニメーションを実行し、オブジェクトがスムーズに遷移していることを確認します。Then, run the animation and watch objects smoothly transition between them.
インストールされている機能を構成する 対話機能にイベント トリガーを追加するConfigure Installed Features Add event triggers for interactivity イベントの発生時にアニメーションを開始します。Start an animation when an event occurs. たとえば、ウィンドウの読み込み時にアニメーションを開始します。For example, start one when the window loads.
インストールされている機能を構成する 色をアニメーション化するConfigure Installed Features Animate colors アニメーションを使用して、オブジェクトの色を変更します。Use an animation to change the color of an object.
インストールされている機能を構成する モーション パスを作成および変更するConfigure Installed Features Create and modify motion paths パスに沿ってオブジェクトをアニメーション化します。Animate objects along a path.
インストールされている機能を構成する キーフレームを簡略化するConfigure Installed Features Ease keyframes アニメーションの動きを、開始近く(イージング イン)または終了近く(イージング アウト)で加速または減速します。Speed up or slow down an animation near the beginning (easing in) or near the end (easing out) of an animation.
インストールされている機能を構成する ボタンをアニメーション化するConfigure Installed Features Animate the button ユーザーがボタンをマウスでポイントすると表示される面白い効果を作成します。Create interesting effects that appear on a button when the user points to it.
インストールされている機能を構成する アニメーションを作成し、イージングを使用するConfigure Installed Features Create animation and work with easing ユーザーが電卓のイメージ上のボタンを押した時に表示される効果をアニメーション化します。Animate effects that appear when a user presses down a button on the image of a calculator.

関連項目See Also

Blend for Visual Studio を使用して UI を作成するCreating a UI by using Blend for Visual Studio