Cara: Mengatur Properti Setelah Menganimasikannya dengan Papan Cerita

  • Artikel

Dalam beberapa kasus, mungkin muncul bahwa Anda tidak dapat mengubah nilai properti setelah dianimasikan.

Menganimasikan warna SolidColorBrush

Dalam contoh berikut, Storyboard digunakan untuk menganimasikan warna SolidColorBrush. Papan cerita dipicu saat tombol diklik. Kejadian Completed ditangani sehingga program diberi tahu ketika ColorAnimation selesai.

<Button
  Content="Animate and Then Set Example 1">
  <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button1BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton1BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Mengubah warna kuas

ColorAnimation Setelah selesai, program mencoba mengubah warna kuas menjadi biru.

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton1BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' Does not appear to have any effect:
    ' the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue
End Sub

Kode sebelumnya tampaknya tidak melakukan apa-apa: kuas tetap kuning, yang merupakan nilai yang disediakan oleh ColorAnimation yang menanimasikan kuas. Nilai properti yang mendasar (nilai dasar) sebenarnya diubah menjadi biru. Namun, nilai efektif, atau saat ini, tetap kuning karena ColorAnimation masih mengesampingkan nilai dasar. Jika Anda ingin nilai dasar menjadi nilai efektif lagi, Anda harus menghentikan animasi dari berpengaruh pada properti. Ada tiga cara untuk melakukan ini dengan animasi papan cerita:

  • Atur properti animasi FillBehavior ke Stop

  • Hapus seluruh Storyboard.

  • Hapus animasi dari properti individual.

Atur properti FillBehavior animasi ke Berhenti

Dengan mengatur FillBehavior ke Stop, Anda memberi tahu animasi untuk berhenti memengaruhi properti targetnya setelah mencapai akhir periode aktifnya.

<Button
  Content="Animate and Then Set Example 2">
  <Button.Background>
    <SolidColorBrush x:Name="Button2BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button2BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="Stop"
            Completed="setButton2BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton2BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' This appears to work:
    ' the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue
End Sub

Menghapus seluruh papan cerita

Dengan menggunakan RemoveStoryboard pemicu atau Storyboard.Remove metode , Anda memberi tahu animasi papan cerita untuk berhenti memengaruhi properti targetnya. Perbedaan antara pendekatan ini dan mengatur FillBehavior properti adalah Anda dapat menghapus papan cerita kapan saja, sementara FillBehavior properti hanya memiliki efek ketika animasi mencapai akhir periode aktifnya.

<Button
  Name="Button3"
  Content="Animate and Then Set Example 3">
  <Button.Background>
    <SolidColorBrush x:Name="Button3BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard x:Name="MyStoryboard">
          <ColorAnimation
            Storyboard.TargetName="Button3BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton3BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    MyStoryboard.Remove(Button3);
    Button3BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton3BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    MyStoryboard.Remove(Button3)
    Button3BackgroundBrush.Color = Colors.Blue
End Sub

Menghapus animasi dari properti individual

Teknik lain untuk menghentikan animasi memengaruhi properti adalah dengan menggunakan BeginAnimation(DependencyProperty, AnimationTimeline) metode objek yang dianimasikan. Tentukan properti yang dianimasikan sebagai parameter pertama dan null sebagai yang kedua.

<Button
  Name="Button4"
  Content="Animate and Then Set Example 4">
  <Button.Background>
    <SolidColorBrush x:Name="Button4BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button4BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton4BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
    Button4BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton4BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, Nothing)
    Button4BackgroundBrush.Color = Colors.Blue
End Sub

Teknik ini juga berfungsi untuk animasi non-storyboard.

Baca juga