Практическое руководство. Анимация логического значения с помощью ключевых кадров

В этом примере показано, как анимировать значение логического свойства Button элемента управления с помощью ключевых кадров.

Пример

В следующем примере используется BooleanAnimationUsingKeyFrames класс для анимации IsEnabled свойство Button элемента управления. Все ключевые кадры в этом примере использует экземпляр DiscreteBooleanKeyFrame класса. Дискретные ключевые кадры, например DiscreteBooleanKeyFrame , создают скачкообразные переходы между значениями, то есть, перемещение анимация выполняется рывками.

// 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="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>

Описание полного примера см. в разделе Пример анимации по ключевым кадрам.

См. также