Compartir a través de


Cómo: Animar un objeto Boolean mediante fotogramas clave

En este ejemplo se muestra cómo animar el valor de propiedad de tipo Boolean de un control Button mediante fotogramas clave.

Ejemplo

En el ejemplo siguiente se utiliza la clase BooleanAnimationUsingKeyFrames para animar la propiedad IsEnabled de un control Button. Todos los fotogramas clave de este ejemplo utilizan una instancia de la clase DiscreteBooleanKeyFrame. Los fotogramas clave discretos como DiscreteBooleanKeyFrame crean saltos súbitos entre los valores, es decir, el movimiento de la animación es brusco.

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

Imports System
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.
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. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

Para obtener el ejemplo completo, vea KeyFrame Animation Sample.

Vea también

Referencia

BooleanAnimationUsingKeyFrames

IsEnabled

Button

Conceptos

Información general sobre animaciones de fotogramas clave

Otros recursos

Temas "Cómo..." de animaciones de fotogramas clave