Gambaran Umum Perilaku Waktu

Artikel
06/02/2023

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

Prasyarat

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

Jenis Garis Waktu

mewakili Timeline 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 berikut Timeline .

Jenis garis waktu	Deskripsi
AnimationTimeline	Kelas dasar abstrak untuk Timeline objek yang menghasilkan nilai output untuk menganimasikan properti.
MediaTimeline	Menghasilkan output dari file media.
ParallelTimeline	Jenis TimelineGroup grup tersebut dan mengontrol objek turunan Timeline .
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 Timeline objek yang dapat berisi objek lain Timeline .

Properti yang Mengontrol Panjang Garis Waktu

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

Persyaratan	Deskripsi	Properti
Durasi sederhana	Lamanya waktu yang diperlukan garis waktu untuk membuat satu perulangan ke depan.	Duration
Satu pengulangan	Lamanya waktu yang dibutuhkan garis waktu untuk bermain maju sekali dan, jika AutoReverse properti benar, putar mundur sekali.	Duration, AutoReverse
Periode aktif	Lamanya waktu yang diperlukan garis waktu untuk menyelesaikan semua pengulangan yang ditentukan oleh propertinya RepeatBehavior .	Duration, AutoReverse, RepeatBehavior

Properti Durasi

Seperti yang disebutkan sebelumnya, garis waktu mewakili segmen waktu. Panjang segmen tersebut ditentukan oleh garis Durationwaktu . Ketika garis waktu mencapai akhir durasinya, garis waktu berhenti diputar. 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 akhirnya. Durasi garis waktu terkadang disebut durasi sederhananya, untuk membedakan antara durasi perulangan tunggal dan panjang total waktu animasi diputar termasuk pengulangan. Anda dapat menentukan durasi menggunakan nilai waktu terbatas atau nilai Automatic khusus atau Forever. Durasi animasi harus diselesaikan ke TimeSpan nilai, sehingga dapat beralih antar nilai.

Contoh berikut menunjukkan DoubleAnimation dengan lima Duration 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 Automaticdefault , yang berarti mereka secara otomatis berakhir ketika anak terakhir mereka berhenti bermain. Contoh berikut menunjukkan yang Storyboard penyelesaiannya Duration menjadi lima detik, durasi waktu yang dibutuhkan semua objek turunannya DoubleAnimation untuk diselesaikan.

<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 TimeSpan nilai, Anda dapat memaksa untuk bermain lebih lama atau lebih pendek dari objek turunannya Timeline . Jika Anda mengatur Duration ke nilai yang lebih kecil dari panjang objek turunan Timeline garis waktu kontainer, objek anak Timeline berhenti diputar saat garis waktu kontainer melakukannya. Contoh berikut mengatur Duration dari Storyboard contoh sebelumnya menjadi tiga detik. Akibatnya, yang pertama DoubleAnimation 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 RepeatBehavior

Properti RepeatBehavior kontrol Timeline berapa kali mengulangi durasi sederhananya. RepeatBehavior Dengan menggunakan properti , 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 1.0iterasi , yang berarti mereka bermain sekali dan tidak mengulangi sama sekali.

Contoh berikut menggunakan RepeatBehavior properti 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 RepeatBehavior properti untuk membuat DoubleAnimation drama selama setengah durasi sederhananya.

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

Jika Anda mengatur RepeatBehavior properti dari ke Timeline Forever, berulang Timeline sampai berhenti secara interaktif atau oleh sistem waktu. Contoh berikut menggunakan RepeatBehavior properti untuk membuat pemutaran DoubleAnimation 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 perulangan ke depan. Contoh berikut diatur ke AutoReverse properti ke DoubleAnimationtrue; sebagai hasilnya, ia menganimasikan dari nol hingga 100, lalu dari 100 menjadi nol. Ini bermain selama total 10 detik.

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

Saat Anda menggunakan Count nilai untuk menentukan RepeatBehavior properti dan Timeline AutoReverse dari itu Timeline adalah true, satu pengulangan terdiri dari satu perulangan maju diikuti oleh satu iterasi mundur. Contoh berikut mengatur RepeatBehavior dari DoubleAnimation contoh sebelumnya ke salah satu Count dari dua. Akibatnya, DoubleAnimation drama 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 turunan Timeline , garis waktu kontainer akan terbalik saat garis waktu kontainer. Untuk contoh tambahan, lihat Menentukan Apakah Garis Waktu Terbalik Secara Otomatis.

Properti BeginTime

Properti BeginTime memungkinkan Anda menentukan kapan garis waktu dimulai. Waktu mulai garis waktu relatif terhadap garis waktu induknya. Waktu mulai nol detik berarti garis waktu dimulai segera setelah induk dimulai; nilai lain membuat offset antara ketika garis waktu induk mulai diputar dan ketika garis waktu turunan 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 ke 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 pengaturannya RepeatBehavior . Jika Anda membuat animasi dengan BeginTime 10 detik dan RepeatBehavior satu dari Forever, akan ada penundaan 10 detik sebelum animasi diputar untuk pertama kalinya, tetapi tidak untuk setiap pengulangan berturut-turut. Namun, jika garis waktu induk animasi dimulai ulang atau diulang, penundaan 10 detik akan terjadi.

Properti BeginTime ini berguna untuk garis waktu yang mengejutkan. Contoh berikut membuat Storyboard yang memiliki dua objek anak DoubleAnimation . Animasi pertama memiliki lima Duration detik, dan yang kedua memiliki Duration 3 detik. Contoh mengatur BeginTime detik DoubleAnimation ke 5 detik, sehingga mulai diputar setelah yang pertama DoubleAnimation 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

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

Contoh berikut membuat Storyboard yang memiliki dua objek anak DoubleAnimation . Kedua DoubleAnimation objek menganimasikan Width dari Rectangle 0 hingga 100. Elemen Rectangle memiliki nilai non-animasi Width 500 [piksel independen perangkat].

Properti FillBehavior pertama DoubleAnimation diatur ke HoldEnd, nilai default. Akibatnya, Lebar Persegi Panjang tetap di 100 setelah akhir DoubleAnimation .
Properti FillBehavior kedua DoubleAnimation diatur ke Stop. Akibatnya, Width yang kedua Rectangle kembali menjadi 500 setelah akhir DoubleAnimation .

<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 ini Timeline menyediakan tiga properti untuk menentukan kecepatannya:

SpeedRatio– Menentukan tingkat itu, relatif terhadap induknya, pada saat itu berkembang untuk .Timeline Nilai yang lebih besar dari satu meningkatkan kecepatan dan objek turunannya Timeline Timeline ; nilai antara nol dan satu memperlambatnya. Nilai satu menunjukkan bahwa Timeline kemajuan pada tingkat yang sama dengan induknya. Pengaturan SpeedRatio garis waktu kontainer juga memengaruhi semua objek turunannya Timeline .
AccelerationRatio – Menentukan persentase Garis Waktu yang dihabiskan Duration untuk mempercepat. Misalnya, lihat Cara: Mempercepat atau Mempercepat Animasi.
DecelerationRatio - Menentukan persentase Garis Waktu yang dihabiskan Duration untuk menurun. Misalnya, lihat Cara: Mempercepat atau Mempercepat Animasi.