Bagikan melalui

Gambaran Umum Perilaku Pengaturan Waktu

Topik ini menjelaskan perilaku pengaturan waktu animasi dan objek Timeline lainnya.

Prasyarat

Untuk memahami topik ini, Anda harus terbiasa dengan fitur animasi dasar. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi .

Jenis Garis Waktu

Timeline mewakili segmen waktu. Ini menyediakan properti yang memungkinkan Anda menentukan panjang segmen tersebut, kapan harus dimulai, berapa kali akan berulang, seberapa cepat waktu berlangsung di segmen tersebut, dan banyak lagi.

Kelas yang mewarisi dari kelas garis waktu menyediakan fungsionalitas tambahan, seperti animasi dan pemutaran media. WPF menyediakan jenis Timeline berikut.

Jenis garis waktu Deskripsi
AnimationTimeline Kelas dasar abstrak untuk objek Timeline yang menghasilkan nilai output untuk menganimasikan properti.
MediaTimeline Menghasilkan output dari file media.
ParallelTimeline Jenis TimelineGroup yang mengelompokkan dan mengontrol objek Timeline anak.
Storyboard Jenis ParallelTimeline yang menyediakan informasi penargetan untuk objek Garis Waktu yang dikandungnya.
Timeline Kelas dasar abstrak yang mendefinisikan perilaku waktu.
TimelineGroup Kelas abstrak untuk objek Timeline yang dapat berisi objek Timeline lainnya.

Properti yang Mengontrol Panjang Garis Waktu

Timeline mewakili segmen waktu, dan panjang garis waktu dapat dijelaskan dengan cara yang berbeda. Tabel berikut mendefinisikan beberapa istilah untuk menjelaskan panjang garis waktu.

Istilah Deskripsi Karakteristik
Durasi sederhana Lamanya waktu yang diperlukan oleh sebuah garis waktu untuk melakukan satu siklus maju. Duration
Satu pengulangan Lamanya waktu yang dibutuhkan garis waktu untuk bermain maju sekali dan, jika properti AutoReverse benar, putar mundur sekali. Duration, AutoReverse
Periode aktif Waktu yang dibutuhkan linimasa untuk menyelesaikan semua pengulangan yang ditentukan oleh properti RepeatBehavior-nya. Duration, , AutoReverseRepeatBehavior

Properti Durasi

Seperti yang disebutkan sebelumnya, garis waktu mewakili segmen waktu. Panjang segmen tersebut ditentukan oleh garis waktu Duration. Ketika garis waktu mencapai akhir durasinya, ia berhenti bermain. Jika garis waktu memiliki garis waktu anak, garis waktu tersebut juga berhenti diputar. Dalam kasus animasi, Duration menentukan berapa lama animasi mengambil transisi dari nilai awal ke nilai akhir. Durasi garis waktu kadang-kadang disebut durasi sederhana, untuk membedakan antara durasi perulangan tunggal dan panjang total waktu animasi diputar termasuk pengulangan. Anda dapat menentukan durasi menggunakan nilai waktu terbatas atau nilai khusus Automatic atau Forever. Durasi animasi harus diselesaikan ke nilai TimeSpan, sehingga dapat beralih antar nilai.

Sebuah contoh berikut menunjukkan DoubleAnimation dengan Duration lima detik.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Garis waktu kontainer, seperti Storyboard dan ParallelTimeline, memiliki durasi default Automatic, yang berarti mereka secara otomatis berakhir ketika anak terakhir mereka berhenti bermain. Contoh berikut menunjukkan Storyboard yang Duration nya ditetapkan menjadi lima detik, waktu yang dibutuhkan semua objek DoubleAnimation turunannya untuk selesai.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Dengan mengatur Duration garis waktu kontainer ke nilai TimeSpan, Anda dapat memaksa pemutaran menjadi lebih lama atau lebih singkat daripada yang akan dimainkan oleh objek Timeline turunannya. Jika Anda mengatur Duration ke nilai yang lebih kecil dari panjang objek anak Timeline dalam garis waktu kontainer, objek anak Timeline akan berhenti bermain saat garis waktu kontainer berhenti. Contoh berikut mengatur waktu Duration pada Storyboard dari contoh sebelumnya menjadi tiga detik. Akibatnya, DoubleAnimation pertama berhenti maju setelah tiga detik, ketika telah menanimasikan lebar persegi panjang target menjadi 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Properti Perilaku Pengulangan

Properti RepeatBehavior dari Timeline mengontrol berapa kali ia mengulangi durasi sederhananya. Dengan menggunakan properti RepeatBehavior, Anda dapat menentukan berapa kali garis waktu diputar (iterasi Count) atau total durasi waktu yang harus diputar (pengulangan Duration). Dalam kedua kasus, animasi melewati sebanyak mungkin eksekusi awal ke ujung seperlunya untuk mengisi jumlah atau durasi yang diminta. Secara default, garis waktu memiliki jumlah iterasi 1.0, yang berarti mereka bermain sekali dan tidak mengulangi sama sekali.

Contoh berikut menggunakan properti RepeatBehavior untuk membuat pemutaran DoubleAnimation selama dua kali durasi sederhananya dengan menentukan jumlah iterasi.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

Contoh berikutnya menggunakan properti RepeatBehavior untuk membuat DoubleAnimation bermain selama setengah durasi sederhananya.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Jika Anda menetapkan properti RepeatBehavior dari Timeline ke Forever, maka Timeline akan berulang hingga berhenti secara interaktif atau oleh sistem waktu. Contoh berikut menggunakan properti RepeatBehavior untuk membuat DoubleAnimation bermain tanpa batas waktu.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Untuk contoh tambahan, lihat Mengulangi animasi.

Properti AutoReverse

Properti AutoReverse menentukan apakah Timeline akan diputar mundur di akhir setiap iterasi maju. Contoh berikut menetapkan properti AutoReverse dari DoubleAnimation ke true; akibatnya, properti tersebut dianimasikan dari nol hingga 100, dan kemudian dari 100 menjadi nol. Durasi totalnya 10 detik.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Saat Anda menggunakan nilai Count untuk menentukan RepeatBehaviorTimeline dan properti AutoReverse dari Timeline tersebut adalah true, satu pengulangan terdiri dari satu iterasi maju diikuti oleh satu iterasi mundur. Contoh di bawah ini mengatur RepeatBehaviorDoubleAnimation dari contoh sebelumnya menjadi Count dengan nilai dua. Akibatnya, DoubleAnimation bermain selama 20 detik: maju selama lima detik, mundur selama lima detik, maju selama 5 detik lagi, lalu mundur selama lima detik.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Jika garis waktu kontainer memiliki objek anak Timeline, mereka akan terbalik saat garis waktu kontainer itu terbalik. Untuk contoh tambahan, lihat Menentukan Apakah Garis Waktu Secara Otomatis Membalikkan.

Properti BeginTime

Properti BeginTime memungkinkan Anda menentukan kapan garis waktu dimulai. Waktu mulai garis waktu relatif terhadap garis waktu induknya. Waktu mulai dari nol detik berarti linimasa dimulai seketika saat induknya dimulai; nilai lainnya membuat perbedaan waktu antara ketika linimasa induk mulai diputar dan ketika linimasa turunannya diputar. Misalnya, waktu mulai dua detik berarti garis waktu mulai diputar ketika induknya telah mencapai waktu dua detik. Secara default, semua garis waktu memiliki waktu mulai nol detik. Anda juga dapat mengatur waktu mulai garis waktu untuk null, yang mencegah garis waktu dimulai. Di WPF, Anda menentukan null menggunakan x:Null Markup Extension.

Perhatikan bahwa waktu mulai tidak diterapkan setiap kali garis waktu diulang karena pengaturan RepeatBehavior. Jika Anda membuat animasi dengan BeginTime 10 detik dan RepeatBehaviorForever, akan ada penundaan 10 detik sebelum animasi diputar untuk pertama kalinya, tetapi tidak untuk setiap pengulangan berturut-turut. Namun, jika garis waktu induk dari animasi dimulai ulang atau diulang, akan terjadi penundaan selama 10 detik.

Properti BeginTime berguna untuk mengatur jeda pada garis waktu. Contoh berikut membuat Storyboard yang memiliki dua objek DoubleAnimation anak. Animasi pertama memiliki Duration lima detik, dan yang kedua memiliki Duration 3 detik. Contoh ini mengatur BeginTime pada DoubleAnimation kedua menjadi 5 detik, sehingga mulai diputar setelah DoubleAnimation pertama berakhir.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

Properti FillBehavior

Ketika Timeline mencapai akhir total durasi aktifnya, properti FillBehavior menentukan apakah properti berhenti atau menyimpan nilai terakhirnya. Animasi dengan FillBehaviorHoldEnd "menyimpan" nilai outputnya: properti yang dianimasikan mempertahankan nilai terakhir animasi. Nilai Stop menyebabkan animasi berhenti memengaruhi properti targetnya setelah berakhir.

Contoh berikut membuat Storyboard yang memiliki dua objek DoubleAnimation anak. Kedua objek DoubleAnimation menganimasikan WidthRectangle dari 0 hingga 100. Elemen Rectangle memiliki nilai Width yang tidak dianimasi sebesar 500 [piksel independen perangkat].

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Properti yang Mengontrol Kecepatan Garis Waktu

Kelas Timeline menyediakan tiga properti untuk menentukan kecepatannya:

Lihat juga