我已经以下列方式实现了移动网格控件的动画:
<Grid
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger
Binding="{Binding ElementName=rootLayout, Path=IsVisible}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
From="-500,0,0,0"
To="0,0,0,0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Border
Grid.RowSpan="2"
Background="Black"
CornerRadius="6" >
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
<TextBlock
Grid.Row="0"
Width="400"
Height="200"
Margin="20,20,20,10"
Text="{Binding Path=MessageText}" />
<Button
Grid.Row="1"
Margin="20,5,20,15"
HorizontalAlignment="Right"
Width="75"
Content="OK"
Command="{Binding Path=CloseDialogCommand}" />
</Grid>
动画效果很好,但很难看。它是摇摇欲坠/紧张/生涩,它看起来真的很不专业。有没有办法改善这个?我是否使用正确的方法设置Margin
属性的值更改以移动网格?我读过RenderTransform
,但我不知道如何在我的情况下使用它。
此外,动画看起来不自然。我知道这可以改进,但我不知道如何。这些属性是什么,它们可以帮助我增强动画效果:
AccelerationRatio
DecelerationRatio
EasingFunction
IsAdditive
IsCumulative
SpeedRatio
感谢您的帮助!
P.S。我试图在XAML中尽可能多地放入代码,所以我更喜欢这种方法,但实际上,如果有任何改进的话......
答案 0 :(得分:11)
使用缓动函数,简单的DoubleAnimation和RenderTransform,例如
<Button Content="Test">
<Button.RenderTransform>
<TranslateTransform/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X"
From="-500" To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
这应该非常流畅,请查看this overview关于缓动函数的信息,以了解它们如何影响动画。
另请注意,持续时间对动画的外观有很大影响,具体取决于您使用的缓动功能,需要设置高持续时间值,因为它们最终会显着减慢。