It's been a while since I played with storyboards, but looking at my code
where I'm doing something similar I'm actually using another storyboard to
reverse the original animation, although in my case the hide animation is a
little different (faster and no easing function).
I just threw together a sample app and tried various approaches from google
/ stack overflow but none of them work.
I played around some more and it has to do with the Timeline.FillBehavior
property that defaults to HoldEnd. If this is set to Stop (on the
Storyboard or the animations), then the animated properties revert to their
original value at the end of the timeline. Doing this, you can kick off the
storyboard also assign the new values to the control at the same time so
that when the timeline ends the values remain. To reset, you can simply
reset the control's properties. See below...
<Window.Resources> <ResourceDictionary> <Storyboard
x:Key="testStoryboard" FillBehavior="Stop"> <DoubleAnimation
Duration="0:0:1" From="0" To="1" Storyboard.TargetProperty="Opacity"
/> <DoubleAnimation Duration="0:0:1" From="0" To="1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
/> </Storyboard> <Storyboard x:Key="testReverseStoryboard">
<DoubleAnimation Duration="0:0:0" From="1" To="0"
Storyboard.TargetProperty="Opacity" /> <DoubleAnimation
Duration="0:0:0" From="1" To="0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
/> </Storyboard> </ResourceDictionary> </Window.Resources>
<!-- ... --> <Image x:Name="testImage" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="32"
Height="32" Margin="5" Source="{StaticResource testImage}">
<Image.RenderTransform> <TransformGroup>
<RotateTransform CenterX="24" CenterY="24" /> <ScaleTransform
CenterX="24" CenterY="24" /> </TransformGroup>
</Image.RenderTransform> </Image>
private void Animate()
{
(Resources["testStoryboard"] as Storyboard).Begin(testImage);
testImage.Opacity = 1;
var transform = ((testImage.RenderTransform as
TransformGroup).Children[1] as ScaleTransform);
transform.ScaleX = 1;
}
private void Reset()
{
testImage.Opacity = 0;
var transform = ((testImage.RenderTransform as
TransformGroup).Children[1] as ScaleTransform);
transform.ScaleX = 0;
}
Or you could just use another storyboard.
On Thu, Jul 7, 2011 at 2:23 PM, Greg Keogh <[email protected]> wrote:
> I have an animation that zooms a logo image into view. The Storyboard (not
> shown) begins and animates the Angle, ScaleX and ScaleY values creating a
> nice spin and zoom-out effect. The trouble is, I can’t set the Scale values
> back to 0.0 again so that the image is hidden and the animation is ready to
> being again. The control is defined like this:****
>
> ** **
>
> <Image x:Name="imgWatermark" Width="500" Height="375">****
>
> <Image.RenderTransform>****
>
> <TransformGroup>****
>
> <RotateTransform Angle="0" CenterX="250" CenterY="187" />****
>
> <ScaleTransform CenterX="250" CenterY="187" ScaleX="0.0" ScaleY
> ="0.0"/>****
>
> </TransformGroup>****
>
> </Image.RenderTransform>****
>
> </Image>****
>
> ** **
>
> Later I do this to “hide” the image again ready for another zoom out.****
>
> ** **
>
> ScaleTransform st = ((TransformGroup
> )imgWatermark.RenderTransform).Children[1] as ScaleTransform;****
>
> st.ScaleX = 0.0;****
>
> st.ScaleY = 0.0;****
>
> ** **
>
> However, this code results in no visible effect. What trick am I missing?*
> ***
>
> ** **
>
> Greg****
>
> ** **
>
> ** **
>
> ** **
>
