視差

  • [アーティクル]

視差は、アプリの閲覧者の近くにある項目を背景にある項目よりも速く動かすという視覚効果です。 視差によって、奥行き、遠近感、および動きといった感覚が引き起こされます。 UWP アプリでは、ParallaxView コントロールを使用して、視差効果を作成できます。

Windows UI ライブラリ API:ParallaxView クラス、VerticalShift プロパティ、HorizontalShift プロパティ

プラットフォーム API:ParallaxView クラス、VerticalShift プロパティ、HorizontalShift プロパティ

例

WinUI 2 ギャラリー
WinUI ギャラリー

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、ParallaxView の動作を確認してください。

視差と Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。 視差は、アプリにモーション、深度、スケールを追加する Fluent Design System コンポーネントです。 詳しくは、Fluent Design の概要に関するページをご覧ください。

ユーザー インターフェイスでのしくみ

UI では、UI のスクロールやパンを行うときに、さまざまなオブジェクトをさまざまな速度で動かすことによって、視差効果を作成できます。 その実例として、コンテンツの 2 つのレイヤー (リストと背景画像) を見てみましょう。 リストは背景画像の上に配置されており、リストがアプリの閲覧者の近くに表示されているという錯覚を既に与えています。 次に、視差効果を実現するために、最も手前に表示されているオブジェクトを、遠くに表示されているオブジェクトよりも "速く" 動かします。 ユーザーがインターフェイスをスクロールすると、リストは背景画像よりも速い速度で動作し、奥行きがあるような錯覚を与えます。

リストと背景画像を使用した視差の例

ParallaxView コントロールを使用して視差効果を作成する

視差効果を作成するには、ParallaxView コントロールを使用します。 このコントロールによって、前景要素 (リストなど) のスクロール位置が背景要素 (画像など) に関連付けられます。 前景要素をスクロールすると、背景要素がアニメーション化され、視差効果が発生します。

ParallaxView コントロールを使用するには、ソース要素と背景要素を用意し、VerticalShift プロパティ (垂直スクロール用) や HorizontalShift プロパティ (水平スクロール用) を 0 より大きい値に設定します。

  • Source プロパティは、前景要素への参照を受け取ります。 視差効果を発生させるには、前景が ScrollViewer であるか、前景が ScrollViewer を含んでいる要素 (ListView や RichTextBox など) であることがj必要です。

  • 背景要素を設定するには、その要素を ParallaxView コントロールの子として追加します。 背景要素には、Image など、どのような UIElement でも使用できます。また、追加の UI 要素を含んでいるパネルも使用できます。

視差効果を作成するには、ParallaxView が背景要素を介して動作するようにする必要があります。 Grid パネルや Canvas パネルを使用すると、項目を相互に重ねることができ、それらの項目は ParallaxView コントロールで適切に動作します。

次の例では、リストの視差効果を作成します。

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 
    
        <!-- Background element --> 
        <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
               Stretch="UniformToFill"/>
    </ParallaxView>
    
    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement">
       <x:String>Item 1</x:String> 
       <x:String>Item 2</x:String> 
       <x:String>Item 3</x:String> 
       <x:String>Item 4</x:String> 
       <x:String>Item 5</x:String>     
       <x:String>Item 6</x:String> 
       <x:String>Item 7</x:String> 
       <x:String>Item 8</x:String> 
       <x:String>Item 9</x:String> 
       <x:String>Item 10</x:String>     
       <x:String>Item 11</x:String> 
       <x:String>Item 13</x:String> 
       <x:String>Item 14</x:String> 
       <x:String>Item 15</x:String> 
       <x:String>Item 16</x:String>     
       <x:String>Item 17</x:String> 
       <x:String>Item 18</x:String> 
       <x:String>Item 19</x:String> 
       <x:String>Item 20</x:String> 
       <x:String>Item 21</x:String>        
    </ListView>
</Grid>

ParallaxView では、視差効果の操作で適切に動作するように、画像のサイズが自動的に調整されます。このため、画像のスクロールが画面から消えてしまうことを心配する必要はありません。

視差効果のカスタマイズ

VerticalShift プロパティと HorizontalShift プロパティでは、視差効果の程度を制御できます。

  • VerticalShift プロパティでは、視差効果の操作全体を通じて、背景をどの程度垂直方向に動かすかを指定します。 値が 0 の場合、背景はまったく動きません。
  • HorizontalShift プロパティでは、視差効果の操作全体を通じて、背景をどの程度水平方向に動かすかを指定します。 値が 0 の場合、背景はまったく動きません。

値を大きくすると、劇的な効果が発生します。

視差をカスタマイズする方法の完全な一覧については、ParallaxView クラスをご覧ください。

推奨と非推奨

  • 視差は、背景画像を持つリストで使用してください
  • ListViewItems に画像が含まれている場合は、ListViewItems で視差を使用することを検討してください
  • 視差はアプリの数か所で使用してください。視差を過剰に使用すると、その効果が低下する可能性があります