Starwars Text-Effekt in WPF

Question

Unsere Führungskräfte haben die Integration eines "Star Wars Crawl" Stil Credits Bildschirm für unsere About-Box in unserer Anwendung angefordert und ich wurde beauftragt, dies innerhalb einer Woche abzuschließen. Wir haben kürzlich unsere WinForms-Anwendung auf WPF portiert und sind daher alle sehr neu in WPF.

Da ich noch neuer zu WPF bin, bin ich mir nicht sicher, wo ich überhaupt anfangen soll. Kann mir jemand einen Hinweis geben, wo ich nach einem Beispiel für diesen Effekt suchen könnte?

Ich habe das Gefühl, die DoubleAnimation ist, wo ich suchen soll, aber wie ich den Text auf den Bildschirm kriechen und in einen einzigen Punkt ist, wo ich ein wenig verloren bin und wie man den Text ausblendet und bewege dich in die Mitte des Bildschirms (wie das STAR WARS-Bit).

Ist dies in WPF einfach zu machen oder sollte nur eine Animation in Gang gesetzt werden? Das Problem ist, dass wir Text haben, der sich basierend auf der installierten Version und dem Benutzer ändert.

Answer 1

Gefunden this auf einer schnellen Suche. Es ist für Silverlight entworfen, aber Sie können es leicht zu WPF portieren. Noch mehr verwendet es Blend in dem Beispiel, das für WPF und Silverlight verwendet wird, wenn es um UI-Design geht.

Dies sollte Ihnen einen Ausgangspunkt geben.

Grüße ...

Answer 2

Hier ist eine kurze Probe, die ich zusammen für Sie warf. Es verwendet 3D und scheint nicht so gut zu sein. Aber es funktioniert!

<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

Überprüfen Sie meine Version. Es hat Beschattung - wenn der Text über bestimmten Punkt kommt es beginnt disapperating, wie in der Originalversion (Sie können auf youtube überprüfen)

<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>