Nasıl yapılır: Gradyan Duraklarının Konumuna veya Rengine Animasyon Ekleme

Bu örnekte nesnelerin ve nesnelerine Color animasyonu nasıl Offset animasyonu ve ardından animasyonu ve ardından nasıl animasyonlar sızan bir örnek GradientStop olduğu gösterir.

Örnek

Aşağıdaki örnek, bir içinde üç gradyan duraklarına animasyonlar LinearGradientBrush sağlar. Örnekte, her biri farklı bir gradyan durdurma özelliğine animasyonu olan üç animasyonu kullanır:

  • İlk animasyon olan bir , ilk gradyan durdurmanın DoubleAnimation Offset 0,0 ile 1,0 arasında ve ardından 0,0'a geri animasyonunu sağlar. Sonuç olarak gradyan içindeki ilk renk, dikdörtgenin sol tarafından sağ tarafına, sonra da sol tarafa geri kaydırıyor.

  • İkinci animasyon olan bir , ikinci gradyan durdurmanın ile arasında ve ColorAnimation sonra da olarak geri doğru hareket Color Purple Yellow Purple eder. Sonuç olarak gradyandaki ortadaki renk mordan sarıya ve mora döner.

  • Üçüncü animasyon olan başka bir , üçüncü gradyan durdurmanın opaklıklarına -1 ve sonra geri ColorAnimation Color animasyonu sağlar. Sonuç olarak, gradyanın üçüncü rengi kaybolur ve sonra tekrar opak hale gelir.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace BrushesIntroduction
{
    public class GradientStopAnimationExample : Page
    {
        public GradientStopAnimationExample()
        {
            Title = "GradientStop Animation Example";
            Background = Brushes.White;

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

            // Create a rectangle. This rectangle will
            // be painted with a gradient.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 200;
            aRectangle.Height = 100;
            aRectangle.Stroke = Brushes.Black;
            aRectangle.StrokeThickness = 1;

            // Create a LinearGradientBrush to paint
            // the rectangle's fill.
            LinearGradientBrush gradientBrush = new LinearGradientBrush();

            // Create gradient stops for the brush.
            GradientStop stop1 = new GradientStop(Colors.MediumBlue, 0.0);
            GradientStop stop2 = new GradientStop(Colors.Purple, 0.5);
            GradientStop stop3 = new GradientStop(Colors.Red, 1.0);

            // Register a name for each gradient stop with the
            // page so that they can be animated by a storyboard.
            this.RegisterName("GradientStop1", stop1);
            this.RegisterName("GradientStop2", stop2);
            this.RegisterName("GradientStop3", stop3);

            // Add the stops to the brush.
            gradientBrush.GradientStops.Add(stop1);
            gradientBrush.GradientStops.Add(stop2);
            gradientBrush.GradientStops.Add(stop3);

            // Apply the brush to the rectangle.
            aRectangle.Fill = gradientBrush;

            //
            // Animate the first gradient stop's offset from
            // 0.0 to 1.0 and then back to 0.0.
            //
            DoubleAnimation offsetAnimation = new DoubleAnimation();
            offsetAnimation.From = 0.0;
            offsetAnimation.To = 1.0;
            offsetAnimation.Duration = TimeSpan.FromSeconds(1.5);
            offsetAnimation.AutoReverse = true;
            Storyboard.SetTargetName(offsetAnimation, "GradientStop1");
            Storyboard.SetTargetProperty(offsetAnimation,
                new PropertyPath(GradientStop.OffsetProperty));

            //
            // Animate the second gradient stop's color from
            // Purple to Yellow and then back to Purple.
            //
            ColorAnimation gradientStopColorAnimation = new ColorAnimation();
            gradientStopColorAnimation.From = Colors.Purple;
            gradientStopColorAnimation.To = Colors.Yellow;
            gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5);
            gradientStopColorAnimation.AutoReverse = true;
            Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2");
            Storyboard.SetTargetProperty(gradientStopColorAnimation,
                new PropertyPath(GradientStop.ColorProperty));

            // Set the animation to begin after the first animation
            // ends.
            gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3);

            //
            // Animate the third gradient stop's color so
            // that it becomes transparent.
            //
            ColorAnimation opacityAnimation = new ColorAnimation();

            // Reduces the target color's alpha value by 1,
            // making the color transparent.
            opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F);
            opacityAnimation.Duration = TimeSpan.FromSeconds(1.5);
            opacityAnimation.AutoReverse = true;
            Storyboard.SetTargetName(opacityAnimation, "GradientStop3");
            Storyboard.SetTargetProperty(opacityAnimation,
                new PropertyPath(GradientStop.ColorProperty));

            // Set the animation to begin after the first two
            // animations have ended.
            opacityAnimation.BeginTime = TimeSpan.FromSeconds(6);

            // Create a Storyboard to apply the animations.
            Storyboard gradientStopAnimationStoryboard = new Storyboard();
            gradientStopAnimationStoryboard.Children.Add(offsetAnimation);
            gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation);
            gradientStopAnimationStoryboard.Children.Add(opacityAnimation);

            // Begin the storyboard when the left mouse button is
            // pressed over the rectangle.
            aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                gradientStopAnimationStoryboard.Begin(this);
            };

            StackPanel mainPanel = new StackPanel();
            mainPanel.Margin = new Thickness(10);
            mainPanel.Children.Add(aRectangle);
            Content = mainPanel;
        }
    }
}

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

Namespace BrushesIntroduction
    Public Class GradientStopAnimationExample
        Inherits Page
        Public Sub New()
            Title = "GradientStop Animation Example"
            Background = Brushes.White

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

            ' Create a rectangle. This rectangle will
            ' be painted with a gradient.
            Dim aRectangle As New Rectangle()
            aRectangle.Width = 200
            aRectangle.Height = 100
            aRectangle.Stroke = Brushes.Black
            aRectangle.StrokeThickness = 1

            ' Create a LinearGradientBrush to paint
            ' the rectangle's fill.
            Dim gradientBrush As New LinearGradientBrush()

            ' Create gradient stops for the brush.
            Dim stop1 As New GradientStop(Colors.MediumBlue, 0.0)
            Dim stop2 As New GradientStop(Colors.Purple, 0.5)
            Dim stop3 As New GradientStop(Colors.Red, 1.0)

            ' Register a name for each gradient stop with the
            ' page so that they can be animated by a storyboard.
            Me.RegisterName("GradientStop1", stop1)
            Me.RegisterName("GradientStop2", stop2)
            Me.RegisterName("GradientStop3", stop3)

            ' Add the stops to the brush.
            gradientBrush.GradientStops.Add(stop1)
            gradientBrush.GradientStops.Add(stop2)
            gradientBrush.GradientStops.Add(stop3)

            ' Apply the brush to the rectangle.
            aRectangle.Fill = gradientBrush

            '
            ' Animate the first gradient stop's offset from
            ' 0.0 to 1.0 and then back to 0.0.
            '
            Dim offsetAnimation As New DoubleAnimation()
            offsetAnimation.From = 0.0
            offsetAnimation.To = 1.0
            offsetAnimation.Duration = TimeSpan.FromSeconds(1.5)
            offsetAnimation.AutoReverse = True
            Storyboard.SetTargetName(offsetAnimation, "GradientStop1")
            Storyboard.SetTargetProperty(offsetAnimation, New PropertyPath(GradientStop.OffsetProperty))

            '
            ' Animate the second gradient stop's color from
            ' Purple to Yellow and then back to Purple.
            '
            Dim gradientStopColorAnimation As New ColorAnimation()
            gradientStopColorAnimation.From = Colors.Purple
            gradientStopColorAnimation.To = Colors.Yellow
            gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5)
            gradientStopColorAnimation.AutoReverse = True
            Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2")
            Storyboard.SetTargetProperty(gradientStopColorAnimation, New PropertyPath(GradientStop.ColorProperty))

            ' Set the animation to begin after the first animation
            ' ends.
            gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3)

            '
            ' Animate the third gradient stop's color so
            ' that it becomes transparent.
            '
            Dim opacityAnimation As New ColorAnimation()

            ' Reduces the target color's alpha value by 1, 
            ' making the color transparent.
            opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F)
            opacityAnimation.Duration = TimeSpan.FromSeconds(1.5)
            opacityAnimation.AutoReverse = True
            Storyboard.SetTargetName(opacityAnimation, "GradientStop3")
            Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(GradientStop.ColorProperty))

            ' Set the animation to begin after the first two
            ' animations have ended. 
            opacityAnimation.BeginTime = TimeSpan.FromSeconds(6)

            ' Create a Storyboard to apply the animations.
            Dim gradientStopAnimationStoryboard As New Storyboard()
            gradientStopAnimationStoryboard.Children.Add(offsetAnimation)
            gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation)
            gradientStopAnimationStoryboard.Children.Add(opacityAnimation)

            ' Begin the storyboard when the left mouse button is
            ' pressed over the rectangle.
            AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) gradientStopAnimationStoryboard.Begin(Me)

            Dim mainPanel As New StackPanel()
            mainPanel.Margin = New Thickness(10)
            mainPanel.Children.Add(aRectangle)
            Content = mainPanel
        End Sub
    End Class
End Namespace
<Page  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="GradientStop Animation Example"
  Background="White">
  <StackPanel Margin="10">

    <Rectangle
      Width="200" 
      Height="100" 
      Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush>
          <GradientStop x:Name="GradientStop1" Color="MediumBlue" Offset="0.0" />
          <GradientStop x:Name="GradientStop2" Color="Purple" Offset="0.5" />
          <GradientStop x:Name="GradientStop3" Color="Red" Offset="1.0" />
        </LinearGradientBrush>
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="GradientStop1"
                Storyboard.TargetProperty="Offset"
                From="0.0" To="1.0" Duration="0:0:1.5"
                AutoReverse="True" />
              <ColorAnimation 
                Storyboard.TargetName="GradientStop2"
                Storyboard.TargetProperty="Color"
                From="Purple" To="Yellow" 
                Duration="0:0:1.5"
                AutoReverse="True"
                BeginTime="0:0:3" />
              <ColorAnimation 
                Storyboard.TargetName="GradientStop3"
                Storyboard.TargetProperty="Color" 
                Duration="0:0:1.5" 
                AutoReverse="True"
                BeginTime="0:0:6">
                <ColorAnimation.By>
                  <Color ScA="-1" ScR="0" ScB="0" ScG="0" />
                </ColorAnimation.By>
              </ColorAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    
  </StackPanel>
</Page>

Bu örnekte bir LinearGradientBrush kullanılır, ancak bir içindeki nesnelere animasyon animasyonu GradientStop vermek için işlem RadialGradientBrush aynıdır.

Ek örnekler için bkz. Fırça Örneği.

Ayrıca bkz.