WPF中的Starwars文本效果

Ker*_*ton 12 wpf animation

公司高管们请求"星球大战爬"风格信用屏幕的融合为我们在我们的应用程序关于盒子,我一直负责在一周内完成这一点.

我不确定从哪里开始.我有一种感觉DoubleAnimation是我想看的地方,但是我如何使文本爬上屏幕并进入单点是我有点失落以及如何淡化文本并进入屏幕中间(如STAR WARS位).

在WPF中这很容易吗或者应该只是动画片吗?问题是我们的文本会根据已安装的版本和用户进行更改.

OJ.*_*OJ. 16

这是我为你拼凑的快速样本.它使用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>
Run Code Online (Sandbox Code Playgroud)


And*_*rey 11

检查我的版本.它有着色 - 当文本突然显示它开始消失时,就像在原始版本中一样(你可以在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>
Run Code Online (Sandbox Code Playgroud)


Pad*_*del 1

通过快速搜索找到了这个。它是为 Silverlight 设计的,但您可以轻松地将其移植到 WPF。更重要的是,它在示例中使用了 Blend,在 UI 设计方面同时用于 WPF 和 Silverlight。

这应该给你一个起点。

问候...