WPF easing animation

Question

Hey all I am pretty new at creating a WPF in VS 2013. I am wanting this box to bounce & ease in/out.

The current code i have:

<BeginStoryboard x:Name="FadeInStoryBoard">
    <Storyboard>
       <DoubleAnimation Storyboard.TargetName="ZWindow" From="0.01" To="0.85" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8">
          <DoubleAnimation.EasingFunction>
             <ElasticEase Oscillations="5" Springiness="5" EasingMode="EaseInOut"/>
          </DoubleAnimation.EasingFunction>
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="ZWindow" From="0.85" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8" BeginTime="0:0:20" Name="boxFader">
          <DoubleAnimation.EasingFunction>
             <ElasticEase Oscillations="3" Springiness="5" EasingMode="EaseInOut"/>
          </DoubleAnimation.EasingFunction>
       </DoubleAnimation>
    </Storyboard>
</BeginStoryboard>

It currently looks very odd when showing due to it fading in/out. How can i take off the fading and just have it fade in when bouncing in/out?

Answer 1

Please try this,

<Rectangle Width="100"
               Height="100"
               VerticalAlignment="Bottom"
               Fill="Red">
        <Rectangle.RenderTransform>
            <TranslateTransform />
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
                            <EasingDoubleKeyFrame KeyTime="0:0:1"
                                                  Value="-200">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <ElasticEase />
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>