次の方法で共有

既存の ScrollViewer エクスペリエンスを強化する

この記事では、XAML ScrollViewer と ExpressionAnimations を使用して、動的な入力駆動型モーション エクスペリエンスを作成する方法について説明します。

[前提条件]

ここでは、これらの記事で説明されている概念を理解していることを前提としています。

ScrollViewer の上に構築する理由

通常、既存の XAML ScrollViewer を使用して、アプリ コンテンツのスクロール可能でズーム可能なサーフェスを作成します。 Fluent Design 言語の導入により、サーフェスをスクロールまたはズームして他のモーション エクスペリエンスを駆動する方法にも注目する必要があります。 たとえば、スクロールを使用して背景のぼかしアニメーションを実行したり、"スティッキー ヘッダー" の位置を動かしたりします。

これらのシナリオでは、スクロールやズームなどの動作や操作エクスペリエンスを利用して、アプリの他の部分をより動的にします。 これにより、アプリがよりまとまりを感じ、エンド ユーザーの目に覚えやすいエクスペリエンスを実現できます。 アプリの UI をより覚えやすいものにすることで、エンド ユーザーはアプリをより頻繁に、より長い期間使用できるようになります。

ScrollViewer の上に何を構築できますか?

ScrollViewer の位置を利用して、さまざまな動的エクスペリエンスを構築できます。

  • 視差 – ScrollViewer の位置を使用して、スクロール位置に対する相対的な速度で背景または前景のコンテンツを移動します。
  • StickyHeaders – ScrollViewer の位置を使用してヘッダーをアニメーション化し、その位置に "固定" します
  • Input-Driven 効果 – Scrollviewer の位置を使用して、ぼかしなどのコンポジション効果をアニメーション化します。

一般に、ExpressionAnimation を使用して ScrollViewer の位置を参照することで、スクロール量を基準に動的に変更するアニメーションを作成できます。

視差効果を使用したリストビュー

恥ずかしがり屋のヘッダー

ScrollViewerManipulationPropertySet の使用

XAML ScrollViewer を使用してこれらの動的エクスペリエンスを作成するには、アニメーション内のスクロール位置を参照できる必要があります。 これは、ScrollViewerManipulationPropertySet と呼ばれる XAML ScrollViewer から CompositionPropertySet にアクセスすることによって行われます。 ScrollViewerManipulationPropertySet には、ScrollViewer のスクロール位置へのアクセスを提供する Translation という 1 つの Vector3 プロパティが含まれています。 その後、ExpressionAnimation で他の CompositionPropertySet と同様にこれを参照できます。

作業を開始するための一般的な手順:

  1. ElementCompositionPreview を使用して ScrollViewerManipulationPropertySet にアクセスします。
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. PropertySet から Translation プロパティを参照する ExpressionAnimation を作成します。
    • 参照パラメーターを設定することを忘れないでください。
  3. ExpressionAnimation を使用して CompositionObject のプロパティをターゲットにします。

注

GetScrollViewerManipulationPropertySet メソッドから返された PropertySet をクラス変数に割り当てることをお勧めします。 これにより、プロパティ セットはガベージ コレクションによってクリーンアップされないため、参照先の ExpressionAnimation には影響しません。 ExpressionAnimations では、式で使用されるオブジェクトへの厳密な参照は保持されません。

例

上で示した視差のサンプルをまとめる方法を見てみましょう。 参考までに、アプリのすべてのソース コードは、GitHubの Window UI Dev Labs リポジトリにあります。

最初に、ScrollViewerManipulationPropertySet への参照を取得します。

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

次の手順では、ScrollViewer のスクロール位置を利用する数式を定義する ExpressionAnimation を作成します。

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

注

ExpressionBuilder ヘルパー クラスを使用して、文字列を必要とせずに同じ式を構築することもできます。

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

最後に、この ExpressionAnimation を取得し、視差効果を適用するビジュアルを対象とします。 この場合は、リスト内の各項目の画像です。

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);
  • Last updated on