Is this just me or what? RepeatBehavior doesn't seem work for animations in Expression Blend 4. I have the following animation:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
Storyboard.TargetName="WaitDoc" RepeatBehavior="0:0:2">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
I expect this animation to run for 2 seconds, but instead it runs only once when I click Play button in Objects and Timeline pane. I have tried values like 5x too, getting the same behavior.
I don't want to run the entire project to test every minute change. The Play button SHOULD play it as defined. Am I missing something here?
EDIT: In addition, I just discovered that Blend also doesn't show any respect for BeginTime attribute.
Try this :
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children) [2].(RotateTransform.Angle)"
Storyboard.TargetName="WaitDoc" Duration="0:0:2" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
Related
I have a set of buttons in a grid on a Map/MapControl. I've been trying to figure out how to make it so that the buttons and the grid are usually invisible, but appear as soon as the user hovers their pointer over them. Suggestions?
http://msmvps.com/blogs/theproblemsolver/archive/2009/02/17/changing-the-mouseover-effect-on-a-silverlight-listbox.aspx
Here is an article that goes through a tutorial (using blend) to setup various Visual States. About 3/4 down the page there is a sample xaml snippet. Look for this section:
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
Instead of changing the scale, you could change the Opacity... There's no reason this can't be written in Visul Studio, for the Blend-Challenged (like myself).
Also, refer to http://jesseliberty.com/2010/07/09/visual-state-manager-a-z/ for a set of tutorials for using the huge capabilities of the Visial State Manager.
The storyBoard_Completed event is invoked in a delay of about half a second after the visual animation had finished.
Would be glad for some more eyes to check out my Storyboard XAML:
<Storyboard x:Key="blaAnimation" Completed="storyBoard_Completed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla1" Storyboard.TargetProperty="Offset" Completed="bla_Completed">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" x:Name="bla1StartKeyFrame"/>
<EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-20" x:Name="bla1Animation">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla2" Storyboard.TargetProperty="Offset" BeginTime="0:0:0.1" Completed="bla2_Completed">
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.1" x:Name="bla2StartKeyFrame"/>
<EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1.1">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="-20" x:Name="bla2Animation">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla3" Storyboard.TargetProperty="Offset" BeginTime="0:0:0.18" Completed="bla3_Completed">
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.2" x:Name="bla3StartKeyFrame"/>
<EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1.2">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-20" x:Name="bla3Animation">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Thanks in advance,
--Ran.
When in doubt - Blend it
Following on from comment trail (above), the end result is "If you have access to it (or can afford it), always use Expression Blend for creating animation storyboards".
Blend is the best way to learn animation which can get very complex quite easily. Blend also optimises certainly animations automatically for you.
As you know there is no support at all in VS 2010 for authoring animation, except with XAML, and that is error prone. It is also very hard to visualise multiple animations in your head with only text to go by :)
When button1 is clicked I want this sequence
RectangeA becomes visible
RectangeA opacity changed from 0 to 75% over lets say 3 seconds
ControlB becomes visible.
Steps 1 and 3 are easy with imperative code, but I'm assuming I need to learn how to use story boards to do step 2.
Here is the storyboard that describes your sequence:
<Storyboard x:Key="animate">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Opacity)">
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<LinearDoubleKeyFrame KeyTime="00:00:03" Value="0.75"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="control" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
You can trigger it in xaml through EventTrigger or in code through TryFindResource().
Here is the link on Animation Overview MSDN Article and you can find there answers on your questions on many WPF animations topics.
I have a problem with my Silverlight animation that I can't seem to fix. The problem seems to be well established, but the techniques used to solve it don't seem to work in my case.
Here is the storyboard code that I am using to animate a grid called "underGrid". underGrid is a base grid which I am applying a scale and location offset to in response to mouse input from the user, so that they can scale and move the grid in real time. The ResetGrid storyboard below simply animates from the current scale and location values back to scale {1, 1} and location {0, 0}, resetting the view for the user. I wanted to be able to apply this animation whenever the user clicks a reset button but it freezes the Scale and Translation transforms once it has run once (as discussed here: http://msdn.microsoft.com/en-us/library/aa970493.aspx). Which means that when the user then uses the mouse to move the grid, it doesn't move. I've tried everything I can think of to stop the animation from having an affect on the dependency properties. I've tried hooking the Completed event and trying (amongst other things), stopping the animation, seeking the animation to 0, looping through the ResetGrid Children and using StoryBoard.SetTarget(). I've also tried setting the FillBehavior.. No matter what I do nothing seems to make a difference, the Scale and Translation are always tapped and cannot be set again in user-code.
Can anyone suggest anything I can try that I've not listed above (drastic or otherwise :) )? All I want is the animation to have completely stopped and detached itself on Complete.
Storyboard XAML:
<Storyboard x:Name="ResetGrid">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
will ResetGrid.stop() work?
I used it in my applications and the animation was cut off straight away.
animation.stop will stop and reset, while animation.pause will just stop on where timeline it hit
if not u can put another animation of duration 0,
call this animation to place back the property
I've run into this issue before too... check out this thread on Silverlight.Net which I think you might find helpful:
http://forums.silverlight.net/forums/t/68888.aspx
I am focusing on silverlight animation (as my previous posts probably indicate), and one of the things I can't find out is how can I do a scaletransform to zoom into an object (so it appears it is coming towards you), but rather than on event initiation it goes from one size to another, I want it to gradually increase in size?
For example, if you put your hand in front of you and draw it near to you, it is gradually getting closer whereas if you abruptly pull it towards you and stop, it goes from being far to being near with no sense of an in beTWEEN state. I want to get the tweening, so an object can be zoomed and then zoom in but at a small, repetitive increment.
You can just animate the scale tranform
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The example above will double the height and width of an image over a period of two seconds.
Hope this helps.