I have created a Storyboard to animate an Image Control which is being programmatically placed on my Canvas. The storyboard was created in Expression Blend.
When I play the Storyboard, the image vanishes and animates somewhere else (I eventually see the image control flying in at the end). It doesn't animate where I placed the image in the first place. The Storyboard works, but it doesn't animate where I WANT it to animate. The Control is suppose to animate right at the bottom of the screen and to the right of a particular image. That's why I change the location of the image via code.
Here is the xml:
<Storyboard x:Name="sbBagExit">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="11"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="10.9973"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0" Value="332"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="332"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="332"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0" Value="-16"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="169.983"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbBagDrop">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0" Value="-172"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="332.001"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="344"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="332"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0" Value="-8"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-8"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-8"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.829"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="imgBag">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The second Storyboard happens straight after the first one.
I've been scratching my head over this for a good two weeks.... Can anyone see what I can't?
Thank you very much in advance.
Because you used Blend to generate the animations, Blend based the values for the From and To properties on the coordinates and the layout of the element you used in Blend.
That is including its container and margins.
Because you did not specify the needed coordinates I can't tell you what is wrong.
I would start by changing the TranslateX and TranslateY to find out what they do and when they do what I want them to do.