我通过以下方式实现了移动网格控件的动画:
<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
感谢您的帮助!
附言我试图在 XAML 中放入尽可能多的代码,所以我更喜欢这种方法,但实际上,如果有什么可以改进的话......
最佳答案
使用缓动函数,一个简单的 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关于缓动函数以了解它们如何影响动画。
另请注意,持续时间对动画的外观有很大影响,具体取决于您使用的缓动函数设置高持续时间值,因为它们最终会显着减慢。
关于wpf - 提高动画平滑度(控件的移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5671515/