c# - Double Animation - What is TranslateTransform "Width Change" Definition in C# UWP?

Question

I am using MSDN example to setup the animation of Width of a Rectangle in C3 UWP. Here is the code of the sample:

private void Create_And_Run_Animation()
    {

        // Create a red rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 0;
        myRectangle.Height = 20;
        SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
        myRectangle.Fill = myBrush;

        // Create the transform
        TranslateTransform stretchTransform = new TranslateTransform();
        stretchTransform.X = 0;
        stretchTransform.Y = 0;
        myRectangle.RenderTransform = stretchTransform;

        // Add the rectangle to the tree.
        DefaultLayout.Children.Add(myRectangle);
        myRectangle.Name = "myWidthAnimatedRectangle";
        // Create a duration of 2 seconds.
        Duration duration = new Duration(TimeSpan.FromSeconds(2));
        // Create two DoubleAnimations and set their properties.
        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
        myDoubleAnimation.From = 0.0;

        myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
        Storyboard justintimeStoryboard = new Storyboard();
        justintimeStoryboard.Duration = duration;
        justintimeStoryboard.Children.Add(myDoubleAnimation);

        Storyboard.SetTarget(myDoubleAnimation, stretchTransform);

        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

        // Set the X  property of the Transform to be the target property

        Storyboard.SetTargetProperty(myDoubleAnimation, "X");
        myDoubleAnimation.To = 300.0;


        // Make the Storyboard a resource.
        DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
        // Begin the animation.
        justintimeStoryboard.Begin();
    }

However, on Build, what it does is move the object and not change its width. I need to animate width change.

Answer 1

但是，在 Build 中，它所做的是移动对象而不是更改其宽度。我需要动画宽度变化。

您的代码用于动画矩形的位置，而不是它的宽度。您可以为其宽度指定默认值并为其ScaleTransform设置动画。

如果你必须使用DoubleAnimation动画它的宽度，你需要设置EnableDependentAnimation为true。请检查以下代码示例：

private void Create_And_Run_Animation()
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 10;
    myRectangle.Height = 20;
    SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    DefaultLayout.Children.Add(myRectangle);
    myRectangle.Name = "myWidthAnimatedRectangle";

    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 0.0;
    myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));

    Storyboard justintimeStoryboard = new Storyboard();
    Storyboard.SetTargetProperty(myDoubleAnimation, "(Rectangle.Width)");
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    myDoubleAnimation.To = 300.0;
    myDoubleAnimation.EnableDependentAnimation = true;
    justintimeStoryboard.Children.Add(myDoubleAnimation);

    // Make the Storyboard a resource.
    DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    // Begin the animation.
    justintimeStoryboard.Begin();
}