[WPF] 반사(Reflection) 애니메이션

반사(Reflection) 애니메이션 구현 예제입니다.

<Window x:Class="Wpf.ReflectionAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf.ReflectionAnimation"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="370">
    <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="MyWireBrushResource"
            TileMode="Tile"
            Viewport="0,0,10,10"
            ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#66CCCCFF" Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" />
                        <GeometryDrawing Brush="#66CCCCFF" Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>

    <StackPanel Margin="40">
        <Border
            Name="TextBorder"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="{StaticResource MyWireBrushResource}">
            <TextBlock
                Name="RealText"
                Margin="40"
                FontFamily="Segoe UI"
                FontSize="60 px"
                Foreground="White">
                Kjun.kr
                <TextBlock.TextEffects>

                    <!--  The TextEffect to animate.  -->
                    <TextEffect x:Name="MyTextEffect" PositionCount="1">
                        <TextEffect.Transform>
                            <TranslateTransform x:Name="TextEffectTranslateTransform" />
                        </TextEffect.Transform>
                    </TextEffect>
                </TextBlock.TextEffects>

                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard>
                            <Storyboard>

                                <!--
                                    Animates the Y factor of the
                                    TextEffect's TranslateTransform.
                                -->
                                <DoubleAnimation
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="TextEffectTranslateTransform"
                                    Storyboard.TargetProperty="Y"
                                    From="0"
                                    To="20"
                                    Duration="00:00:0.25" />

                                <!--  Animates the position of the TextEffect.  -->
                                <Int32AnimationUsingKeyFrames
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="MyTextEffect"
                                    Storyboard.TargetProperty="PositionStart"
                                    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>

        <!--  Uses a VisualBrush to create a reflection of the animated text.  -->
        <Rectangle
            Name="ReflectedText"
            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>

[Source]
https://github.com/kei-soft/KJunBlog/tree/master/Wpf.ReflectionAnimation

GitHub - kei-soft/KJunBlog