Gewusst wie: Animieren mehrerer visueller Effekte

Aktualisiert: November 2007

Im folgenden Beispiel wird gezeigt, wie die ShadowDepth- und Softness-Eigenschaft eines DropShadowBitmapEffect und die Radius-Eigenschaft eines BlurBitmapEffect animiert werden, um die Illusion einer Schaltfläche zu erzeugen, die sich vom Bildschirm abhebt.

Beispiel

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Effects;

namespace SDKSample
{
    public partial class MultipleEffectAnimationExample : Page
    {
        public MultipleEffectAnimationExample()
        {
            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            Button myButton = new Button();
            myButton.Content = "Click Me to Animate Drop Shadow!";
            myButton.Margin = new Thickness(50);
            myButton.Width = 300;

            ScaleTransform myScaleTransform = new ScaleTransform();

            // Assign the ScaleTransform a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName("MyAnimatedScaleTransform", myScaleTransform);

            myScaleTransform.ScaleX = 1;
            myScaleTransform.ScaleY = 1;
            myScaleTransform.CenterX = 100;

            // Associate the transform to the button.
            myButton.RenderTransform = myScaleTransform;

            // Create BitmapEffects that will be animated.
            BlurBitmapEffect myBlurBitmapEffect = new BlurBitmapEffect();

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

            myBlurBitmapEffect.Radius = 0;
            myBlurBitmapEffect.KernelType = KernelType.Box;

            DropShadowBitmapEffect myDropShadowBitmapEffect = new DropShadowBitmapEffect();

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

            myDropShadowBitmapEffect.Color = Colors.Black;
            myDropShadowBitmapEffect.ShadowDepth = 0;

            BitmapEffectGroup myBitmapEffectGroup = new BitmapEffectGroup();
            myBitmapEffectGroup.Children.Add(myBlurBitmapEffect);
            myBitmapEffectGroup.Children.Add(myDropShadowBitmapEffect);

            myButton.BitmapEffect = myBitmapEffectGroup;

            // Create an animation to animate the ScaleX property of the 
            // ScaleTransform applied to the button.
            DoubleAnimation myDoubleAnimationScaleX = new DoubleAnimation();
            myDoubleAnimationScaleX.Duration = TimeSpan.FromSeconds(1);
            myDoubleAnimationScaleX.AutoReverse = true;
            myDoubleAnimationScaleX.To = 5;

            // Set the animation to target the ScaleX property of 
            // the object named "MyAnimatedScaleTransform. This makes the
            // button get larger and smaller on the horizontal axis."
            Storyboard.SetTargetName(myDoubleAnimationScaleX, "MyAnimatedScaleTransform");
            Storyboard.SetTargetProperty(
                myDoubleAnimationScaleX, new PropertyPath(ScaleTransform.ScaleXProperty));

            // Set the animation to target the ScaleY property of 
            // the object named "MyAnimatedScaleTransform. This makes the
            // button get larger and smaller on the vertical axis."
            DoubleAnimation myDoubleAnimationScaleY = new DoubleAnimation();
            myDoubleAnimationScaleY.Duration = TimeSpan.FromSeconds(1);
            myDoubleAnimationScaleY.AutoReverse = true;
            myDoubleAnimationScaleY.To = 5;

            Storyboard.SetTargetName(myDoubleAnimationScaleY, "MyAnimatedScaleTransform");
            Storyboard.SetTargetProperty(
                myDoubleAnimationScaleY, new PropertyPath(ScaleTransform.ScaleYProperty));

            // Set the animation to target the ShadowDepth property of 
            // the object named "myDropShadowBitmapEffect. This makes the
            // button appear to be lifting off the screen as its shadow moves."
            DoubleAnimation myDoubleAnimationShadowDepth = new DoubleAnimation();
            myDoubleAnimationShadowDepth.Duration = TimeSpan.FromSeconds(1);
            myDoubleAnimationShadowDepth.AutoReverse = true;
            myDoubleAnimationShadowDepth.From = 0;
            myDoubleAnimationShadowDepth.To = 50;

            Storyboard.SetTargetName(myDoubleAnimationShadowDepth, "myDropShadowBitmapEffect");
            Storyboard.SetTargetProperty(
                myDoubleAnimationShadowDepth, new PropertyPath(DropShadowBitmapEffect.ShadowDepthProperty));

            // Animate the blur to make the object appear to
            // be comming out of the screen. Use a spline key
            // frame to make the blur animate suddenly at the 
            // very end of the animation.
            DoubleAnimationUsingKeyFrames myDoubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();
            myDoubleAnimationUsingKeyFrames.AutoReverse = true;

            // Set the animation to target the Radius property
            // of the object named "myBlurBitmapEffect."
            Storyboard.SetTargetName(myDoubleAnimationUsingKeyFrames, "myBlurBitmapEffect");
            Storyboard.SetTargetProperty(
                myDoubleAnimationUsingKeyFrames, new PropertyPath(BlurBitmapEffect.RadiusProperty));
            myDoubleAnimationUsingKeyFrames.KeyFrames.Add(
                new SplineDoubleKeyFrame(
                    30, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)), // KeyTime
                    new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
                    )
                );

            // Create a storyboard and add the animations to it.
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimationScaleX);
            myStoryboard.Children.Add(myDoubleAnimationScaleY);
            myStoryboard.Children.Add(myDoubleAnimationShadowDepth);
            myStoryboard.Children.Add(myDoubleAnimationUsingKeyFrames);

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

            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;

        }      
    }
}

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button Margin="50" Width="200" Name="myButton">
      Click Me to Animate Drop Shadow!
      <Button.RenderTransform>
        <ScaleTransform x:Name="MyAnimatedScaleTransform" 
         ScaleX="1" ScaleY="1" CenterX="100"  />
      </Button.RenderTransform>
      <Button.BitmapEffect>
        <BitmapEffectGroup>
          <BlurBitmapEffect x:Name="myBlurBitmapEffect" Radius="0" KernelType="Box" />
          <DropShadowBitmapEffect x:Name="myDropShadowBitmapEffect" Color="Black"   
           ShadowDepth="0" />
        </BitmapEffectGroup>
      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the ScaleX property to make the button
                   get larger and smaller in the horizontal axis. -->
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                To="5.0" Duration="0:0:1" AutoReverse="True" />

              <!-- Animate the ScaleY property to make the button
                   get larger and smaller in the vertical axis. -->
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                To="5.0" Duration="0:0:1" AutoReverse="True" />

              <!-- Animate the blur to make the object appear to
                   be comming out of the screen. Use a spline key
                   frame to make the blur animate suddenly at the 
                   very end of the animation. -->
              <DoubleAnimationUsingKeyFrames
               Storyboard.TargetName="myBlurBitmapEffect"
               Storyboard.TargetProperty="Radius" AutoReverse="True">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="30" KeyTime="0:0:1" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!-- Animate shadow depth of the effect. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="ShadowDepth"
               From="0" To="50" Duration="0:0:1"
               AutoReverse="True" />

              <!-- Animate shadow softness. As the object gets
                   farther away, the shadow gets softer. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="Softness"
               From="0" To="1" Duration="0:0:1"
               AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines Leuchteffekts am äußeren Rand eines Objekts

Gewusst wie: Anwenden eines Weichzeichnereffekts auf grafische Elemente

Gewusst wie: Erstellen eines visuellen Schlagschatteneffekts

Gewusst wie: Erstellen mehrerer visueller Effekte

Konzepte

Übersicht über Bitmapeffekte