WPF RotateTransform Animation

안녕하세요. 오늘은 RotateTransform과 Bitmap Effect를 활용한 간단한 샘플을 구현 해보았습니다. 아래 동영상은 이번시간에 소개할 샘플의 작동 화면 입니다.

대략 보면 뭐하는 녀석이구나 집작은 모두 하시겠지만, 설명을 하자면.. 마우스를 올려놓았을 때 해당 부분의 일정 영역이 뿌옇게 되고 회전한뒤 원상복귀 되는 내용입니다. 실제 Application에 이러한 기능을 구현해서 사용할지는 의문이지만, Interactive Design과 같은 분야에서는 응용가능 한 예제라 생각됩니다.

아래는 전체 소스코드입니다.

<WINDOW title="WPF KOREA" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Class="Rotation.Window1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300">
   
    <GRID>
        <GRID.RESOURCES>
            <IMAGEBRUSH x:Key="WonderGirls" ImageSource="WonderGirls.jpg" />
            <STYLE TargetType="Rectangle">
                <Setter Property="Width" Value="200"/>
                <Setter Property="Height" Value="200"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="Fill" Value="{StaticResource WonderGirls}"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BitmapEffect">
                    <Setter.Value>
                        <BlurBitmapEffect Radius="0"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard  >
                                    <DoubleAnimation To="360" FillBehavior="Stop"
                                                     AccelerationRatio="0.2"
                                                     Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"/>
                                    <DoubleAnimation To="5" FillBehavior="Stop"
                                                     AutoReverse="True" Duration="0:0:0.5"
                                                     Storyboard.TargetProperty="(Rectangle.BitmapEffect).(BlurBitmapEffect.Radius)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Style.Triggers>
            </STYLE>
        </GRID.RESOURCES>
       
        <RECTANGLE>
            <RECTANGLE.CLIP>
                <ELLIPSEGEOMETRY Center="100 100" RadiusX="100" RadiusY="100" />
            </RECTANGLE.CLIP>
        </RECTANGLE>
        <RECTANGLE>
            <RECTANGLE.CLIP>
                <ELLIPSEGEOMETRY Center="100 100" RadiusX="75" RadiusY="75" />
            </RECTANGLE.CLIP>
        </RECTANGLE>
        <RECTANGLE>
            <RECTANGLE.CLIP>
                <ELLIPSEGEOMETRY Center="100 100" RadiusX="50" RadiusY="50" />
            </RECTANGLE.CLIP>
        </RECTANGLE>
        <RECTANGLE>
            <RECTANGLE.CLIP>
                <ELLIPSEGEOMETRY Center="100 100" RadiusX="25" RadiusY="25" />
            </RECTANGLE.CLIP>
        </RECTANGLE>
    </GRID>
</WINDOW>

소스상에 특별히 어려운 부분이 없으므로 설명은 생략 하도록 하고, 질문 있으신분은 리플로 말씀해주시기 바랍니다. 추가로 이번 코드는 이전에 DockBar만들기(http://whatisthat.co.kr/71) 라는 주제로 다루어 진 내용이 많이 포함되어 함께 참고 하시면 좋을것 같습니다.