Эффект текстовых эффектов Starwars в WPF

Question

Наши руководители нашей компании запросили интеграцию экрана кредитов типа «Звездные войны» для нашего окна «О программе» в нашем приложении, и мне было поручено завершить его в течение недели. Недавно мы портировали наше приложение WinForms в WPF, и поэтому мы все очень новичок в WPF.

Поскольку я еще новичок в WPF, я не уверен, с чего начать. Может ли кто-нибудь дать мне указатель на то, где я мог бы найти существующий пример этого эффекта?

У меня такое чувство, что DoubleAnimation - это то место, где я должен смотреть, но как я делаю текст, сканирую экран и в одну точку, где я немного потерялся и как выцветать текст и переместитесь в середину экрана (например, бит STAR WARS).

Легко ли это сделать в WPF или просто нужно сделать анимацию? Проблема в том, что у нас есть текст, который изменяется на основе установленной версии и пользователя.

Answer 1

Найдено this для быстрого поиска. Он разработан для Silverlight, но вы можете легко переносить его в WPF. Более того, он использует Blend в примере, который используется как для WPF, так и для Silverlight, когда речь идет о дизайне пользовательского интерфейса.

Это должно дать вам отправную точку.

С уважением ...

Answer 2

Вот краткий пример, я бросил вместе для вас. Он использует 3D и, похоже, не работает так хорошо. Но это работает!

<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

Проверьте мою версию. Он имеет затенение - когда текст приходит какой-то момент он начинает disapperating, как и в оригинальной версии (вы можете проверить на 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>