XAML中的故事板动画 [英] Storyboard animation in XAML

问题描述

WPF中的故事板动画



我在WPF故事板上写了一个动画：以下是代码：



---------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -

 <   window     x：class   =  animfromcodebehindWpfApplication1.MainWindow    xmlns：x   = ＃unknown >  
 xmlns = http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 Title =中号ainWindowHeight =350Width =525> 
 <   window.resources  >  
 <   storyboard     x：key   =  Storyboard1 >  
 <   doubleanimationusingkeyframes     storyboard.targetproperty   = < span class =code-keyword>（UIElement.RenderTransform）。（TransformGroup.Children）[3]。（TranslateTransform.X）    storyboard.targetname   =  rectangle1 >  
 <   easingdoublekeyframe     keytime   =  0：0：1    value   =   -  36    /  >  
 <   / doubleanimationusingkeyframes  >  
 <   doubleanimationusingkeyframes     storyboard.targetproperty   = （UIElement.RenderTransform）。（TransformGroup.Child ren）[3]。（TranslateTransform.Y）    storyboard.targetname   =  rectangle1 >  
 < span class =code-keyword><   easingdoublekeyframe     keytime   =  0：0：1    value   =  -46    /  >  
 <   / doubleanimationusingkeyframes  >  
 <   doubleanimationusingkeyframes     storyboard.targetproperty   =  （UIElement.RenderTransform）。（TransformGroup.Children）[2]。（RotateTransform.Angle）    storyboard.targetname   =  rectangle1 >  
 <   easingdoublekeyframe     keytime   =  0：0：1    value   =  359.484    /  >  
 <   / doubleanimationusingkeyframes  >  
 <   / storyboard  >  
 <   / window.resources  >  
 <   window.triggers  >  
 <   eventtrigger     routedevent   =  FrameworkElement.Loaded >  
 <   beginstoryboard     storyboard   =  {StaticResource Storyboard1}    /  >  
 <   / eventtrigger  >  
 <   / window.triggers  >  
 <   grid  < span class =code-keyword>>  
 <   rectangle     height   =  100    horizo​​ntalalignment   = 左    margin   =  84,82,0,0    名称  =  rectangle1    stroke   = 黑色    verticalalignment   =  Top    width   =  200 < span class =code-attribute>   fill   = ＃FDFFFF0D    rendertransformorigin   =  0.5,0.5 >  
 <   rectangle.rendertransform  >  
 <   transformgroup  >  
 <   scaletransform     /  >  
 <   skewtransform     /  >  
 <  < span class =code-leadattribute> rotatetransform     /  >  
 <   translatetransform     /  >  
 <   / transformgroup  >  
 <   / rectangle.rendertransform  >  
 < span class =code-keyword><   / rectangle  >  
 <  按钮   内容  = < span class =code-keyword>按钮   高度  =  23    Horizo​​ntalAlignment   = 左   保证金  =  344,72,0,0    名称  = < span class =code-keyword> button1    VerticalAlignment   =  Top   宽度  =  75   点击  =  button1_Click    /  >  
 <   / grid  > ;  
 <   / window  >  

-------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- --------------------



在我写的背后代码中

  public   void  AnimateRectangle（） 
 {
 Storyboard rectrotate =（Storyboard）FindResource（  Storyboard1）; 
 rectrotate.Begin（）; 
} 

我在按钮点击事件上调用此功能。

当我点击按钮时没有任何反应。

增加：当窗口加载时，故事板会动画，但不会单击按钮。请帮助



请帮助。



编辑：修复带标签的代码标记。

解决方案

问题是在加载Window时已经执行了Storyboard。因此，它被解雇但你没有看到任何结果，因为结果已经存在。



你必须在进入和退出时指定一个故事板，看看StoryBoard属性。



结果：动画已经完成，你指定一个固定值的增量，并且在你加载页面时已达到该值

找到了家伙！



发现FillBehavior =Stop应该用来将时间线恢复为零，这样动画可以重新开始。我也可以尝试autoreverse =true，但会反转动画。

Storyboard animation in WPF

I have written an animation in WPF storyboard: The following is the code:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<window x:class="animfromcodebehindWpfApplication1.MainWindow" xmlns:x="#unknown">
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<window.resources>
<storyboard x:key="Storyboard1">
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="-36" />
</doubleanimationusingkeyframes>
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="-46" />
</doubleanimationusingkeyframes>
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="359.484" />
</doubleanimationusingkeyframes>
</storyboard>
</window.resources>
<window.triggers>
<eventtrigger routedevent="FrameworkElement.Loaded">
<beginstoryboard storyboard="{StaticResource Storyboard1}" />
</eventtrigger>
</window.triggers>
<grid>
<rectangle height="100" horizontalalignment="Left" margin="84,82,0,0" name="rectangle1" stroke="Black" verticalalignment="Top" width="200" fill="#FDFFFF0D" rendertransformorigin="0.5,0.5">
<rectangle.rendertransform>
<transformgroup>
<scaletransform />
<skewtransform />
<rotatetransform />
<translatetransform />
</transformgroup>
</rectangle.rendertransform>
</rectangle>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="344,72,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</grid>
</window>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

In the code behind I have written

public void AnimateRectangle()
{
Storyboard rectrotate = (Storyboard)FindResource("Storyboard1");
rectrotate.Begin();
}

I call this function on button click event.
When I click the button nothing happens.
Addition : The storyboard animates when the window loads but not on clicking the button. Please help

Please help.

EDIT: Fixed code markup with tags.

解决方案

The problem is that the Storyboard is already executed when the Window is loaded. So, it is fired but you dont see any result because the result is already there.

You have to specify an storyboard when entering and when exit, look at StoryBoard properties.

Result: The animation is already done, and you are specifying an increment to a fixed value, and that value is already reached when you load the page

Found out guys !

Found out that FillBehavior="Stop" should be used to bring the timeline back to zero so that animation could restart. I can also try autoreverse="true" but that reverses the animation.

这篇关于XAML中的故事板动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！