Storyboard animation doesn't animate

Question

I've recently started learning WP8.1 and I'm currently trying to play around with animations.

What I'm trying to do is animating a splash screen like a book page: coming from the back and then, when it's covering the whole screen and you touch it, continuing to rotate as if you were turning a book page. The first part of the animation is OK but I don't know why the second part (a second storyboard) is not animated. After a bit, the rectangle just takes the last position it should take without being animated (that's ugly!).

Here are my storyboards (noting complicated):

<Storyboard x:Name="EndgameSplashInStoryboard">
            <!--<DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EndgameSplashGrid" d:IsOptimized="True"/>-->
            <DoubleAnimation Duration="0:0:0.3" By="70" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="EndgameSplashGrid" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="EndgameSplashOutStoryboard">
            <!--<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EndgameSplashGrid" d:IsOptimized="True"/>-->
            <DoubleAnimation Duration="0:0:0.3" By="70" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="EndgameSplashGrid" d:IsOptimized="True"/>
        </Storyboard>

I commented the opacity animations to simplify my animations. Here is the content that I want to animate:

<Grid x:Name="EndgameSplashGrid">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.Projection>
            <PlaneProjection x:Name="EndgameSplashProjection" RotationY="-70" CenterOfRotationX="0"/>
        </Grid.Projection>

        <Rectangle x:Name="EndgameSplashRectangle" Grid.RowSpan="2" Fill="{StaticResource PhoneAccentBrush}" Tapped="EndgameSplashRectangle_Tapped"/>
        <TextBlock x:Name="EndgameSplashText" Grid.Row="0" Text="victoire!" Style="{StaticResource EndgameSplashText}"/>
        <TextBlock x:Name="EndgameSplashSubtext" Grid.Row="1" TextWrapping="Wrap" Style="{StaticResource EndgameSplashSubtext}"
                   Text="Félicitations, vous avez trouvé le nombre en 7 essais :-)"/>
    </Grid>

If someone can see why this happens it would be very helpful :) Thank you, have a nice day!

What triggers the storyboard? I do not see how the annimations are invoked. — Scott Nimrod

Robin Robin · Accepted Answer · 2015-04-02T18:37:29

So I understand that the first par of the animation plays, but the second not? What if you put them in one storyboard, and in the second one set BeginTime="0:0:0.3"?

Edited: Oh, I just see, it is exactly the same animation, and you want it played twice? Then, you could just add the property RepeatBehavior="2x".

If you want two different animations one after the other on the same property, you can use a DoubleAnimationUsingKeyFrames.

Storyboard animation doesn't animate

1 Answers