Efekt tekstowy Starwars w WPF

Question

Kierownictwo naszej firmy poprosiło o integrację ekranu stylu "Gwiezdne wojny indeksowania" w naszym polu O programie w naszej aplikacji, a zadanie to zostało zrealizowane w ciągu tygodnia. Niedawno przenieśliśmy naszą aplikację WinForms do WPF i dlatego wszyscy jesteśmy nowi w WPF.

Ponieważ jestem jeszcze nowszy w WPF, nie jestem pewien, od czego zacząć. Czy ktoś może mi wskazać, gdzie mogę znaleźć istniejący przykład tego efektu?

Mam przeczucie, że DoubleAnimation jest miejscem, w którym powinienem się przyglądać, ale w jaki sposób sprawię, że tekst przemieści się na ekranie w pojedynczy punkt, to gdzie jestem trochę zagubiony i jak wygasić tekst i przejdź na środek ekranu (tak jak bit STAR WARS).

Czy to jest łatwe do zrobienia w WPF, czy po prostu powinna zostać uruchomiona animacja? Problem polega na tym, że mamy tekst, który zmienia się w zależności od zainstalowanej wersji i użytkownika.

Answer 1

Znaleziono this w szybkim wyszukiwaniu. Jest przeznaczony dla Silverlight, ale możesz go łatwo przenieść do WPF. Jeszcze więcej używa Blend w przykładzie, który jest używany zarówno dla WPF, jak i Silverlight, jeśli chodzi o projektowanie interfejsu użytkownika.

To powinno dać ci punkt wyjścia.

Pozdrawiam ...

Answer 2

Oto krótka próbka, którą wyłożyłem dla Ciebie. Korzysta z technologii 3D i nie wydaje się, aby działała tak dobrze. Ale to działa!

<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

Sprawdź moją wersję. Ma cieniowania - gdy tekst podchodzi pewnym momencie zacznie disapperating, jak w pierwotnej wersji (można sprawdzić na 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>