Текстовый эффект Starwars в WPF

Question

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

Я не уверен, с чего начать. У меня есть ощущение, что DoubleAnimation - это то место, куда я должен смотреть, но как заставить текст ползти вверх по экрану и в одну точку, где я немного растерялся, и как затемнить текст и перейти в середина экрана (например, бит STAR WARS).

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

Answer 1

Вот быстрый пример, который я скинул для вас. Он использует 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 2

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

Answer 3

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

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

Привет ...