첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
0.01MB

▶ 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="Storyboard 엘리먼트 : 행진하는 개미, 펄스, 뒤집기, 탄성 줄, 나이트 라이더 애니메이션 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="MarchingAntsStoryboardKey">
            <DoubleAnimation
                Storyboard.TargetName="marchingAntsRectangle"
                Storyboard.TargetProperty="StrokeThickness"
                Duration="00:00:00.25"
                To="4" />
            <DoubleAnimation
                Storyboard.TargetName="marchingAntsRectangle"
                Storyboard.TargetProperty="StrokeDashOffset"
                RepeatBehavior="Forever"
                Duration="00:03:00"
                From="1000"
                To="0" />
        </Storyboard>
        <Storyboard x:Key="PulseStoryboardKey"
            RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="pulseBorder"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1.15" />
                <EasingDoubleKeyFrame KeyTime="00:00:01"   Value="1"    />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="pulseBorder"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1.15" />
                <EasingDoubleKeyFrame KeyTime="00:00:01"   Value="1"    />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FlipperStoryboardKey"
            RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames
                Storyboard.TargetName="flipperBorder"
                Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <EasingPointKeyFrame KeyTime="00:00:01" Value="0.5 0.5" />
                <EasingPointKeyFrame KeyTime="00:00:02" Value="0.5 0.5" />
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="flipperBorder"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-1" />
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"  />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="ElasticLinesStoryboardKey"
            RepeatBehavior="Forever"
            AutoReverse="True">
            <PointAnimationUsingKeyFrames
                Storyboard.TargetName="elasticLinesRectangle"
                Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">
                <EasingPointKeyFrame KeyTime="00:00:04" Value="12 8" />
            </PointAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="KnightRiderStoryboardKey"
            RepeatBehavior="Forever"
            AutoReverse="True">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="knightRiderRectangle"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-50" />
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="50"  />
                <EasingDoubleKeyFrame KeyTime="00:00:03" Value="0"   />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource MarchingAntsStoryboardKey}" />
            <BeginStoryboard Storyboard="{StaticResource PulseStoryboardKey}"        />
            <BeginStoryboard Storyboard="{StaticResource FlipperStoryboardKey}"      />
            <BeginStoryboard Storyboard="{StaticResource ElasticLinesStoryboardKey}" />
            <BeginStoryboard Storyboard="{StaticResource KnightRiderStoryboardKey}"  />
        </EventTrigger>
    </Window.Triggers>
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.Resources>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment"   Value="Center" />
                <Setter Property="Foreground"          Value="White"  />
                <Setter Property="FontWeight"          Value="Bold"   />
                <Setter Property="FontSize"            Value="24"     />
                <Setter Property="Text"                Value="ALERT"  />
            </Style>
            <Style TargetType="{x:Type Grid}">
                <Setter Property="Margin" Value="0 10" />
            </Style>
            <Style TargetType="{x:Type Rectangle}">
                <Setter Property="Width"  Value="150" />
                <Setter Property="Height" Value="50"  />
            </Style>
        </Grid.Resources>
        <StackPanel>
            <!-- Marching Ants -->
            <Grid>
                <Rectangle x:Name="marchingAntsRectangle"
                    StrokeDashOffset="2"
                    StrokeDashArray="5"
                    Stroke="Red">
                    <Rectangle.Fill>
                        <LinearGradientBrush
                            MappingMode="Absolute"
                            SpreadMethod="Repeat"
                            StartPoint="0 0"
                            EndPoint="6 4">
                            <GradientStop Offset="0.15" Color="#00000000" />
                            <GradientStop Offset="0.25" Color="Red"       />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock />
            </Grid>
            <!-- Pulse -->
            <Grid>
                <Border x:Name="pulseBorder"
                    Background="Red"
                    RenderTransformOrigin="0.5 0.5">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform     />
                            <SkewTransform      />
                            <RotateTransform    />
                            <TranslateTransform />
                        </TransformGroup>
                    </Border.RenderTransform>
                    <TextBlock />
                </Border>
            </Grid>
            <!-- Flipper -->
            <Grid>
                <Border x:Name="flipperBorder"
                    Background="Red">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform     />
                            <SkewTransform      />
                            <RotateTransform    />
                            <TranslateTransform />
                        </TransformGroup>
                    </Border.RenderTransform>
                    <TextBlock />
                </Border>
            </Grid>
            <!-- Elastic Lines -->
            <Grid>
                <Rectangle x:Name="elasticLinesRectangle"
                    StrokeThickness="5"
                    Stroke="Red">
                    <Rectangle.Fill>
                        <LinearGradientBrush
                            MappingMode="Absolute"
                            SpreadMethod="Repeat"
                            StartPoint="0 0"
                            EndPoint="6 4">
                            <GradientStop Offset="0.15" Color="#00000000" />
                            <GradientStop Offset="0.25" Color="Red"       />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock />
            </Grid>
            <!-- Knight Rider -->
            <Grid>
                <Rectangle Fill="Red" />
                <Rectangle x:Name="knightRiderRectangle"
                    Width="50"
                    Fill="White"
                    RenderTransformOrigin="0.5 0.5">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform     />
                            <SkewTransform      />
                            <RotateTransform    />
                            <TranslateTransform />
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <TextBlock Foreground="Red" />
            </Grid>
        </StackPanel>
    </Grid>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by 사용자 icodebroker

댓글을 달아 주세요