none
Reverse not working. Blend 2 SP1

    Question

  • I'm using Blend 2 SP1.  and All I do is what the interface provide me which is Duplicate my animation and then Reverse it.
    But the reverse of this isn't really working.

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="GearSite.FlipperControl"
    	d:DesignWidth="192" d:DesignHeight="128" x:Name="Flipper">
    	<UserControl.Resources>
    		<Storyboard x:Name="RotateOn">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rotator" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
    			</DoubleAnimationUsingKeyFrames>
    			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Asset" Storyboard.TargetProperty="(UIElement.Visibility)">
    				<DiscreteObjectKeyFrame KeyTime="00:00:00.5000000">
    					<DiscreteObjectKeyFrame.Value>
    						<Visibility>Visible</Visibility>
    					</DiscreteObjectKeyFrame.Value>
    				</DiscreteObjectKeyFrame>
    			</ObjectAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Asset" Storyboard.TargetProperty="(UIElement.Opacity)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Canvas Height="116.952" HorizontalAlignment="Left" Margin="91.989,0.011,0,0" VerticalAlignment="Top" Width="124.132" RenderTransformOrigin="0.226,1" x:Name="Rotator">
    			<Canvas.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Canvas.RenderTransform>
    			<Path Height="89.812" Width="93.512" RenderTransformOrigin="0,1" Stretch="Fill" Stroke="#FF000000" Canvas.Left="31.056" Canvas.Top="33.008" Data="M317.58472,158.77193 L319.18924,200.39249 C319.02258,213.55916 325.74976,224.09688 319.5,239.5 C313.25024,254.90312 305.42487,241.24916 298.84152,241.08354 L276.83701,241.22435 C283.46402,227.97435 283.91949,246.95313 303.55515,207.20313 C323.1908,167.45314 312.33936,173.59918 317.58472,158.77193 z" x:Name="GroundMover">
    				<Path.RenderTransform>
    					<TransformGroup>
    						<ScaleTransform/>
    						<SkewTransform/>
    						<RotateTransform Angle="-45"/>
    						<TranslateTransform X="1.4141741055866248" Y="-0.585781081787303"/>
    					</TransformGroup>
    				</Path.RenderTransform>
    				<Path.Fill>
    					<LinearGradientBrush EndPoint="1.007,0.973" StartPoint="0.287,0.279">
    						<GradientStop Color="#FFFFFFFF"/>
    						<GradientStop Color="#FF247FDA" Offset="0.699"/>
    					</LinearGradientBrush>
    				</Path.Fill>
    			</Path>
    			<Canvas Height="117" Width="93" Canvas.Top="0.011" x:Name="Asset" Visibility="Collapsed">
    				<Image Height="93" Width="93" Clip="M92.901604,-3.5000019 L92.901604,120.5 L0.10159689,120.5 L0.10159689,-3.5000019 z" RenderTransformOrigin="0.5,0.5" Canvas.Top="11.991" Source="Login.jpg" Stretch="UniformToFill">
    					<Image.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform ScaleX="1.25"/>
    							<SkewTransform/>
    							<RotateTransform Angle="-90"/>
    							<TranslateTransform X="-93"/>
    						</TransformGroup>
    					</Image.RenderTransform>
    				</Image>
    				<Border BorderBrush="#FFFFF500" Height="116.989" x:Name="TextBorder" Width="28" Background="#FFC1ACAC" BorderThickness="1,1,1,1"/>
    				<TextBlock Height="25.452" x:Name="txtText" Width="114.818" RenderTransformOrigin="0,1" Canvas.Left="26.752" Canvas.Top="90.459" Text="Blues News" TextAlignment="Center" TextWrapping="Wrap">
    					<TextBlock.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform Angle="-90"/>
    							<TranslateTransform/>
    						</TransformGroup>
    					</TextBlock.RenderTransform>
    				</TextBlock>
    			</Canvas>
    		</Canvas>
    	</Grid>
    </UserControl>
     
    Saturday, September 27, 2008 5:53 PM

All replies

  • I've been able to make it work MANUALLY but its a pain in the.....
    This is what it looks like in blend.  See how the Angle is greyed

    Anyway all this to say that making a duplicate of my animation and using the reverse didn't work.   I had to do it manually.

    Is it normal

    Saturday, September 27, 2008 6:09 PM
  • Could you please explain the exact set of steps I need to do with the attached XAML? Things seems to be working for me for the following that I tried:

    a) try to select angle in the attached XAML

    b) Copy the storyboard and reverse it (and then select angle). Playing the animation works as expected (at least to me).

    Thanks,
    unni

    Sunday, September 28, 2008 9:22 PM
  • Easy.  Take this xaml, save it on your hard drive.  Open Blend 2 SP1, use the feature DUPLICATE and then REVERSE and look at your REVERTED ANIMATION and you'll see that it isn't really the reverse of your original. Oh and take out the image source since this will probably prevent you to load it correctly I presume

    If you need any other information let me know.

     

    Monday, September 29, 2008 5:54 AM
  • Good feedback. Here is what our team had to say about this issue:

    When Blend reverses a Storyboard it does so one animation at a time. For each animation to be reversed, Blend looks to see whether there's a keyframe at time 0. If not then the animation is considered a handoff animation. When an already in-flight animation hands off to a 'handoff animation', because there is no keyframe at time 0, a gradual change from the current value to the first keyframe value takes place. Blend reverses a handoff animation differently than it does an animation that has a keyframe at time 0. Also, if you have animations with different effective lengths then they will not reverse together.

    In your case you need to do two things to get this Storyboard to reverse as you expect. First, set Asset's Opacity to 0 on the element itself to match the Collapsed Visibility it already has set (during reversal, this will tell Blend what you want the final Opacity value to be after running the Storyboard in reverse). Next you need to make all the animations the same length. Open the Storyboard and select all three animations (expand Rotator and Asset and in the object tree CTRL+click RenderTransform, Opacity and Visibility) then Go To First Frame > Record Keyframe, Go To Last Frame > Record Keyframe. The result so far is effectively what you already had except the animations are no longer handoff animations. Now dupe and reverse. If you want both animations to be handoff then just go and delete any time==0 keyframe.

     

    Tuesday, September 30, 2008 6:42 PM
  • Wait a minute.  I have to understand those 2 BIG paragraph.  Ok I will get back to you with the result of the work made against this explaination.
    Meanwhile.  Thank you for this information...

     

    Tuesday, September 30, 2008 7:22 PM
  • Ouch.  The pill is hard to swallow.  I did make a change on the animation so everything has a starting keyframe and a ending keyframe + if I have 2 animations which do not start at the same place but different places in time.  I expect the reverse to take in consideration the fact that It should start with the animation that finished last and finish with the first animation that started prior to reverse.

    All this is too much.  I mean,  I shouldn't have to care about making things in a certain way because the developpers consider that this is the way it works but if I do a DUPLICATE of an animation,  I expect to have the REVERSE of it REVERTED.

    Should it be because I didn' make a normal animation at first ?

    Look at the image bellow now.  This is the original animation that works perfectly with keyframes at 0 everywhere.  When I try to reverse it,  the RenderTransform isn't reverted at all but it just move at the end of the total animation and it STAYS as the original (NOT REVERSED) and this doesn't make any sence.

    Abnormal reversing

    Here's the xaml of this image :

     

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="GearSite.FlipperControl"
    	d:DesignWidth="192" d:DesignHeight="128" x:Name="Flipper" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
    
    	<UserControl.Resources>
    		<Storyboard x:Name="MouseOn">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rotator" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
    			</DoubleAnimationUsingKeyFrames>
    			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Asset" Storyboard.TargetProperty="(UIElement.Visibility)">
    				<DiscreteObjectKeyFrame KeyTime="00:00:01.4000000">
    					<DiscreteObjectKeyFrame.Value>
    						<Visibility>Visible</Visibility>
    					</DiscreteObjectKeyFrame.Value>
    				</DiscreteObjectKeyFrame>
    			</ObjectAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Asset" Storyboard.TargetProperty="(UIElement.Opacity)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Canvas Height="116.952" HorizontalAlignment="Left" Margin="91.989,0.011,0,0" VerticalAlignment="Top" Width="124.132" RenderTransformOrigin="0.226,1" x:Name="Rotator" Cursor="Hand">
    			<Canvas.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform Angle="0"/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Canvas.RenderTransform>
    			<Path Height="89.812" Width="93.512" RenderTransformOrigin="0,1" Stretch="Fill" Stroke="#FF000000" Canvas.Left="31.056" Canvas.Top="33.008" Data="M317.58472,158.77193 L319.18924,200.39249 C319.02258,213.55916 325.74976,224.09688 319.5,239.5 C313.25024,254.90312 305.42487,241.24916 298.84152,241.08354 L276.83701,241.22435 C283.46402,227.97435 283.91949,246.95313 303.55515,207.20313 C323.1908,167.45314 312.33936,173.59918 317.58472,158.77193 z" x:Name="GroundMover">
    				<Path.RenderTransform>
    					<TransformGroup>
    						<ScaleTransform/>
    						<SkewTransform/>
    						<RotateTransform Angle="-45"/>
    						<TranslateTransform X="1.4141741055866248" Y="-0.585781081787303"/>
    					</TransformGroup>
    				</Path.RenderTransform>
    				<Path.Fill>
    					<LinearGradientBrush EndPoint="1.007,0.973" StartPoint="0.287,0.279">
    						<GradientStop Color="#FFFFFFFF"/>
    						<GradientStop Color="#FF247FDA" Offset="0.699"/>
    					</LinearGradientBrush>
    				</Path.Fill>
    			</Path>
    			<Canvas Height="117" Width="93" Canvas.Top="0.011" x:Name="Asset" Visibility="Visible" Opacity="0">
    				<Image Height="93" Width="93" Clip="M92.901604,-3.5000019 L92.901604,120.5 L0.10159689,120.5 L0.10159689,-3.5000019 z" RenderTransformOrigin="0.5,0.5" Canvas.Top="11.991" Source="Login.jpg" Stretch="UniformToFill" x:Name="imgIcon">
    					<Image.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform ScaleX="1.25"/>
    							<SkewTransform/>
    							<RotateTransform Angle="-90"/>
    							<TranslateTransform X="-93"/>
    						</TransformGroup>
    					</Image.RenderTransform>
    				</Image>
    				<Border BorderBrush="#FFFFF500" Height="116.989" x:Name="TextBorder" Width="28" Background="#FFC1ACAC" BorderThickness="1,1,1,1"/>
    				<TextBlock Height="21.102" x:Name="txtText" Width="114.818" RenderTransformOrigin="0,1" Canvas.Left="26.752" Canvas.Top="94.809" Text="Blues News" TextAlignment="Center" TextWrapping="Wrap" FontFamily="Arial" FontSize="14" VerticalAlignment="Center">
    					<TextBlock.RenderTransform>
    						<TransformGroup>
    							<ScaleTransform/>
    							<SkewTransform/>
    							<RotateTransform Angle="-90"/>
    							<TranslateTransform/>
    						</TransformGroup>
    					</TextBlock.RenderTransform>
    				</TextBlock>
    			</Canvas>
    		</Canvas>
    	</Grid>
    </UserControl>
     
    Tuesday, September 30, 2008 7:45 PM
  • Here's the image of the reverse I did manually.  This is what Blend 2 should do :

    Manuel reverse

    Not only it should look like this but the RenderTransform should start AFTER the end of the Opacity animation.

     

    Tuesday, September 30, 2008 7:48 PM
  • Finally I understand that if I do make all the animation starting at the same place and finishing at the same place, the reverse will work but wow that imply manipulating the keys each time we do animations ?  I'm sure they can put a little more intelligence in there so we don't have to make this extra work specially when we'll have to work with the product on a very regular basis.

    Here's the animation that can be reversed without any intervention but again.  We shouldn't care about adding keyframes and manipulating the keys to make sure our animation will reverse correctly...

    All the same

    Tuesday, September 30, 2008 7:56 PM
  • Thanks for the feedback GearWorld, this could be a lot better than it is, it is a tactical implementation that works well in many common cases. We could do a more intelligent job of doing the reversal for more complex cases.

    Tuesday, September 30, 2008 9:27 PM
  • Will you ?

    Wednesday, October 01, 2008 2:11 PM
  • I am a designer and I also have the same issue when creating reverse animation.

    I will say this "reverse" feature is a "FAIL". Why?

    We designers only expect when clicking Duplicate and Reverse, simplytwo steps, and it should be done. If this requires extra one or two steps to make it work properly, that means this feature is not designed/developed properly. It won't make our live easier but only create a lot of frustration when people use Blend.

    Isn't Blend for Designer?

     

    Monday, October 27, 2008 3:10 PM
  •  Alright the fix worked for me.

    Adding keyframes at end and begining of the storyboard for each elements that are animated.

    Now the problem is to find those elements. I think it is really stupid that the red arrow only appears when you've expand the direct parent of the animated element.Is there another way to find all animated elements in a big structure ?

    Friday, November 21, 2008 10:23 AM