Silverlight - Animasi

Animasi memungkinkan Anda membuat antarmuka pengguna yang benar-benar dinamis. Ini sering digunakan untuk menerapkan efek, misalnya, ikon yang tumbuh saat Anda memindahkannya, logo yang berputar, teks yang menggulir ke tampilan, dan sebagainya.

Terkadang, efek ini tampak seperti kemewahan yang berlebihan. Jika digunakan dengan benar, animasi dapat meningkatkan aplikasi dalam beberapa cara. Mereka dapat membuat aplikasi tampak lebih responsif, alami, dan intuitif.

Misalnya, tombol yang bergeser saat Anda mengekliknya akan terasa seperti tombol fisik yang nyata, bukan sekadar persegi abu-abu. Animasi juga dapat menarik perhatian ke elemen penting dan memandu pengguna melalui transisi ke konten baru.

Pendekatan Silverlight terhadap animasi bersifat deklaratif daripada berfokus pada urutan animasi bingkai.

Mendefinisikan Animasi

Animasi biasanya ditentukan di bagian sumber daya. Faktanya, mereka biasanya dibungkus dalam elemen papan cerita, yang akan kita lihat secara detail sebentar lagi.

Ini menyediakan metode Begin (), sehingga animasi bisa dipanggil dari kode.
Animasi juga dapat diletakkan di dalam elemen status visual di template kontrol.

Animasi Deklaratif

Animasi di Silverlight bersifat deklaratif. Mereka menggambarkan apa yang ingin terjadi. Terserah Silverlight untuk mencari tahu bagaimana mewujudkannya. Jadi, animasi biasanya mengikuti pola yang kami beri tahu kepada Silverlight apa yang ingin kami ubah.

Ini selalu merupakan beberapa properti pada beberapa elemen bernama yaitu TargetName dan TargetProperty.

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

Kami mengatakan bagaimana kami ingin properti itu berubah dalam hal ini kami mengubah opasitas dari nilai nol menjadi nilai satu. Dengan kata lain, kami suka elemen target memudar dari buram menjadi transparan.
Terakhir, kami mengatakan berapa lama waktu yang kami inginkan, dalam hal ini akan memakan waktu lima detik.
Arti penting dari double dalam animasi ganda ini adalah ia menargetkan properti yang bertipe double, jadi nilai floating point.
Jika Anda ingin menganimasikan properti yang mewakili warna, gunakan animasi warna sebagai gantinya.

Mari kita lihat contoh sederhana dari animasi ganda. Diberikan di bawah ini adalah kode XAML di mana dua tombol, satu persegi panjang dan dua papan cerita ditambahkan.

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

Berikut adalah implementasi untuk berbagai acara di C #.

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat output berikut.

Mengulangi dan Membalik

Animasi menawarkan beberapa properti untuk diulang secara otomatis dan semua animasi terbalik.

Jika Anda menyetel properti perilaku berulang ke waktu spam, animasi akan berulang berulang hingga waktu yang ditentukan telah berlalu atau Anda dapat memberi tahu berapa kali Anda ingin animasi itu berulang.
Ini mendukung titik desimal sehingga Anda dapat mengulang empat setengah kali.
Anda dapat mengulang selamanya dan Anda juga dapat memberi tahu animasi bahwa setelah mencapai akhir, animasi akan berjalan terbalik kembali ke awal.

Animasi Bingkai Kunci

Seringkali animasi sederhana dari A ke B agak terlalu sederhana. Misalnya, Anda ingin menghidupkan bola yang memantul dari tanah. Ini bukan gerakan titik ke titik yang sederhana. Bola jatuh, mempercepat secara bertahap dan kemudian berbalik arah saat menyentuh dasar. Memperlambat lagi saat kembali ke puncak perjalanannya.

Mari kita lihat contoh sederhana dari Key Frame animation.

Diberikan di bawah ini adalah kode XAML, yang berisi animasi elips dan ganda dengan bingkai kunci.

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

Berikut implementasinya untuk mouse left acara tombol bawah, yang akan memulai animasi saat pengguna menekan tombol kiri mouse di halaman web.

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat output berikut.

Saat Anda mengklik halaman web, Anda akan melihat bahwa bola mulai bergerak.