我正在处理具有巨大性能问题的WPF应用程序。 当用户在屏幕之间移动时,当下一个屏幕淡入并从左侧滑入时,应该有当前屏幕的快速动画淡出和缩小。 这很糟糕。
现在,我遇到了 EntranceThemeTransitionBehavior (http://msdn.microsoft.com/EN-US/library/windows/apps/windows.ui.xaml.media.animation.entrancethemetransition.aspx),但有两件事我不明白:
在WPF中创建平滑淡入淡出+过渡的最佳做法/建议吗?
今天我用一个简单的故事板和不透明动画来做这件事。这是一个例子:
当我在2个屏幕上并行运行时,衰落非常慢。
<Grid x:Name="SlideShow" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.Resources>
<Storyboard x:Key="Slide" RepeatBehavior="Forever" Timeline.DesiredFrameRate="30" >
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:7"
Storyboard.TargetName="Ad2"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:14.75"
Storyboard.TargetName="Ad3"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:24.25"
Storyboard.TargetName="Ad4"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:32.75"
Storyboard.TargetName="Ad2"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:32.75"
Storyboard.TargetName="Ad3"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:32.75"
Storyboard.TargetName="Ad4"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Slide}" />
</EventTrigger>
</Grid.Triggers>
<Image Source="/MyApp;component/Resources/Images/SecondScreen/1.png" Name="Ad1" Opacity="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Source="/MyApp;component/Resources/Images/SecondScreen/2.png" Name="Ad2" Opacity="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Source="/MyApp;component/Resources/Images/SecondScreen/3.png" Name="Ad3" Opacity="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Source="/MyApp;component/Resources/Images/SecondScreen/4.png" Name="Ad4" Opacity="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>