Animation works just first time

Question

I would like to do a rotation on an object.... the problem is that the animation work just first time! It should work every time i tap the object...

Here the code:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:5">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:5" To="Gira" x:Name="VT2">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition From="Gira" GeneratedDuration="0:0:5" x:Name="VT1">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Gira">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                                     Storyboard.TargetName="image" d:IsOptimized="True" RepeatBehavior="Forever" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Here the control to animate:

<Image x:Name="image" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Assets/square.png" Height="450" RenderTransformOrigin="0.5,0.5" Tap="image_Tap">
       <Image.RenderTransform>
            <CompositeTransform />
       </Image.RenderTransform>

       <i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
                <ec:GoToStateAction x:Name="StateGiraTap" StateName="Gira"/>
            </i:EventTrigger>
       </i:Interaction.Triggers>

</Image>

And here the code behind:

void image_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    System.Windows.Interactivity.EventTrigger eventTrigger = System.Windows.Interactivity.Interaction.GetTriggers(image)[0] as System.Windows.Interactivity.EventTrigger;
    Microsoft.Expression.Interactivity.Core.GoToStateAction action = eventTrigger.Actions[0] as Microsoft.Expression.Interactivity.Core.GoToStateAction;

    action.UseTransitions = true;

    Gira.Storyboard.Seek(TimeSpan.Zero);
    Gira.Storyboard.Begin();
}

First time it work, from second time I see just the final result without animation... Can anyone help me plz?

Thank you...

Answer 1

You're setting it to a state, and it's staying in that state. Instead just have your Storyboard, and just trigger it instead of having it in a defunct VisualState. More like;

<Object.Resources>
  <Storyboard x:Name="Gira">
    <DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                                     Storyboard.TargetName="image" d:IsOptimized="True" RepeatBehavior="Forever" />
  </Storyboard>
</Object.Resources>

Then fire it off.

<i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
                <ec:ControlStoryboardAction Storyboard="{StaticResource Gira}"/>
                <!--<ec:GoToStateAction x:Name="StateGiraTap" StateName="Gira"/>-->
            </i:EventTrigger>
</i:Interaction.Triggers>

Hope this helps.