0

I'm working on a WPF application with huge performance issues. When a user is going between screens, there should be a quick animation of the current screen fading out and zooming out while the next screen is fading in and sliding in from left. This is clutty as hell.

Now, I came across EntranceThemeTransitionBehavior (http://msdn.microsoft.com/EN-US/library/windows/apps/windows.ui.xaml.media.animation.entrancethemetransition.aspx) but there are 2 things about it I don't get:

  • Should this thing work much faster?
  • Can it be used for non windows store apps? (just plain old desktop application)

Any best practice / suggestions to create smooth fade + transitions in WPF?

Today I'm doing it with a simple storyboard and opacity animation. Here's an example:

When I run this on 2 screens in parallel, the fades are really slow.

    <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"/>
pushpraj
  • 13,458
  • 3
  • 33
  • 50
Uri Abramson
  • 6,005
  • 6
  • 40
  • 62
  • the link is only applicable for win-rt and nor available for normal wpf apps. Secondly for smoother animation in wpf you could combine some tricks involving visualbrush, rendertargetbitmap etc. may you post a complex animation xaml or code, I'll try to simplify it for you. – pushpraj Jul 01 '14 at 09:37
  • Added some basic examle of what I'm doing. In other parts of the application the animation is done on a Frame object which contains an entire screen. In those cases, that's even slower. – Uri Abramson Jul 01 '14 at 09:44
  • sample above animates smoothly, does not seems to be a good candidate for optimization. if this is running slowly on your pc, do check if you have directx 9 or above installed in your pc. and there is no other setting forcing application to run in software mode. and also there is no expensive processing on UI thread. these are simple images, I hope these are not so heavy (very high resolution) images. – pushpraj Jul 01 '14 at 10:10
  • http://stackoverflow.com/questions/21396117/change-images-in-box and http://stackoverflow.com/questions/23107920/animate-image-when-loaded-in-image-control-wpf assuming you are doing slideshow animation – Heena Jul 01 '14 at 10:22
  • I just wouldn't even recommend doing this in an application at all. By taking entire UIs and doing flashy things with them is fun it's also a resource hog and the more complex your UI becomes the problems you see now will just magnify. The first app I released using WPF did loads of animations, all of them never made it through to the next version. – Jammer Jul 01 '14 at 12:59
  • Yeah well, today most people are used to "flashy" stuff. Its called great user experience. I'm not saying it should be a blinking neon sign but most modern apps have a great feel to them thanks to those smooth slides and fades. This is why we want to get the same feeling through.. – Uri Abramson Jul 01 '14 at 14:52

0 Answers0