[C#/WPF] 글자 애니메이션 사용하기

TestProject.zip

다운로드

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="글자 애니메이션 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Background>
        <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="Black"   />
                <GradientStop Offset="1.0" Color="#666666" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Background>
    <Window.Resources>
        <DrawingBrush x:Key="WireDrawingBrushKey"
            Viewport="0 0 10 10"
            ViewportUnits="Absolute"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" Brush="#66ccccff" />
                        <GeometryDrawing Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" Brush="#66ccccff" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>
    <StackPanel Margin="40">
        <Border Name="textBorder"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="{StaticResource WireDrawingBrushKey}">
            <TextBlock Name="textBlock"
                Margin="40"
                FontSize="48pt"
                Foreground="White">
                WPF 글자 애니메이션
                <TextBlock.TextEffects>
                    <TextEffect x:Name="textEffect" PositionCount="1">
                        <TextEffect.Transform>
                            <TranslateTransform x:Name="translateTransform"/>
                        </TextEffect.Transform>
                    </TextEffect>
                </TextBlock.TextEffects>
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="translateTransform"
                                    Storyboard.TargetProperty="Y"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    Duration="00:00:0.25"
                                    From="0"
                                    To="20" />
                                <Int32AnimationUsingKeyFrames
                                    Storyboard.TargetName="textEffect"
                                    Storyboard.TargetProperty="PositionStart"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    Duration="0:0:6.5">
                                    <Int32AnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteInt32KeyFrame KeyTime="0:0:0"   Value="0"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:0.5" Value="1"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:1"   Value="2"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:1.5" Value="3"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:2"   Value="4"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:2.5" Value="5"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:3"   Value="6"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:3.5" Value="7"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:4"   Value="8"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:4.5" Value="9"  />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:5"   Value="10" />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:5.5" Value="11" />
                                        <DiscreteInt32KeyFrame KeyTime="0:0:6"   Value="12" />
                                    </Int32AnimationUsingKeyFrames.KeyFrames>
                                </Int32AnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
        </Border>
        <Rectangle Name="reflectedTextRectangle"
            Width="{Binding ElementName=textBorder, Path=ActualWidth}"
            Height="{Binding ElementName=textBorder, Path=ActualHeight}"
            HorizontalAlignment="Left">
            <Rectangle.OpacityMask>
                <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#66000000" />
                        <GradientStop Offset="1.0" Color="#00000000" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Rectangle.OpacityMask>
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=textBorder}">
                    <VisualBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="-1" />
                            <TranslateTransform Y="1" />
                        </TransformGroup>
                    </VisualBrush.RelativeTransform>
                </VisualBrush>
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>
</Window>