Share via

Paralaks

  • Artikel

Parallax adalah efek visual di mana item yang lebih dekat dengan penampil bergerak lebih cepat daripada item di latar belakang. Parallax menciptakan perasaan kedalaman, perspektif, dan gerakan. Dalam aplikasi UWP, Anda dapat menggunakan kontrol ParallaxView untuk membuat efek parallax.

WINDOWS UI Library API:ParallaxView class, VerticalShift property, HorizontalShift property

API Platform: Kelas ParallaxView, properti VerticalShift, properti HorizontalShift

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Anda memiliki aplikasi WinUI 2 Gallery yang terinstal , klik di sini untuk membuka aplikasi dan melihat ParallaxView beraksi.

Paralaks dan Sistem Fluent Design

Sistem Fluent Design membantu Anda membuat UI modern dan tebal yang menggabungkan cahaya, kedalaman, gerakan, bahan, dan skala. Parallax adalah komponen Sistem Fluent Design yang menambahkan gerakan, kedalaman, dan skala ke aplikasi Anda. Untuk mempelajari lebih lanjut, lihat gambaran umum Desain Fasih.

Cara kerjanya di antarmuka pengguna

Dalam UI, Anda dapat membuat efek parallax dengan memindahkan objek yang berbeda pada tingkat yang berbeda saat UI menggulir atau menggeser. Untuk menunjukkan, mari kita lihat dua lapisan konten, daftar dan gambar latar belakang. Daftar ini ditempatkan di atas gambar latar belakang yang sudah memberikan ilusi bahwa daftar mungkin lebih dekat dengan penampil. Sekarang, untuk mencapai efek parallax, kita ingin objek yang paling dekat dengan kita untuk melakukan perjalanan "lebih cepat" daripada objek yang lebih jauh. Saat pengguna menggulir antarmuka, daftar bergerak pada tingkat yang lebih cepat daripada gambar latar belakang, yang menciptakan ilusi kedalaman.

Contoh paralaks dengan daftar dan gambar latar belakang

Menggunakan kontrol ParallaxView untuk membuat efek parallax

Untuk membuat efek parallax, Anda menggunakan kontrol ParallaxView . Kontrol ini mengikat posisi gulir elemen latar depan, seperti daftar, ke elemen latar belakang, seperti gambar. Saat Anda menggulir melalui elemen latar depan, itu menganimasikan elemen latar belakang untuk membuat efek paralaks.

Untuk menggunakan kontrol ParallaxView, Anda menyediakan elemen Sumber, elemen latar belakang, dan mengatur properti VerticalShift (untuk pengguliran vertikal) dan/atau HorizontalShift (untuk pengguliran horizontal) ke nilai yang lebih besar dari nol.

  • Properti Sumber mengambil referensi ke elemen latar depan. Agar efek parallax terjadi, latar depan harus berupa ScrollViewer atau elemen yang berisi ScrollViewer, seperti ListView atau RichTextBox.

  • Untuk mengatur elemen latar belakang, Anda menambahkan elemen tersebut sebagai anak dari kontrol ParallaxView. Elemen latar belakang dapat berupa UIElement apa pun, seperti Gambar atau panel yang berisi elemen UI tambahan.

Untuk membuat efek paralaks, ParallaxView harus berada di belakang elemen latar depan. Panel Grid dan Canvas memungkinkan Anda melapisi item di atas satu sama lain, sehingga mereka bekerja dengan baik dengan kontrol ParallaxView.

Contoh ini membuat efek paralaks untuk daftar:

<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 secara otomatis menyesuaikan ukuran gambar sehingga berfungsi untuk operasi parallax sehingga Anda tidak perlu khawatir tentang gambar yang menggulir keluar dari tampilan.

Menyesuaikan efek paralaks

Properti VerticalShift dan HorizontalShift memungkinkan Anda mengontrol tingkat efek parallax.

  • Properti VerticalShift menentukan seberapa jauh kita ingin latar belakang bergeser secara vertikal selama seluruh operasi parallax. Nilai 0 berarti latar belakang tidak bergerak sama sekali.
  • Properti HorizontalShift menentukan seberapa jauh kita ingin latar belakang bergeser secara horizontal selama seluruh operasi parallax. Nilai 0 berarti latar belakang tidak bergerak sama sekali.

Nilai yang lebih besar menciptakan efek yang lebih dramatis.

Untuk daftar lengkap cara menyesuaikan parallax, lihat kelas ParallaxView.

Lakukan dan jangan lakukan

  • Menggunakan parallax dalam daftar dengan gambar latar belakang
  • Pertimbangkan untuk menggunakan parallax di ListViewItems saat ListViewItems berisi gambar
  • Jangan gunakan di mana-mana, penggunaan berlebihan dapat mengurangi dampaknya