Problem in trying to set up a sprite animation

06-18-2008 5:07 AM |

Hi everyone. I came across a visual problem when I try to emulate a sprite animation (displaying images one after eachother) using blend. I'm putting my images in a container and by default I set their visibility status to collapsed and then I create a visual state where I change the images' visibility states frame by frame. The result is a animated image when set to this certain state. The animation displays fine in blend editor but when I display it in the site all the images visibility status remain visible and image lefts a trail while animating. Sample xaml code is below. What might be the problem?

<vsm:VisualState x:Name="CanEvRollOver">

<Storyboard RepeatBehavior="Forever">

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev0" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.0250000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev1" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.0250000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Visible</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="00:00:00.0500000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev2" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.0500000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Visible</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="00:00:00.0750000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev3" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.0750000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Visible</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev4" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Visible</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="00:00:00.1250000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canev5" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.1250000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Visible</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="00:00:00.1500000">

<DiscreteObjectKeyFrame.Value>

<vsm:Visibility>Collapsed</vsm:Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>