WPF/E CTP Quick Start - 섹션 9: 애니메이션(번역)

WPF/E를 사용하면 마커를 사용하여 애니메이션을 정의할 수 있습니다.이 QuickStart는 WPF/E의 애니메이션 특성을 소개하고 첫 번째 WPF/E 애니메이션을 만드는 데 도움을 줍니다.
이 QuickStart는 다음 섹션으로 구성되어 있습니다.
연습:대상에 애니메이션 효과 추가
1단계: 객체 찾기2단계: Event Trigger 생성
3단계: Storyboard 및 애니메이션 생성
기타 애니메이션 유형Timeline 속성애니메이션 변환 값 지정동일한 객체에 여러 애니메이션 추가다음은 뭘 해야 되지?
 
연습:대상에 애니메이션 효과 추가
1단계: 상대를 찾다
우선 애니메이션 효과를 추가할 수 있는 대상이 필요합니다.일단 하나만 써볼게요.
Ellipse.다음 예는 하나를 만들었습니다
Ellipse를 검은색으로 채웁니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black" />
</Canvas>

숨겨진 내용 다시 시작
이 Ellipse에는 다음과 같은 이름이 있습니다.
　　x:Name="ellipse"
이 Ellipse는 애니메이션을 추가할 수 있도록 이름이 필요합니다.이제 애니메이션에 사용할 대상이 하나 생겼습니다. 다음 단계는 애니메이션을 시작할 대상을 추가합니다.
EventTrigger.
 
2단계: EventTrigger 생성
　　
EventTrigger는 트리거될 때 동작을 수행합니다.그것의 이름에서 알 수 있듯이 그것을 촉발하는 것은 하나의 사건이고, 하나는 그것의 것이다
RoutedEvent 속성에 지정된 이벤트입니다.이걸 원하시니까.
Event Trigger에서 애니메이션을 시작하려면
BeginStoryBoard 객체가 작동합니다.
이 애니메이션을 터치할 이벤트를 결정해야 합니다.여기서는 아주 간단합니다. 왜냐하면
이벤트Trigger는 하나의 이벤트만 지원합니다.
Loaded 이벤트로 인해
RoutedEvent 속성은 Canvas로 설정됩니다.Loaded (최종적으로 우리는 다른 것을 사용해서 이 애니메이션을 촉발할 것이다.)이렇게
Canvas가 로드되면 애니메이션이 열립니다.다음은 여기까지의 표시입니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    
                    <!-- Insert Storyboard here. -->
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black"/>
</Canvas>

숨겨진 내용 다시 시작
현재, 당신은 이미
Storyboard와 애니메이션이 준비되어 있습니다.
 
3단계: Storyboard 및 애니메이션 생성
하나
Storyboard는 하나 이상의 애니메이션을 설명하고 제어하는 데 사용할 수 있습니다.이 예에서 우리는 단지 하나의 애니메이션만 썼다.WPF/E에서 애니메이션을 객체의 속성에 적용하여 애니메이션 효과를 추가합니다.하나 사용
Double Animation은 애니메이션 효과를
Ellipse의
Canvas.Left 속성에서사용
Double Animation은 이 조작된 속성 때문에
Canvas.Left
Double 유형(이중 정밀도 부동 소수점 수)의 속성입니다.
애니메이션을 활성화하려면 대상 이름(Storyboard.TargetName="ellipse"), 대상 속성(Storyboard.TargetProperty="(Canvas.Left)), 변환된 값(To="300") 및
Duration(Duration="0:0:1").이것
Duration 속성은 애니메이션 효과를 시작 값에서 끝 값으로 변경하는 데 걸리는 시간을 지정합니다.0:0:1은 이거예요.
Duration은 1초입니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                            Storyboard.TargetName="ellipse"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            To="300" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    <Ellipse x:Name="ellipse"
        Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
        Fill="black"/>
</Canvas>

숨겨진 내용 다시 시작
사용
Double Animation은 이 조작된 속성 때문에
Canvas.Left
Double 유형(이중 정밀도 부동 소수점 수)의 속성입니다.
축하합니다!방금 첫 번째 WPF/E 애니메이션을 만들었습니다.WPF/E 애니메이션 시스템에 대한 자세한 내용을 보려면 아래의 내용을 계속 읽으십시오.
 
기타 유형의 애니메이션
WPF/E는 색상 애니메이션도 지원합니다(
ColorAnimation) 및 점의 애니메이션 효과(
PointAnimation).색상에 애니메이션 효과를 추가할 때 색상 및
SolidColorBrush의 차이점한 모양의
Stroke 및
Fill 속성이 색상 이름 또는 16진수 값을 지정하면 WPF/E가 사용으로 변환됩니다.
SolidColorBrush 방식입니다.모양이
Stroke 또는
Fill에 애니메이션을 추가할 때 이 속성의
SolidColorBrush 객체의
Color.일반적으로, 하나의 애니메이션으로 브러시를 포함하는 속성을 조작하려면, 색 이름이나 16진수 값을 사용하지 않고 복잡한 문법으로 브러시를 설명하는 것이 좋습니다. 그러면 브러시에 이름을 추가할 수 있습니다.
다음 예에서는 두 개의 Ellipse에 애니메이션 효과를 추가했습니다.첫 번째 Ellipse 속성은
SolidColorBrush는 Fill 속성을 명시적으로 설정합니다.에서
SolidColorBrush는 이름을 제공하고
Color 속성두 번째 애니메이션은 좀 복잡해요. 왜냐하면 두 번째 Ellipse의
Fill 속성이 색상 이름으로 설정됩니다.이 표시가 실행될 때 시스템은
SolidColorBursh, 속성에 대한 애니메이션만 간접적으로 추가할 수 있습니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetName="e1_brush"
                            Storyboard.TargetProperty="Color"
                            From="Red" To="Blue" Duration="0:0:5" />
                        <ColorAnimation 
                            Storyboard.TargetName="e2"
                            Storyboard.TargetProperty="(Fill).(Color)"
                            From="Red" To="Blue" Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    
    <Ellipse Fill="Black"
        Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
        <Ellipse.Fill>
            <SolidColorBrush x:Name="e1_brush" Color="black"/>
        </Ellipse.Fill>
    </Ellipse>
    
    <Ellipse x:Name="e2" Fill="Black"
        Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

숨겨진 내용 다시 시작
 
Timeline 속성
　　
Storyboard 및
Double Animation 은 다
Timeline 유형의 객체Timeline에는 다음과 같은 여러 가지 유용한 속성이 있습니다.
Storyboard.TargetName: 작업하는 객체의 이름입니다.Storyboard를 지정하지 않으면TargetName의 값, Timeline은 부모 Timeline의 Storyboard를 사용합니다.TargetName.부모 Timeline의 Storyboard를 지정하지 않으면TargetName 속성, Timeline 은 Event Trigger 를 사용하여 시작하는 객체를 찾습니다.
Storyboard.TargetProperty: 작업 등록 정보입니다.Storyboard를 지정하지 않으면TargetProperty, Timeline은 부모 Timeline의 Storyboard를 사용합니다.TargetProperty.이 속성에 사용되는 구문은 해당 작업의 속성 유형에 따라 결정됩니다.
추가 속성을 지정할 때 사용하는 구문: "(ownerType.propertyName)"예를 들어, "(Canvas.Top)"는 Canvas를 지정합니다.Top 등록 정보.
다른 유형의 속성을 지정할 때 사용하는 구문: "proeprtyName"예를 들어, Opacity는 Opacity 속성을 지정합니다.

BeginTime: Timeline이 시작된 시간입니다.여기서 기본 단위는 "하늘"이므로 사용하는 구문에 주의하십시오(단순히 2로 설정하면 BeginTime이 2일!).시간, 분 및 초를 지정하려면 다음 구문을 사용합니다. "시간: 분: 초."예를 들어, 0:0:2는 BeginTime을 2초(0시간, 0분, 2초)로 설정합니다.BeginTime을 지정하지 않으면 이 속성의 값은 기본적으로 0초가 됩니다.
Duration: Timeline을 한 번 실행하는 데 필요한 시간입니다.애니메이션의 경우 시작 값에서 끝 값까지 소요되는 시간을 나타냅니다.Duration 속성은 BeginTime과 동일한 구문을 사용합니다.다시 한 번 강조하지만, 당신이'초'를 표시하고 싶을 때'시간'으로 설정하지 않도록 주의하세요!Duration은 "Forever"및 "Automatic"두 가지 특별한 값으로 설정할 수 있습니다.이 속성의 기본값은 Automatic입니다.두 특수 값에 대한 자세한 내용은 WPF/E SDK의 Duration 관련 단원을 참조하십시오.
FillBehavior: Timeline이 중지된 후 수행되는 작업을 지정합니다.이 속성에는 Stop 또는 HoldEnd라는 두 가지 값을 사용할 수 있습니다.Stop은 다시 Timeline이 끝날 때 작업의 속성을 시작값으로 설정합니다."HoldEnd"설명은 작업 중인 속성이 다시 끝날 때 마지막 값을 그대로 유지합니다.이 속성의 기본값은 HoldEnd입니다.
RepeatBehavior: Timeline이 반복되는 횟수를 나타냅니다.이 속성은 반복 횟수, 시간, 그리고 특수 값인 'Forever' 세 가지 형식으로 설정할 수 있습니다.
Forever는 Timeline을 계속 반복합니다.
시간 단위는 Timeline이 실행되는 시간을 나타냅니다.예를 들어, Duration이 2.5초인 애니메이션의 RepeatBehavior를 "0:0:5"로 설정하면 애니메이션이 두 번 반복됩니다.
반복 횟수는 Timeline 실행 횟수를 지정합니다.다음 문법을 사용하여 중복 횟수를 지정합니다: 중복 횟수 x.예를 들어, 4x는 Timeline이 네 번 반복됨을 나타냅니다.
이 속성의 기본값은 "1x"로 타임라인이 한 번만 실행된다는 것을 나타냅니다.
다음 예에서는 이러한 Timeline 의 속성을 보여 줍니다.

<Storyboard 
    Storyboard.TargetName="e1"
    Storyboard.TargetProperty="(Canvas.Left)"
    BeginTime="0:0:1">
    <DoubleAnimation To="300" />
    <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
    <DoubleAnimation To="80" Storyboard.TargetName="e3"
        Storyboard.TargetProperty="Width"/>
    <DoubleAnimation From="200" To="300" 
        Storyboard.TargetName="e4"/>
    <DoubleAnimation To="300" Duration="0:0:5.3"
        Storyboard.TargetName="e5"/>
    <DoubleAnimation FillBehavior="HoldEnd" To="200"
        Storyboard.TargetName="e6"/>
    <DoubleAnimation FillBehavior="Stop" To="200"
        Storyboard.TargetName="e7"/>
    <DoubleAnimation RepeatBehavior="Forever" To="300"
        Storyboard.TargetName="e8"/>
</Storyboard>

숨겨진 내용 다시 시작
 
애니메이션 변환의 값 지정하기
　　
DoubleAnimation,
ColorAnimation 및
PointAnimation 다 있어요.
From 및
To 두 속성은 작동 중인 속성의 시작값과 끝값을 지정하는 데 사용됩니다.하면, 만약, 만약...
From 속성의 값, 시작 값은 작업 중인 속성의 현재 값입니다.또한
By 속성은 를 사용하는 대신 오프셋 크기를 설정합니다.
To 속성은 속성의 끝 값을 설정합니다.
 
동일한 객체에 여러 애니메이션 추가
여러 애니메이션을 사용하여 동일한 객체의 동일한 속성을 조작할 수 있습니다.애니메이션을 순서대로 실행하려면
BeginTime 및
Duration을 적절한 값으로 설정합니다.다음 예제에서는 두 애니메이션을 같은 속성에 적용하고 두 번째 애니메이션은 첫 번째 애니메이션이 끝난 후에 시작합니다.

<Storyboard 
    Storyboard.TargetName="e1"
    Storyboard.TargetProperty="(Canvas.Left)">
    <DoubleAnimation BeginTime="0" Duration="0:0:2" To="250" />
    <DoubleAnimation BeginTime="0:0:2" Duration="0:0:2" To="20" />
</Storyboard>

숨겨진 내용 다시 시작
 
다음은 뭘 해야 되지?
다음 섹션 [스크립트 및 마우스 이벤트]에서는 JavaScript 코드를 사용하여 상호 작용을 추가하는 방법에 대해 설명합니다.
본문은 "조온"블로그에서 나왔습니다. 전재는 작가에게 연락하세요!