[C#/SILVERLIGHT] PointAnimationUsingKeyFrames 엘리먼트 : 실행시 자식 속성 동적 사용하기

■ PointAnimationUsingKeyFrames 엘리먼트를 사용하는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Canvas Name="canvas"
    Width="600"
    Height="500"
    Background="Gray"
    MouseLeftButtonDown="canvas_MouseLeftButtonDown">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <PointAnimationUsingKeyFrames x:Name="pointAnimationUsingKeyFrames"
                Storyboard.TargetName="ellipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:3">
                <DiscretePointKeyFrame KeyTime="0:0:0"   />
                <LinearPointKeyFrame   KeyTime="0:0:0.5" />
                <SplinePointKeyFrame   KeyTime="0:0:3"   KeySpline="0.6,0.0 0.9,0.00" />
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
            <EllipseGeometry x:Name="ellipseGeometry"
                Center="200 100"
                RadiusX="15"
                RadiusY="15" />
        </Path.Data>
    </Path>
</Canvas>

<Canvas Name="canvas"

Width="600"

Height="500"

Background="Gray"

MouseLeftButtonDown="canvas_MouseLeftButtonDown">

<Canvas.Resources>

<PointAnimationUsingKeyFrames x:Name="pointAnimationUsingKeyFrames"

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="0:0:3">

</PointAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="200 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

</Path>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

/// <summary>
/// 이전 X
/// </summary>
double previousX = 200d;

/// <summary>
/// 이전 Y
/// </summary>
double previousY = 100d;

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>
/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
public void canvas_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    double newX = e.GetPosition(this.canvas).X;
    double newY = e.GetPosition(this.canvas).Y;

    for(int i = 0; i < this.pointAnimationUsingKeyFrames.KeyFrames.Count; i++)
    {
        PointKeyFrame pointKeyFrame = this.pointAnimationUsingKeyFrames.KeyFrames[i];

        if(pointKeyFrame.GetType().Name == "DiscretePointKeyFrame")
        {
            pointKeyFrame.SetValue(DiscretePointKeyFrame.ValueProperty, new Point(this.previousX, this.previousY));
        }
        else if(pointKeyFrame.GetType().Name == "LinearPointKeyFrame")
        {
            double slope = (newY - this.previousY) / (newX - this.previousX);

            double interceptY = newY - (slope * newX);

            double itermediateX  = this.previousX + (newX - this.previousX) / 3d;
            double intermediateY = (slope * itermediateX) + interceptY;

            pointKeyFrame.SetValue(LinearPointKeyFrame.ValueProperty, new Point(itermediateX, intermediateY));
        }
        else if(pointKeyFrame.GetType().Name == "SplinePointKeyFrame")
        {
            pointKeyFrame.SetValue(SplinePointKeyFrame.ValueProperty, new Point(newX, newY));
        }
    }

    this.storyboard.Stop();
    this.storyboard.Begin();

    this.previousX = newX;
    this.previousY = newY;
}

#endregion

using System.Windows;

using System.Windows.Input;

using System.Windows.Media.Animation;

/// <summary>

/// 이전 X

/// </summary>

double previousX = 200d;

/// <summary>

/// 이전 Y

/// </summary>

double previousY = 100d;

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>

/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

public void canvas_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

double newX = e.GetPosition(this.canvas).X;

double newY = e.GetPosition(this.canvas).Y;

for(int i = 0; i < this.pointAnimationUsingKeyFrames.KeyFrames.Count; i++)

{

PointKeyFrame pointKeyFrame = this.pointAnimationUsingKeyFrames.KeyFrames[i];

if(pointKeyFrame.GetType().Name == "DiscretePointKeyFrame")

{

pointKeyFrame.SetValue(DiscretePointKeyFrame.ValueProperty, new Point(this.previousX, this.previousY));

}

else if(pointKeyFrame.GetType().Name == "LinearPointKeyFrame")

{

double slope = (newY - this.previousY) / (newX - this.previousX);

double interceptY = newY - (slope * newX);

double itermediateX = this.previousX + (newX - this.previousX) / 3d;

double intermediateY = (slope * itermediateX) + interceptY;

pointKeyFrame.SetValue(LinearPointKeyFrame.ValueProperty, new Point(itermediateX, intermediateY));

}

else if(pointKeyFrame.GetType().Name == "SplinePointKeyFrame")

{

pointKeyFrame.SetValue(SplinePointKeyFrame.ValueProperty, new Point(newX, newY));

}

this.storyboard.Stop();

this.storyboard.Begin();

this.previousX = newX;

this.previousY = newY;

}

#endregion