Desplazar la pantalla de créditos en WPF... ideas?

animation 3d

Question

Estoy buscando crear una pantalla de crédito desplazable (posiblemente 3D) para mi aplicación, que sea similar a lo que podría ver al final de una película, pero debería poder incluir gráficos, animaciones, etc.

¿Cuál es la mejor manera de hacer esto? Estoy pensando que podría crear un UserControl muy alto que contenga todo el contenido para desplazarse y luego simplemente animarlo dentro de un ScrollViewer, o incluso solo un Canvas y animar la posición, pero hay obvios problemas de rendimiento al hacer algo así y Me temo que sería demasiado lento.

Sería fantástico si los créditos se desplazasen en una superficie 3D, algo así como La guerra de las galaxias, o con un efecto ojo de pez, pero sé que debes sentarte en cuclillas sobre 3D en WPF.

Definitivamente quiero algún tipo de fundido / mezcla alfa para que los créditos parezcan desvanecerse en la parte inferior y / o desaparecer en la parte superior, pero también estoy atascado en cómo hacerlo. *

** En realidad, para eso creo que podría superponer un degradado semitransparente, siempre y cuando el fondo fuera de un color sólido. *

Answer 1

Bueno, ya que nadie parece tener ningún comentario, seguí e hice las cosas que describí y debo decir que los resultados son bastante buenos. Usé un LinearGradientBrush vertical para hacer el fundido, y simplemente animé un UserControl dentro de un Canvas para el desplazamiento (animando Canvas.Top desde <ActualHeight of Canvas> a (negativo) <ActualHeight of UserControl>). Se ve bastante bien. :)

Aquí está la animación (nota que tuve que configurar DoubleAnimation.To en el código para scroller.ActualHeight):

<DoubleAnimation
x:Name="scrollAnim"
BeginTime="0:0:30"
Duration="0:0:30"
From="200"
Storyboard.TargetName="scroller"
Storyboard.TargetProperty="(Canvas.Top)" />

Y aquí está el elemento scroller :

<Canvas
ClipToBounds="True"
x:Name="scrollerCanvas">
<Credits:ScrollingCredits
    x:Name="scroller"
    Canvas.Top="200"
    Width="{Binding ElementName=this, Path=ActualWidth}" />
</Canvas>

(Hay otras cosas sucediendo, por lo tanto, el desplazamiento comienza en 0: 0: 30).

Aquí está el fader:

<Border
x:Name="border"
Opacity="0">
<Border.Background>
    <LinearGradientBrush
        StartPoint="0,0"
        EndPoint="0,1">
        <GradientStop
            Offset="0"
            Color="Black" />
        <GradientStop
            Offset="0.2"
            Color="#00000000" />
        <GradientStop
            Offset="0.8"
            Color="#00000000" />
        <GradientStop
            Offset="1"
            Color="Black" />
    </LinearGradientBrush>
</Border.Background>
</Border>

Answer 2

Puede usar un VisualBrush para "pintar" el control de usuario de sus créditos en una superficie 3D.