locked
c# Combine 2 animations on one property

    Question

  • I want to animate an x property 2 different ways on one storyboard.

    Eg, over 4 seconds I want to move the image from the right side of the screen to the left (X Value), I also want that movement to have a consistent wobble in it.  So combine a smoth translation from right to left, with a repeating wobble.

    The complier complains at me at runtime saying that I can't animate the same property twice.

    Should I quit trying to add two animations to one property or is there a way to do this?  Thanks.

                    DoubleAnimation rainX = new DoubleAnimation();
                    rainX.From = T.X;
                    rainX.To = T.X - (MainPage.ActualWidth*0.7);
                    rainX.Duration = new Duration(TimeSpan.FromMilliseconds(4000));
                    
                    DoubleAnimation rainXwobble = new DoubleAnimation();
                    QuadraticEase cEase = new QuadraticEase();
                    cEase.EasingMode = EasingMode.EaseInOut;
                    rainXwobble.EasingFunction = cEase;
                    rainXwobble.To = T.X - (MainPage.ActualWidth * 0.08);
                    rainXwobble.Duration = new Duration(TimeSpan.FromMilliseconds(600));
                    rainXwobble.AutoReverse = true;
                    rainXwobble.RepeatBehavior = RepeatBehavior.Forever;
    
    
                    //Add the X animation
                    Storyboard.SetTarget(rainX, T);
                    Storyboard.SetTargetProperty(rainX, "X");
                    translateRain.Children.Add(rainX);
                    //Add the X wobble - using a repeating animation.
                    Storyboard.SetTarget(rainXwobble, T);
                    Storyboard.SetTargetProperty(rainXwobble, "X");  //The ERROR is here, animating the same property twice
                    translateRain.Children.Add(rainXwobble);
    

    Sunday, August 10, 2014 2:32 PM

Answers

  • Hi CASchwarz,

    Here we have a existing animation that can achieve the same function as you required. Checkout BounceEase class, set the Bounces, Bounciness and EasingMode should be ok.

    Take a look at the sample: http://code.msdn.microsoft.com/windowsapps/Animations-f758de70

    Scenario three, choose :

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by CASchwarz Monday, August 11, 2014 12:19 PM
    Monday, August 11, 2014 7:15 AM
    Moderator

All replies

  • Hi CASchwarz,

    Here we have a existing animation that can achieve the same function as you required. Checkout BounceEase class, set the Bounces, Bounciness and EasingMode should be ok.

    Take a look at the sample: http://code.msdn.microsoft.com/windowsapps/Animations-f758de70

    Scenario three, choose :

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by CASchwarz Monday, August 11, 2014 12:19 PM
    Monday, August 11, 2014 7:15 AM
    Moderator
  • Thanks for this. I'll try tuning the bounciness and easing function so that I get a consistent bounce that doesn't ease out.
    Monday, August 11, 2014 12:21 PM