CODEWITHSUNDEEP
wpfxaml
shady
shady

Reputation: 1106

WPF Storyboard animation isn't fluid

Here's what I'm trying to do:

Make control1 Visible, make control2 Collapsed, animate opacity from 1 to 0 on control 1 over .8 seconds.

immediately after that is done, do this:

Make control1 Collapsed, make control2 Visible, animate opacity from 0 to 1 on control2 over .8 seconds.

I just can't get it to be fluid and I'm out ideas. here's what I have:

<Storyboard x:Key="sb">
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.8000000" Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
        <DiscreteObjectKeyFrame KeyTime="00:00:00.8000000" Value="{x:Static Visibility.Collapsed}"/>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.8000000" Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="(UIElement.Opacity)">
        <LinearDoubleKeyFrame  KeyTime="00:00:00" Value="1"/>
        <LinearDoubleKeyFrame  KeyTime="00:00:00.8000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00.8000000" Duration="00:00:00.8000000" Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="00:00:00.8000000" Value="{x:Static Visibility.Visible}"/>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8000000" Duration="00:00:00.8000000" Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="(UIElement.Opacity)">
        <LinearDoubleKeyFrame  KeyTime="00:00:00.0000000" Value="0"/>
        <LinearDoubleKeyFrame  KeyTime="00:00:00.8000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Upvotes: 0

Views: 121

Answers (1)

Clemens
Clemens

Reputation: 128061

It isn't clear from your question why you would animate the Opacity and Visbility at the same time, but your problem is that the animation of the Visibility of the second control should start immediately, not after 0.8 seconds.

This should work:

<Storyboard>

    <ObjectAnimationUsingKeyFrames
        Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/>
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames
        Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Visible}"/>
    </ObjectAnimationUsingKeyFrames>

    <DoubleAnimation
        Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="Opacity"
        From="1" To="0" Duration="0:0:0.8"/>

    <DoubleAnimation
        Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="Opacity"
        From="0" To="1" BeginTime="0:0:0.8" Duration="0:0:0.8"/>

</Storyboard>

Upvotes: 1

Related Questions