Postupy: Animace logické hodnoty použitím klíčových snímků

  • Článek

Tento příklad ukazuje, jak animovat logickou hodnotu Button vlastnosti ovládacího prvku pomocí klíčových snímků.

Příklad

Následující příklad používá BooleanAnimationUsingKeyFrames třídu k animaci IsEnabled vlastnosti Button ovládacího prvku. Všechny klíčové rámce v tomto příkladu DiscreteBooleanKeyFrame používají instanci třídy. Diskrétní klíčové snímky, jako DiscreteBooleanKeyFrame je vytvoření náhlého přeskakování mezi hodnotami, to znamená, že pohyb animace je trhaný.

// Demonstrates a BooleanAnimationUsingKeyFrames. The animation is used to
// animate the IsEnabled property of a button.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace Microsoft.Samples.KeyFrameExamples
{
    public class BooleanAnimationUsingKeyFramesExample : Page
    {
        public BooleanAnimationUsingKeyFramesExample()
        {
            Title = "BooleanAnimationUsingKeyFrames Example";
            Background = Brushes.White;
            Margin = new Thickness(20);

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Orientation = Orientation.Vertical;
            myStackPanel.Margin = new Thickness(20);

            // Create a TextBlock to introduce the example.
            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Text = "Click the button to animate its IsEnabled property"
                               + " with aBooleanAnimationUsingKeyFrames animation.";
            myStackPanel.Children.Add(myTextBlock);

            // Create the Button that is the target of the animation.
            Button myButton = new Button();
            myButton.Margin = new Thickness(200);
            myButton.Content = "Click Me";

            myStackPanel.Children.Add(myButton);

            // Assign the Button a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "AnimatedButton", myButton);

            // Create a BooleanAnimationUsingKeyFrames to
            // animate the IsEnabled property of the Button.
            BooleanAnimationUsingKeyFrames booleanAnimation
                = new BooleanAnimationUsingKeyFrames();
            booleanAnimation.Duration = TimeSpan.FromSeconds(4);

            // All the key frames defined below are DiscreteBooleanKeyFrames.
            // Discrete key frames create sudden "jumps" between values
            // (no interpolation). Only discrete key frames can be used
            // for Boolean key frame animations.

            // Value at the beginning is false
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    false, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.0))) // KeyTime
                );

            // Value becomes true after the first second.
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    true, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.0))) // KeyTime
                );

            // Value becomes false after the 2nd second.
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    false, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))) // KeyTime
                );

            // Value becomes true after the third second.
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    true, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.0))) // KeyTime
                );

            // Value becomes false after 3 and half seconds.
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    false, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.5))) // KeyTime
                );

            // Value becomes true after the fourth second.
            booleanAnimation.KeyFrames.Add(
                new DiscreteBooleanKeyFrame(
                    true, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.0))) // KeyTime
                );

            // Set the animation to target the IsEnabled property
            // of the object named "AnimatedButton".
            Storyboard.SetTargetName(booleanAnimation, "AnimatedButton");
            Storyboard.SetTargetProperty(
                booleanAnimation, new PropertyPath(Button.IsEnabledProperty));

            // Create a storyboard to apply the animation.
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(booleanAnimation);

            // Start the storyboard when the button is clicked.
            myButton.Click += delegate(object sender, RoutedEventArgs e)
            {
                myStoryboard.Begin(this);
            };

            Content = myStackPanel;
        }
    }
}

' Demonstrates a BooleanAnimationUsingKeyFrames. The animation is used to
' animate the IsEnabled property of a button.

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace Microsoft.Samples.KeyFrameExamples
    Public Class BooleanAnimationUsingKeyFramesExample
        Inherits Page
        Public Sub New()
            Title = "BooleanAnimationUsingKeyFrames Example"
            Background = Brushes.White
            Margin = New Thickness(20)

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myStackPanel As New StackPanel()
            myStackPanel.Orientation = Orientation.Vertical
            myStackPanel.Margin = New Thickness(20)

            ' Create a TextBlock to introduce the example.
            Dim myTextBlock As New TextBlock()
            myTextBlock.Text = "Click the button to animate its IsEnabled property" & " with aBooleanAnimationUsingKeyFrames animation."
            myStackPanel.Children.Add(myTextBlock)

            ' Create the Button that is the target of the animation.
            Dim myButton As New Button()
            myButton.Margin = New Thickness(200)
            myButton.Content = "Click Me"

            myStackPanel.Children.Add(myButton)


            ' Assign the Button a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("AnimatedButton", myButton)

            ' Create a BooleanAnimationUsingKeyFrames to
            ' animate the IsEnabled property of the Button.
            Dim booleanAnimation As New BooleanAnimationUsingKeyFrames()
            booleanAnimation.Duration = TimeSpan.FromSeconds(4)


            ' All the key frames defined below are DiscreteBooleanKeyFrames. 
            ' Discrete key frames create sudden "jumps" between values 
            ' (no interpolation). Only discrete key frames can be used 
            ' for Boolean key frame animations.

            ' Value at the beginning is false
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(False, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.0)))) ' KeyTime -  Target value (KeyValue)

            ' Value becomes true after the first second.
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(True, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.0)))) ' KeyTime -  Target value (KeyValue)

            ' Value becomes false after the 2nd second.
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(False, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0)))) ' KeyTime -  Target value (KeyValue)

            ' Value becomes true after the third second.
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(True, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.0)))) ' KeyTime -  Target value (KeyValue)

            ' Value becomes false after 3 and half seconds.
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(False, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.5)))) ' KeyTime -  Target value (KeyValue)

            ' Value becomes true after the fourth second.
            booleanAnimation.KeyFrames.Add(New DiscreteBooleanKeyFrame(True, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.0)))) ' KeyTime -  Target value (KeyValue)

            ' Set the animation to target the IsEnabled property
            ' of the object named "AnimatedButton".
            Storyboard.SetTargetName(booleanAnimation, "AnimatedButton")
            Storyboard.SetTargetProperty(booleanAnimation, New PropertyPath(Button.IsEnabledProperty))

            ' Create a storyboard to apply the animation.
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(booleanAnimation)

            ' Start the storyboard when the button is clicked.
            AddHandler myButton.Click, Sub(sender As Object, e As RoutedEventArgs) myStoryboard.Begin(Me)

            Content = myStackPanel
        End Sub

    End Class
End Namespace

<!-- Demonstrates a BooleanAnimationUsingKeyFrames. The animation is used to
     animate the IsEnabled property of a button. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="KeyFrameBoolean Animation Example">


  <StackPanel Orientation="Vertical" Margin="20">
  
    <TextBlock>
        Click the button to animate its IsEnabled property with a 
        BooleanAnimationUsingKeyFrames animation.
    </TextBlock>
  
    <Button Name="myAnimatedButton" Margin="200">Click Me
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <BooleanAnimationUsingKeyFrames 
                Storyboard.TargetName="myAnimatedButton" 
                Storyboard.TargetProperty="IsEnabled"
                Duration="0:0:4" FillBehavior="HoldEnd">

                <!-- All the key frames below are DiscreteBooleanKeyFrames. Discrete key frames create 
                sudden "jumps" between values (no interpolation). Only discrete key frames can be used 
                for Boolean key frame animations. -->
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:3.5" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:4" />
              </BooleanAnimationUsingKeyFrames>            
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Kompletní ukázku najdete v části Ukázka animace klíčového rámce.

Viz také