Efecto texto de Starwars en WPF

Question

Los ejecutivos de nuestra compañía han solicitado la integración de una pantalla de créditos de estilo "Star Wars crawl" para nuestro cuadro Acerca de en nuestra aplicación y me han encargado que complete esto en una semana. Recientemente hemos transferido nuestra aplicación WinForms a WPF y, por lo tanto, somos todos muy nuevos en WPF.

Como soy aún más nuevo en WPF, no estoy seguro de por dónde empezar. ¿Alguien puede darme un puntero a donde podría buscar un ejemplo existente de este efecto?

Tengo la sensación de que DoubleAnimation es donde debería estar mirando, pero cómo hago que el texto suba por la pantalla y en un solo punto es donde estoy un poco perdido y cómo atenuar el texto y muévete al centro de la pantalla (como el bit STAR WARS).

¿Esto es fácil de hacer en WPF o simplemente debería tener una animación en marcha? El problema es que tenemos texto que cambia según la versión instalada y el usuario.

Answer 1

Se encontró this en una búsqueda rápida. Está diseñado para Silverlight pero puede portarlo fácilmente a WPF. Aún más, utiliza Blend en el ejemplo que se usa tanto para WPF como para Silverlight en lo que respecta al diseño de la interfaz de usuario.

Esto debería darle un punto de partida.

Saludos ...

Answer 2

Aquí hay una muestra rápida Tiré juntos para usted. Utiliza 3D y no parece funcionar tan bien. ¡Pero funciona!

<Window 
    x:Class="StarWars.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="480" Width="640" Background="Black"> 

    <Viewport3D ClipToBounds="True" Width="Auto" Height="Auto"> 
    <Viewport3D.Triggers> 
     <EventTrigger RoutedEvent="Viewport3D.Loaded"> 
     <BeginStoryboard> 
      <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="Translation" 
       Storyboard.TargetProperty="OffsetY" 
       To="10" 
       Duration="0:1:0" /> 
      </Storyboard> 
     </BeginStoryboard> 
     </EventTrigger> 
    </Viewport3D.Triggers> 
    <Viewport3D.Camera> 
     <PerspectiveCamera 
     FarPlaneDistance="100" 
     NearPlaneDistance="1" 
     FieldOfView="30" 
     LookDirection="0,25,-13" 
     UpDirection="0,1,0" 
     Position="0,2,1.5" /> 
    </Viewport3D.Camera> 
    <ModelVisual3D> 
     <ModelVisual3D.Content> 
     <Model3DGroup> 
      <Model3DGroup.Children> 
      <AmbientLight Color="#FF808080" /> 
      <GeometryModel3D> 
       <GeometryModel3D.Transform> 
       <TranslateTransform3D 
        x:Name="Translation" 
        OffsetY="3" /> 
       </GeometryModel3D.Transform> 
       <GeometryModel3D.Geometry> 
       <MeshGeometry3D 
       Positions="-1,-2,0 1,-2,0 1,1,0 -1,1,0" 
       TriangleIndices="0 1 2 0 2 3" 
       TextureCoordinates="0,1 1,1 1,0 0,0" 
       Normals="0,0,1 0,0,1" /> 
       </GeometryModel3D.Geometry> 
       <GeometryModel3D.Material> 
       <DiffuseMaterial> 
        <DiffuseMaterial.Brush> 
        <VisualBrush> 
         <VisualBrush.Visual> 
         <TextBlock 
         Foreground="Yellow" 
         FontFamily="Consolas" 
         TextAlignment="Center"> 
          Lorem ipsum dolor sit amet,<LineBreak/> 
          consectetur adipiscing elit.<LineBreak/> 
          Integer malesuada, massa<LineBreak/> 
          vitae suscipit dictum, purus<LineBreak/> 
          dolor volutpat arcu, ac<LineBreak/> 
          tincidunt erat mauris sed nisi.<LineBreak/> 
          Sed ac eros ac augue<LineBreak/> 
          ullamcorper sodales sed id leo.<LineBreak/><LineBreak/> 
          Suspendisse nibh enim,<LineBreak/> 
          hendrerit vitae pretium et,<LineBreak/> 
          gravida in tortor. Lorem ipsum<LineBreak/> 
          dolor sit amet, consectetur<LineBreak/> 
          adipiscing elit. Maecenas<LineBreak/> 
          condimentum enim eu tellus<LineBreak/> 
          feugiat mollis ac ut arcu.<LineBreak/> 
          Ut fringilla tempus volutpat.<LineBreak/> 
          Duis elementum convallis<LineBreak/> 
          tincidunt.<LineBreak/><LineBreak/> 

          Mauris lacus tortor,<LineBreak/> 
          tristique nec congue at,<LineBreak/> 
          adipiscing sed eros.<LineBreak/><LineBreak/> 

          In volutpat eros id nunc<LineBreak/> 
          hendrerit eget aliquet nisi<LineBreak/> 
          lacinia.<LineBreak/><LineBreak/> 

          Suspendisse et lorem augue, non eleifend est. 
         </TextBlock> 
         </VisualBrush.Visual> 
        </VisualBrush> 
        </DiffuseMaterial.Brush> 
       </DiffuseMaterial> 
       </GeometryModel3D.Material> 
      </GeometryModel3D> 
      </Model3DGroup.Children> 
     </Model3DGroup> 
     </ModelVisual3D.Content> 
    </ModelVisual3D> 
    </Viewport3D> 
</Window> 

Answer 3

Compruebe mi versión. Tiene sombreado - cuando el texto se acerca cierto punto comienza a disapperating, al igual que en la versión original (se puede comprobar en youtube)

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="500" Width="500" Background="Black"> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="Window.Loaded" > 
      <BeginStoryboard> 
       <Storyboard Name="story"> 
        <DoubleAnimation 
         Storyboard.TargetName="TextPos" 
         Storyboard.TargetProperty="OffsetY" 
         From="-1.5" To="5" Duration="0:1:30" RepeatBehavior="Forever"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Window.Triggers> 

    <Grid> 
     <Viewport3D Name="viewport3D1" > 
      <Viewport3D.Camera> 
       <PerspectiveCamera x:Name="camMain" Position="0.5 -1 0.4" LookDirection="0 5 -1"> 
       </PerspectiveCamera> 
      </Viewport3D.Camera> 
      <ModelVisual3D> 
       <ModelVisual3D.Content> 
        <AmbientLight Color="White"></AmbientLight> 

       </ModelVisual3D.Content> 
      </ModelVisual3D> 
      <ModelVisual3D> 
       <ModelVisual3D.Content> 
        <GeometryModel3D> 
         <GeometryModel3D.Geometry> 
          <MeshGeometry3D x:Name="meshMain" 
           Positions="0.2 -5 0 0.8 -5 0 0.2 1 0 0.8 1 0" 
           TriangleIndices="0 1 3 0 3 2" 
           TextureCoordinates="0 1 1 1 0 0 1 0"> 
          </MeshGeometry3D> 
         </GeometryModel3D.Geometry> 
         <GeometryModel3D.Material> 
          <DiffuseMaterial x:Name="matDiffuseMain" > 
           <DiffuseMaterial.Brush> 
            <VisualBrush> 
             <VisualBrush.Visual> 
              <Grid Width="200" Height="1000" Background="Black"> 
               <Border BorderBrush="Black"> 
                <TextBlock Background="Black" 
                  TextWrapping="Wrap" 
                  Foreground="#FFFFDA00" 
                  FontFamily="Franklin Gothic" 
                  FontWeight="Bold" 
                  FontSize="16" 
                  TextAlignment="Justify" 
                  LineHeight="17" 
                  LineStackingStrategy="BlockLineHeight" 
                  > 
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <LineBreak/> <LineBreak/> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<LineBreak/> <LineBreak/>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<LineBreak/> <LineBreak/>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<LineBreak/> <LineBreak/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<LineBreak/> <LineBreak/>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                </TextBlock> 
               </Border> 
              </Grid> 
             </VisualBrush.Visual> 
            </VisualBrush> 
           </DiffuseMaterial.Brush> 
          </DiffuseMaterial> 
         </GeometryModel3D.Material> 
        </GeometryModel3D>      
       </ModelVisual3D.Content> 
       <ModelVisual3D.Transform> 
        <TranslateTransform3D x:Name="TextPos" OffsetY="-1.5"/> 
       </ModelVisual3D.Transform> 
      </ModelVisual3D> 
      <ModelVisual3D> 
       <ModelVisual3D.Content> 
        <GeometryModel3D> 
         <GeometryModel3D.Geometry> 
          <MeshGeometry3D x:Name="meshShadow" 
           Positions="0.2 0.5 0.1 0.8 0.5 0.1 0.2 5 0.1 0.8 5 0.1" 
           TriangleIndices="0 1 3 0 3 2" 
           TextureCoordinates="0 1 1 1 0 0 1 0"> 
          </MeshGeometry3D> 
         </GeometryModel3D.Geometry> 
         <GeometryModel3D.Material> 
          <DiffuseMaterial x:Name="matDiffuseShade" > 
           <DiffuseMaterial.Brush> 
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
             <GradientStop Color="Black" Offset="0.85" /> 
             <GradientStop Color="#00000000" Offset="1.0" /> 
            </LinearGradientBrush> 
           </DiffuseMaterial.Brush> 
          </DiffuseMaterial> 
         </GeometryModel3D.Material> 
        </GeometryModel3D> 
       </ModelVisual3D.Content> 
      </ModelVisual3D> 
     </Viewport3D> 
    </Grid> 
</Window>