次の方法で共有

基本的なアニメーション

  • [アーティクル]

.NET マルチプラットフォーム アプリ UI (.NET MAUI) アニメーション クラスは、さまざまなビジュアル要素のプロパティを対象とします。一般的な基本的なアニメーションでは、一定期間にわたってプロパティをある値から別の値に徐々に変更します。

基本アニメーションは、VisualElement オブジェクトで動作する ViewExtensions クラスによって提供される拡張メソッドを使用して作成できます。

既定では、各アニメーションには 250 ミリ秒かかります。 ただし、アニメーションを作成するときに、各アニメーションの継続時間を指定できます。

手記

ViewExtensions クラスには、LayoutTo 拡張メソッドも用意されています。 ただし、このメソッドは、サイズと位置の変更を含むレイアウト状態間の遷移をアニメーション化するためにレイアウトで使用することを目的としています。

ViewExtensions クラスのアニメーション拡張メソッドはすべて非同期であり、Task<bool> オブジェクトを返します。 戻り値は、アニメーションが完了した場合は false され、アニメーションが取り消された場合は true されます。 したがって、アニメーション操作を await 演算子と組み合わせると、前のメソッドが完了した後に実行される後続のアニメーション メソッドを使用して、順次アニメーションを作成できるようになります。 詳細については、「複合アニメーションを参照してください。

アニメーションをバックグラウンドで完了させる必要がある場合は、await 演算子を省略できます。 このシナリオでは、アニメーション拡張メソッドは、アニメーションを開始した後すぐに戻り、アニメーションはバックグラウンドで発生します。 この操作は、複合アニメーションを作成するときに利用できます。 詳細については、「複合アニメーションの」を参照してください。

Android では、アニメーションはシステム アニメーションの設定を考慮します。

  • システムのアニメーションが (アクセシビリティ機能または開発者の機能によって) 無効になっている場合、新しいアニメーションはすぐに終了状態にジャンプします。
  • アニメーションの進行中にデバイスの省電力モードがアクティブになると、アニメーションはすぐに終了状態にジャンプします。
  • アニメーションの進行中にデバイスのアニメーション期間が 0 (無効) に設定されていて、API バージョンが 33 以上の場合、アニメーションはすぐに終了状態にジャンプします。

1 つのアニメーション

ViewExtensions クラスの各拡張メソッドは、一定期間にわたってプロパティをある値から別の値に段階的に変更する 1 つのアニメーション操作を実装します。

回転

回転は、RotateTo メソッドを使用して実行され、要素の Rotation プロパティが徐々に変更されます。

await image.RotateTo(360, 2000);
image.Rotation = 0;

この例では、Image インスタンスは 2 秒 (2000 ミリ秒) で最大 360 度回転します。 RotateTo メソッドは、アニメーションの開始の要素の現在の Rotation プロパティ値を取得し、その値から最初の引数 (360) に回転します。 アニメーションが完了すると、イメージの Rotation プロパティは 0 にリセットされます。 これにより、アニメーションが終了した後も Rotation プロパティが 360 に留まらないことが保証されます。これにより、追加の回転ができなくなります。

手記

RotateTo メソッドに加えて、RotationX プロパティと RotationY プロパティをそれぞれアニメーション化する RotateXTo メソッドと RotateYTo メソッドもあります。

相対回転

相対回転は、要素の Rotation プロパティを段階的に変更する RelRotateTo メソッドを使用して実行されます。

await image.RelRotateTo(360, 2000);

この例では、Image インスタンスは、開始位置から 2 秒 (2000 ミリ秒) で 360 度回転します。 RelRotateTo メソッドは、アニメーションの開始時に要素の現在の Rotation プロパティ値を取得し、その値から最初の引数 (360) を加えた値に回転します。 これにより、各アニメーションは常に開始位置から 360 度回転します。 そのため、アニメーションが既に進行中に新しいアニメーションが呼び出されると、現在の位置から開始され、360 度単位ではない位置で終了する可能性があります。

スケーリング

スケーリングは、ScaleTo メソッドを使用して実行され、要素の Scale プロパティが段階的に変更されます。

await image.ScaleTo(2, 2000);

この例では、Image インスタンスのサイズが 2 秒 (2000 ミリ秒) の 2 倍にスケールアップされます。 ScaleTo メソッドは、アニメーションの開始時に要素の現在の Scale プロパティ値を取得し、その値から最初の引数にスケーリングします。 これは、イメージのサイズをそのサイズの 2 倍に拡大する効果があります。

手記

ScaleTo メソッドに加えて、ScaleX プロパティと ScaleY プロパティをそれぞれアニメーション化する ScaleXTo メソッドと ScaleYTo メソッドもあります。

相対スケーリング

相対スケーリングは、RelScaleTo メソッドを使用して実行され、要素の Scale プロパティが徐々に変更されます。

await image.RelScaleTo(2, 2000);

この例では、Image インスタンスのサイズが 2 秒 (2000 ミリ秒) の 2 倍にスケールアップされます。 RelScaleTo メソッドは、アニメーションの開始に使用する要素の現在の Scale プロパティ値を取得し、その値から最初の引数を加えた値にスケーリングします。 これにより、各アニメーションは常に開始位置から 2 のスケーリングになります。

アンカーを使用したスケーリングと回転

ビジュアル要素の AnchorX プロパティと AnchorY プロパティは、Rotation プロパティと Scale プロパティのスケーリングまたは回転の中心を設定します。 したがって、それらの値は、RotateTo メソッドと ScaleTo メソッドにも影響します。

レイアウトの中央に配置された Image を考えると、次のコード例では、AnchorY プロパティを設定して、レイアウトの中心を中心に画像を回転する方法を示します。

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Image インスタンスをレイアウトの中心を中心に回転させるには、AnchorX プロパティと AnchorY プロパティを、Imageの幅と高さを基準にした値に設定する必要があります。 この例では、Image の中心がレイアウトの中心になるように定義されているため、既定の AnchorX 値 0.5 を変更する必要はありません。 ただし、AnchorY プロパティは、Image の上部からレイアウトの中心点までの値として再定義されます。 これにより、Image でレイアウトの中心点を中心に 360 度の完全回転が行われます。

翻訳

変換は、要素の TranslationX プロパティと TranslationY プロパティを段階的に変更する TranslateTo メソッドを使用して実行されます。

await image.TranslateTo(-100, -100, 1000);

この例では、Image インスタンスは、1 秒 (1000 ミリ秒) にわたって水平方向と垂直方向に変換されます。 TranslateTo メソッドは、デバイスに依存しない 100 単位の画像を左に、デバイスに依存しない 100 単位を上方向に同時に変換します。 これは、1 番目と 2 番目の引数の両方が負の数であるためです。 正の数値を指定すると、画像が右および下に変換されます。

大事な

要素が最初に画面からレイアウトされ、その後画面に翻訳された場合、翻訳後、要素の入力レイアウトは画面外のままになり、ユーザーはそれを操作できません。 そのため、ビューを最終的な位置に配置し、必要な翻訳を実行することをお勧めします。

退色

フェードは、要素の Opacity プロパティを徐々に変更する FadeTo メソッドで実行されます。

image.Opacity = 0;
await image.FadeTo(1, 4000);

この例では、Image インスタンスは 4 秒 (4,000 ミリ秒) でフェードインします。 FadeTo メソッドは、アニメーションの開始要素の現在の Opacity プロパティ値を取得し、その値から最初の引数にフェードインします。

複合アニメーション

複合アニメーションはアニメーションの連続した組み合わせであり、await 演算子を使用して作成できます。

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

この例では、Image インスタンスは 6 秒 (6,000 ミリ秒) で変換されます。 Image の変換では 5 つのアニメーションが使用され、await 演算子は各アニメーションが順番に実行されることを示します。 そのため、後続のアニメーション メソッドは、前のメソッドが完了した後に実行されます。

複合アニメーション

複合アニメーションは、2 つ以上のアニメーションが同時に実行されるアニメーションの組み合わせです。 複合アニメーションは、待機中のアニメーションと待機していないアニメーションを組み合わせることによって作成できます。

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

この例では、Image インスタンスはスケーリングされ、4 秒 (4,000 ミリ秒) で同時に回転されます。 Image のスケーリングでは、回転と同時に発生する 2 つのシーケンシャル アニメーションが使用されます。 RotateTo メソッドは、await 演算子なしで実行され、最初の ScaleTo アニメーションが開始されてすぐに返されます。 最初の ScaleTo メソッドの await 演算子は、最初の ScaleTo メソッドが完了するまで、2 番目の ScaleTo メソッドを遅延させます。 この時点で、RotateTo アニメーションは半分完成し、Image は 180 度回転します。 最後の 2 秒 (2000 ミリ秒) の間に、2 番目の ScaleTo アニメーションと RotateTo アニメーションの両方が完了します。

複数のアニメーションを同時に実行する

Task.WhenAny メソッドと Task.WhenAll メソッドを使用して複数の非同期メソッドを同時に実行できるため、複合アニメーションを作成できます。 どちらのメソッドも Task オブジェクトを返し、それぞれ Task オブジェクトを返すメソッドのコレクションを受け入れます。 Task.WhenAny メソッドは、次のコード例に示すように、コレクション内のメソッドが実行を完了すると完了します。

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

この例では、Task.WhenAny メソッドには 2 つのタスクが含まれています。 最初のタスクは、Image インスタンスを 4 秒 (4,000 ミリ秒) で回転させ、2 番目のタスクはイメージを 2 秒 (2000 ミリ秒) でスケーリングします。 2 番目のタスクが完了すると、Task.WhenAny メソッドの呼び出しが完了します。 ただし、RotateTo メソッドがまだ実行されている場合でも、2 番目の ScaleTo メソッドを開始できます。

Task.WhenAll メソッドは、次のコード例に示すように、コレクション内のすべてのメソッドが完了したときに完了します。

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

この例では、Task.WhenAll メソッドには 3 つのタスクが含まれており、それぞれ 10 分以上実行されます。 各 Task では、360 度回転の数が異なります。RotateToでは 307 回転、RotateXToでは 251 回転、RotateYToでは 199 回転です。 これらの値は素数であるため、回転が同期されないため、繰り返しパターンが発生することはありません。

アニメーションの取り消し

CancelAnimations 拡張メソッドは、特定の VisualElementで実行されているアニメーション (回転、スケーリング、平行移動、フェードなど) を取り消すために使用されます。

image.CancelAnimations();

この例では、Image インスタンスで実行されているすべてのアニメーションが直ちに取り消されます。