locked
Blend is unable to plau animation with keyframes fluidly. RRS feed

  • Question

  • If I have state not using keyframe, Blend is playing the animation fluidly however if I'm using keyframe it is not.
    Could you tell me if it's a bug or it's normal and we have to live with it ?

     

        		<VisualStateGroup x:Name="LanguageChoice" ei:ExtendedVisualStateManager.UseFluidLayout="True">
        			<VisualStateGroup.Transitions>
        				<VisualTransition GeneratedDuration="0:0:0.5"/>
        			</VisualStateGroup.Transitions>
        			<VisualState x:Name="Normal"/>
        			<VisualState x:Name="ShowLanguageChoice">
        				<Storyboard>
        					<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="lstLanguage">
        						<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-134"/>
        						<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
        					</DoubleAnimationUsingKeyFrames>
        					<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lstLanguage">
        						<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        						<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.995"/>
        					</DoubleAnimationUsingKeyFrames>
        				</Storyboard>
        			</VisualState>
        		</VisualStateGroup>

     
    • Edited by GearWorld Friday, August 17, 2012 3:48 PM
    Friday, August 17, 2012 3:48 PM

Answers

  • It appears that the SL5 preview release of Blend is animating the wrong properties in this case, possibly because the fluid layout mode is on.

    If you do the same operations in Blend 4, it applies a rendertransform, but in your case it tries to animate the margin/layout properties. If you turn off fluid layout mode before you make the changes, it appears to work correctly.

    • Marked as answer by GearWorld Tuesday, August 21, 2012 7:27 PM
    Tuesday, August 21, 2012 3:03 PM
    Moderator

All replies

  • What isn't showing as you expect it? Does it work correctly when you run the program (not in Blend)?
    Monday, August 20, 2012 3:48 PM
    Moderator
  • When using the keyframe (meaning adding a keyframe at 0 and moving the yellow marker to a position and then doing the animation) so we have an animation with keyframes, this way when you select your state it's not fluid.  as if you would not use the keyframe way but just start a new state

    Those icons for us to see the animation isn't working when we use the keyframes

    For instence switching from Normal to ShowLanguageChoice, would normally show the animation fluidly as it does anyway when you do a state without keyframing.  But when you use keyframes, this animation is broken and doesn't show.  Instead it shows nothing at all in fact.

    Monday, August 20, 2012 4:03 PM
  • Is the problem only in Blend or does it happen when you run your program as well?
    Monday, August 20, 2012 5:32 PM
    Moderator
  • Here's a video.  In this video you'll see 2 HUGE problem.

    1) When using keyframes to make the animation, the animation doesn't even work nor in Blend nor while running
    2) When not using keyframes to make the animation, the animation shows all right in blend but is somewhat weird while running.

    See for yourself : http://sdrv.ms/NZQh4u

    Tuesday, August 21, 2012 9:44 AM
  • It appears that the SL5 preview release of Blend is animating the wrong properties in this case, possibly because the fluid layout mode is on.

    If you do the same operations in Blend 4, it applies a rendertransform, but in your case it tries to animate the margin/layout properties. If you turn off fluid layout mode before you make the changes, it appears to work correctly.

    • Marked as answer by GearWorld Tuesday, August 21, 2012 7:27 PM
    Tuesday, August 21, 2012 3:03 PM
    Moderator
  • Turning fluid layout works
    Where is that option in Blend workspace ?  I've been forced to go in xaml to turn it off
    Also, what do we loose by turning it off ?

    And should I turn this off for every single animation I do ?

    Tuesday, August 21, 2012 7:28 PM
  • It is one of the buttons you have circled in your image above, in your video you clicked it on.

    Generally you only need it when you are trying to animate properties that are difficult to animate, such as changing grid row/col, things that have only a discrete step between them. It is meant to help make those transitions look better.

    Tuesday, August 21, 2012 8:08 PM
    Moderator
  • Now I understand.  Thank you very much

    • Edited by GearWorld Wednesday, August 22, 2012 9:11 AM
    Wednesday, August 22, 2012 9:10 AM
  • The one in the upper right turns on previews, the others turn on "Fluid Layout Mode" which uses a custom VSM implementation.

    Whoops, just realized I was replying to your original text, looks like you already figured that out.

    Wednesday, August 22, 2012 2:22 PM
    Moderator