Silverlight의 애니메이션 상해(흔한 문제 및 난치병만)

이 문서는 silverlight 애니메이션에서 발생하는 문제점을 지적하기 위한 것입니다.
1. 애니메이션 즉 (StoryBoard.Begin) 을 설정하거나 애니메이션을 로드한 후 대상 객체 속성의 값을 설정할 수 없습니다.
제목이 약간 까다로울 수 있으니 아래의 코드를 보면 알 수 있다.

            Storyboard sb = new Storyboard();
            DoubleAnimation animation = new DoubleAnimation();
            animation.Duration = TimeSpan.FromSeconds(2);
            animation.AutoReverse = true;
            animation.From = 100;
            animation.To = 400;
            Storyboard.SetTarget(animation, myRec);
            Storyboard.SetTargetProperty(animation,new PropertyPath("Height"));
            sb.Children.Add(animation);
            sb.Begin();

            myRec.Height = 300;

위의 코드는 주로 myRec (Rectangle) 의 Height를 수정하는 데 사용되는 더블 형식의 애니메이션을 만듭니다.관건적인 문제가 왔습니다. sb에서 볼 수 있습니다.Begin() 뒤에 myRec의 Height 속성이 수동으로 수정됩니다.
비극이 발생하면 우리의 이 수정은 무효라는 것을 알게 될 것이다. 이 상황을 초래한 것은 애니메이션이 끝난 후에 이 새로운 속성의 값을 유지했기 때문에 더 이상 이 속성의 값을 수정할 수 없다. 그러나 해가 있을 염려는 없다.
결정적 방법.
1. Animation의 FillBehavior를 Stop으로 수정하면 정지 상태를 유지할 수 있습니다. 그러면 그 다음에 속성을 수정하면 됩니다.
2. StoryBoard에 Complete 이벤트 추가

    sb.Completed += new EventHandler(sb_Completed);

    void sb_Completed(object sender, EventArgs e)
        {
            Storyboard sb = sender as Storyboard;
            sb.Stop();
            myRec.Height = 300;
        }

Complete 이벤트에서 StoryBoard의 Stop 메서드를 호출하여 애니메이션을 중지한 다음 속성에 값을 지정하는 것을 볼 수 있습니다.
2. 애니메이션의 RepeatBehavior 속성(중복 행위)은 애니메이션의 중복 효과를 설정하는 데 사용되며, Forever(끊임없이 중복), 중복 횟수로 설정하거나 일정 시간 중복으로 설정할 수 있다.
반복 횟수로 설정하기

<DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="2x"
Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation>

여기에 설정된 것은 2x이고, 그의 문법은num*x이며, 뜻은 2회이다.백엔드 코드 설정 방법:

widthAnimation.RepeatBehavior = new RepeatBehavior(2);

 
일정 시간 중복으로 설정하기

<DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="0:0:13"
Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation>

여기서는 13초간 반복 설정됩니다.
백엔드 코드 설정 방법:

widthAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(13));

3. FillBehavior 속성과 AutoReverse 속성 혼합 설정
FillBehavior의 기본 속성은 HoldEnd(완성 후 속성 유지 상태)이고 Stop(완성 후 초기 값 유지)도 있습니다.
AutoReverse 속성의 기본값은 false입니다. 즉, 원래 경로로 되돌아오지 않으며true로 설정하여 원래 경로로 되돌아갈 수 있습니다.
 
FillBehavior    AutoReverse       
HoldEnd False 이후 애니메이션 상태 유지
Stop Flase가 실행된 후 즉시 초기 상태로 돌아갑니다.
HoldEnd True가 실행되면 원래 경로로 되돌아오며 HoldEnd 유지 사항은 무시됩니다.
Stop True 가 실행된 후 원래 경로로 돌아가면 이전 효과와 동일합니다
 
4. BeginTime(애니메이션 시작 시간) 및 SpeedRatio(애니메이션 속도)
BeginTime은 여러 애니메이션 사이의 이마 병발을 해결하는 데 효과적이며 여러 애니메이션(같은 부모)을 동시에 실행할 수 있습니다.BeginTime은 (BeginTime이 양수일 경우) 및 실행 부분(음수일 경우
Duration-BeginTime 시간 내에 실행됨).
 
양의 BeginTime 값은 Timeline 동작을 일정 시간 연장합니다.예를 들어 BeginTime이 5이고 Duration이 5초인 Timeline 전체 애니메이션은 5초 지연된 후에 애니메이션 실행을 시작합니다.
이 예에서는 BeginTime이 5이고 애니메이션 Duration이 5이면 애니메이션이 5초 지연되어 시작됩니다.

<DoubleAnimation Duration="0:0:5"  BeginTime="0:0:5" From="100"  To="300" Storyboard.TargetName="myRec" Storyboard.TargetProperty="Width"></DoubleAnimation>

마이너스 BeginTime 값은 Timeline(Animation 기본 클래스)의 행동을 과거 어느 시간에 시작한 것처럼 합니다.예를 들어 BeginTime이 -2.5초이고 Duration가 5초인 Timeline는 처음부터 절반을 완성한 것처럼 보일 것이다.
이 예에서 Begintime은 -2.5로 전체 애니메이션의 지속 시간은 2.5초에 불과하고 처음부터 절반을 완성한 것처럼 보인다.

<ColorAnimation Duration="0:0:5" BeginTime="-0:0:2.5" From="Red" To="Green" Storyboard.TargetName="myRec" Storyboard.TargetProperty="(Fill).(Color)"></ColorAnimation>

타임라인의 BeginTime 속성은 타임라인의 활동 기간의 시작 시간을 결정합니다.만약 이 타임라인에 부모 타임라인이 있다면 BeginTime 속성은 부모 타임라인(Parallel Timeline 같은 것이 WPF에서 제공하는 Silverlight 원본 dll에서 발견되지 않고 자Timeline 대상을 포함할 수 있는 시간대를 정의합니다.이러한 서브타임라인은 각 속성BeginTime에 따라 활성 상태가 됩니다.또한 서브타임라인이 서로 중첩될 수도 있습니다(병렬 실행).부팅 후 이 시간선은 얼마나 걸려야 부팅할 수 있습니까?
이 예에서 Parallel Timeline의 BeginTime은 5초, 애니메이션의 Begin은 5초로 전체 애니메이션이 10초 지연됩니다.

<ParallelTimeline BeginTime="0:0:5">
            <DoubleAnimation Storyboard.TargetName="DelayedAnimationWithDelayedParentRectangle"Storyboard.TargetProperty="Width"BeginTime="0:0:5"From="100"To="600"Duration="0:0:5"/>
            </ParallelTimeline>

SpeedRatio는 애니메이션의 빠른 실행을 지원하지만, 이 SpeedRatio는 BeginTime 이후에 애니메이션이 실행되기 때문에 BeginTime에 영향을 주지 않습니다.
속도는 2이지만 전체 애니메이션은 Begin Time 5초 후에 실행됩니다. 왜냐하면 이 속도는 애니메이션에만 효과가 있고 BeginTime 이후 애니메이션의 속도에 불과하기 때문입니다.

<DoubleAnimation Duration="0:0:5"  SpeedRatio="2"  BeginTime="0:0:5" From="100"  To="300" Storyboard.TargetName="myRec" Storyboard.TargetProperty="Width"></DoubleAnimation>

 
5. StoryBoard 객체
StoryBoard는 더 이상 무엇을 설명하지 않는지, 그 방법에 대해 소개한다.
Begin 애니메이션을 시작하고Pause (Storyboard) 애니메이션을 중지하고Resume StoryBoard 애니메이션을 계속 재생하고Seek StoryBoard를 지정한 시간대로 이동하고Stop (Storyboard) 애니메이션을 중지합니다.
이상의 방법은 Seek 이외에 StoryBoard 대상을 직접 사용해서 호출합니다. Seek의 호출 방법을 보십시오.

  sb.Seek(TimeSpan.FromSeconds(3));

이런 방식은 애니메이션을 3초 위치로 직접 배치한다.

fadeStoryboard.Seek(
TimeSpan.FromSeconds(fadeAnimation.Duration.TimeSpan.TotalSeconds/2));

애니메이션을 가운데로 지정합니다(여기서 fadeAnimation은 Animation).
 
6. Duration, 이 속성도 잘못 쓸 때가 있다. 이 속성은 애니메이션이 실행되는 시간을 나타낸다. 형식은 0:0:0이다. 이런 형식이다. 본인은 실례 과정에서 게으름을 피워서 10개만 썼기 때문에 애니메이션이 아무리 해도 실행되지 않는다. 마지막에 Duration의 형식 오류로 인해 발생한 것이다.
 
 
7. 키프레임 애니메이션(이전에 말한 것은 거의 삽입 애니메이션의 사용법이다. 다음은 복잡한 애니메이션 키프레임 애니메이션을 소개한다. 키프레임 애니메이션은 가속도와 감속도를 포함한 더욱 진실한 애니메이션을 실현할 수 있다. 선형 삽입 애니메이션은 두 속성 값 사이에서 네가 점차적으로 변화하는 것이다.반면 키프레임 애니메이션은 여러 대상 속성 값 사이에서 그래디언트할 수 있습니다(선형 보간 애니메이션은 From과 To 및 By 속성을 지정하여 애니메이션을 일정 시간 안에 완성할 수 있고 키프레임 애니메이션은 Value를 통해 애니메이션을 특정한 시간에 특정한 속성의 값에 이르게 하는 것입니다).
키프레임 애니메이션 요소의 이름은 다음과 같은 온라인 애니메이션 이름 뒤에 UsingkeyFrames가 붙습니다.
DoubleAnimationUsingkeyFrames(Doubel 키프레임 애니메이션)
ColorAnimationUsingKeyFrames(Color 키프레임 애니메이션)
PointAnimationUsingKeyFrames(Point 키프레임 애니메이션)
위의 세 가지 키프레임 애니메이션은 Linear(선형), Discrete(이산), Splined(다중 키) 등 세 가지 서로 다른 키프레임 트윈 유형을 지원합니다. 다음 표에 나와 있습니다.
이름:
서식
묘사
Linear
Linear 유형 KeyFrame
목표 속성의 값이 지속 시간 내에 고정 주파수의 점차적인 변화를 일으키고 그 속성 값은 때때로 반영된다
Discrete
Discrete 유형 KeyFrame
대상 속성의 값을 한 값에서 다음 값으로 바로 건너뛸 수 있습니다. 이 과정은 점차적인 효과가 나타나지 않고 결과만 표시됩니다.
Splined
Splined 유형 KeyFrame
대상 속성 값에 정확한 그래디언트를 생성하고 keyspline 속성을 통해 보다 사실적인 애니메이션을 시뮬레이션할 수 있습니다.
 
키프레임 애니메이션에는 두 가지 중요한 속성인 KeyTime 속성과 Value 속성이 포함되어 있는데, KeyTime 속성이 지정한 시점에 목표의 Value를 제어하는 역할을 한다. 즉, KeyTime은 이 키프레임에 도달할 때를 지정하는 Value이다. 여기서 KeyTime는 이 애니메이션이 얼마나 오래 지속되는지가 아니라 이 시점에 나타나는 효과가 Value임을 명심해라.이 점은 선형 플러그인 애니메이션 중의 Duration과 다르다(Duration은 이 애니메이션이 얼마나 오래 지속되는지 나타낸다). 물론 이것은 선형 플러그인 애니메이션이 한 애니메이션에 여러 개의 애니메이션이 있을 수 없기 때문에 Duration의 본질은 KeyTime와 일치해야 한다. 관건적인 프레임에 한 애니메이션이 여러 개의 효과를 포함할 수 있기 때문에 어느 순간에 대응하는 애니메이션이 생겼다.

        <Storyboard x:Name="myStory1">
           <!—Linear   -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse1"
              Storyboard.TargetProperty=" (UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <LinearDoubleKeyFrame Value="500" KeyTime="00:00:02"></LinearDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

 

        <Storyboard x:Name="myStory2">
            <!—Discrete   -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse2"   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">

                <DiscreteDoubleKeyFrame Value="500" KeyTime="00:00:2.5"></DiscreteDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

 
이게 어려운 건데,여기 Spline이 두 개보다 더 많아요. 속성이 바로 KeySpline이에요.(이 키프레임의 애니메이션 진행률을 정의하는 두 개의 제어점, 두 개의 제어점을 가져오거나 설정합니다. 키프레임 진행률을 정의하는 세 개의 베지어 곡선을 지정할 수 있습니다. 키프레임을 설명할 때 베지어 곡선의 시작점은 항상 0이고 끝점은 항상 1입니다. 이것은 두 개의 제어점만 정의하는 이유입니다. 생성된 곡선은 한 시간 동안 애니메이션을 삽입하는 방법을 지정합니다. 즉, 이 곡선은 이 시간 동안 애니메이션을 움직이는 방법을 나타냅니다.그림% 1개의 캡션을 편집했습니다.

 <Storyboard x:Name="myStory3">

                <!—Splin   -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse3" BeginTime="00:00:00"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:4.5" KeySpline="0,0 1,0" Value="500"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

 

     LinearColorKeyFrame       

<Storyboard>
  <!--  ColorAnimationUsingKeyFrames-->
 <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="myEllipse" 
Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">
<LinearColorKeyFrame  Value="Yellow" KeyTime="00:00:1"></LinearColorKeyFrame>
<LinearColorKeyFrame  Value="Red" KeyTime="00:00:2"></LinearColorKeyFrame>
 <LinearColorKeyFrame  Value="Green" KeyTime="00:00:4"></LinearColorKeyFrame>
</ColorAnimationUsingKeyFrames>
</Storyboard

 
여러 LinearPointKeyFrame을 사용하여 좌표 변경

<Storyboard>
<PointAnimationUsingKeyFrames Storyboard.TargetName="myEllipse1"    Storyboard.TargetProperty="Center" AutoReverse="True">
<LinearPointKeyFrame  Value="50,50" KeyTime="0:0:0"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="250,230" KeyTime="0:0:2"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="450,50" KeyTime="0:0:4"></LinearPointKeyFrame>
 <LinearPointKeyFrame   Value="650,230" KeyTime="0:0:6"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="900,50" KeyTime="0:0:8"></LinearPointKeyFrame>
 </PointAnimationUsingKeyFrames>
</Storyboard>

상기 세 가지 관건 프레임 애니메이션이 지원하는 유형 외에 또 하나의 Easing Point Key Frame(Easing Double Key Frame, Easing Color Key Frame)이 있는데 바로 그입니다. 익숙하지 않습니까?
예. Ease 효과를 사용한 키프레임 애니메이션입니다. 사용법을 보십시오.

  <DoubleAnimationUsingKeyFrames>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="12">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase></BackEase>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>

그들은 단독으로 사용할 수 없기 때문에 Double Animation Using Key Frames나 Color Animation Using Key Frames나 Point Animation Using Key Frames와 함께 사용해야 한다. Key Time 및Value와 가장 중요한 Easing Function, Easing Function 용법과 Ease의 용법을 지정할 수 있다. 자세한 내용은 본 블로그의 다른 글을 참조할 수 있다.