ANIMATION Archives - 17 중 16 번째 페이지

[C#/SILVERLIGHT] PointAnimation 엘리먼트 : 실행시 To 속성 동적 변경하기

■ PointAnimation 엘리먼트를 사용해 실행시 속성을 동적 변경하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas Name="canvas"
    Width="600"
    Height="500"
    Background="Gray"
    MouseLeftButtonDown="canvas_MouseLeftButtonDown">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <PointAnimation
                x:Name="pointAnimation"
                Storyboard.TargetName="ellipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:2" />
        </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>

<PointAnimation

x:Name="pointAnimation"

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="0:0:2" />

</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;

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

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

    Point toPoint = new Point();

    toPoint.X = newX;
    toPoint.Y = newY;

    this.pointAnimation.To = toPoint;

    this.storyboard.Begin();
}

#endregion

using System.Windows;

using System.Windows.Input;

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

/// <summary>

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

/// </summary>

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

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

private void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

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

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

Point toPoint = new Point();

toPoint.X = newX;

toPoint.Y = newY;

this.pointAnimation.To = toPoint;

this.storyboard.Begin();

}

#endregion

[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

[C#/SILVERLIGHT] SplineDoubleKeyFrame 엘리먼트 사용하기

■ SplineDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:15">
                <SplineDoubleKeyFrame KeyTime="0:0:7"  Value="500" KeySpline="0.0 1.0 1.0 0.0" />
                <SplineDoubleKeyFrame KeyTime="0:0:10" Value="200" KeySpline="0.0 0.0 1.0 0.0" />
                <SplineDoubleKeyFrame KeyTime="0:0:15" Value="350" KeySpline="0.25 0.5 0.75 1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        Width="50"
        Height="50"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform"
                X="0"
                Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="0:0:15">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

Width="50"

Height="50"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown">

<Rectangle.RenderTransform>

<TranslateTransform x:Name="translateTransform"

X="0"

Y="0" />

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

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

■ Storyboard 엘리먼트에서 실행시 TargetName 속성을 동적 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation x:Name="doubleAnimation"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="rectangle1"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle2"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle3"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle4"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</StackPanel>

<StackPanel.Resources>

<DoubleAnimation x:Name="doubleAnimation"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="rectangle1"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle2"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle3"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle4"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</StackPanel>

▶ 예제 코드 (C#)


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

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Stop();

    Rectangle rectangle = pSender as Rectangle;

    this.doubleAnimation.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Stop();

Rectangle rectangle = pSender as Rectangle;

this.doubleAnimation.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 실행시 동적 할당하기

■ Storyboard 엘리먼트에서 실행시 동적으로 할당하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Storyboard x:Name="storyboard1"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation1"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
        <Storyboard x:Name="storyboard2"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation2"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
        <Storyboard x:Name="storyboard3"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation3"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="rectangle1"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle2"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle3"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle4"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</StackPanel>

<StackPanel.Resources>

<Storyboard x:Name="storyboard1"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation1"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

<Storyboard x:Name="storyboard2"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation2"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

<Storyboard x:Name="storyboard3"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation3"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="rectangle1"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle2"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle3"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle4"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</StackPanel>

▶ 예제 코드 (C#)


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

/// <summary>
/// 스토리보드 1 활성 여부
/// </summary>
bool isStoryboard1Active = false;

/// <summary>
/// 스토리보드 2 활성 여부
/// </summary>
bool isStoryboard2Active = false;

/// <summary>
/// 스토리보드 3 활성 여부
/// </summary>
bool isStoryboard3Active = false;

#region 스토리보드 완료시 처리하기 - storyboard_Completed(sender, e)

/// <summary>
/// 스토리보드 완료시 처리하기
/// </summary>
/// <param name="pSender">이벤트 발생자</param>
/// <param name="pEventArgs">이벤트 인자</param>
private void storyboard_Completed(object sender, EventArgs e)
{
    Storyboard storyboard = sender as Storyboard;

    switch(storyboard.GetValue(NameProperty).ToString())
    {
        case "storyboard1" : this.isStoryboard1Active = false; break;
        case "storyboard2" : this.isStoryboard2Active = false; break;
        case "storyboard3" : this.isStoryboard3Active = false; break;
    }
}

#endregion

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    Rectangle rectangle = pSender as Rectangle;

    if(!this.isStoryboard1Active)
    {
        this.storyboard1.Stop();

        this.doubleAnimation1.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard1.Begin();

        this.isStoryboard1Active = true;
    }
    else if(!this.isStoryboard2Active)
    {
        this.storyboard2.Stop();

        this.doubleAnimation2.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard2.Begin();

        this.isStoryboard2Active = true;
    }
    else if(!this.isStoryboard3Active)
    {
        this.storyboard3.Stop();

        this.doubleAnimation3.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard3.Begin();

        this.isStoryboard3Active = true;
    }
}

#endregion

using System;

using System.Windows.Input;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

/// <summary>

/// 스토리보드 1 활성 여부

/// </summary>

bool isStoryboard1Active = false;

/// <summary>

/// 스토리보드 2 활성 여부

/// </summary>

bool isStoryboard2Active = false;

/// <summary>

/// 스토리보드 3 활성 여부

/// </summary>

bool isStoryboard3Active = false;

#region 스토리보드 완료시 처리하기 - storyboard_Completed(sender, e)

/// <summary>

/// 스토리보드 완료시 처리하기

/// </summary>

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

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

private void storyboard_Completed(object sender, EventArgs e)

{

Storyboard storyboard = sender as Storyboard;

switch(storyboard.GetValue(NameProperty).ToString())

{

case "storyboard1" : this.isStoryboard1Active = false; break;

case "storyboard2" : this.isStoryboard2Active = false; break;

case "storyboard3" : this.isStoryboard3Active = false; break;

}

#endregion

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

Rectangle rectangle = pSender as Rectangle;

if(!this.isStoryboard1Active)

{

this.storyboard1.Stop();

this.doubleAnimation1.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard1.Begin();

this.isStoryboard1Active = true;

}

else if(!this.isStoryboard2Active)

{

this.storyboard2.Stop();

this.doubleAnimation2.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard2.Begin();

this.isStoryboard2Active = true;

}

else if(!this.isStoryboard3Active)

{

this.storyboard3.Stop();

this.doubleAnimation3.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard3.Begin();

this.isStoryboard3Active = true;

}

#endregion

[C#/SILVERLIGHT] DoubleAnimation 엘리먼트 : 사각형을 투명하게 만들기

■ DoubleAnimation 엘리먼트를 사용해 사각형을 투명하게 하는 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Opacity"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="0:0:1"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </Grid.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Grid>

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Opacity"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="0:0:1"

From="1.0"

To="0.0" />

</Storyboard>

</Grid.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] BounceEase 엘리먼트 : 사각형 높이 늘리기

■ BounceEase 엘리먼트를 사용해 사각형의 높이를 늘리는 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="00:00:03"
                From="30"
                To="200">
                <DoubleAnimation.EasingFunction>
                    <BounceEase
                        EasingMode="EaseOut"
                        Bounces="3"
                        Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="30"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="200">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="3"

Bounciness="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="30"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] EasingDoubleKeyFrame 엘리먼트 사용하기

■ EasingDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height">
                <EasingDoubleKeyFrame
                    KeyTime="00:00:02"
                    Value="30">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame
                    KeyTime="00:00:06"
                    Value="200" >
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BounceEase Bounces="5" EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="200"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height">

<EasingDoubleKeyFrame

KeyTime="00:00:02"

Value="30">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame

KeyTime="00:00:06"

Value="200" >

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] EasingFunctionBase 클래스 : 커스텀 Easing 함수 정의하기

■ EasingFunctionBase 클래스를 사용해 커스텀 Easing 함수를 정의하는 방법을 보여준다. ▶ MainPage.xaml


...

<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="00:00:03"
                From="30"
                To="300">
                <DoubleAnimation.EasingFunction>
                    <local:CustomEasingFunction EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="30"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

...

...

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="300">

<DoubleAnimation.EasingFunction>

<local:CustomEasingFunction EasingMode="EaseIn" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="30"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

...

▶ MainPage.xaml.cs


using System.Windows.Input;

...

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="eMouseEventArgs">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

...

using System.Windows.Input;

...

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

...

▶ CustomEasingFunction.cs


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

/// <summary>
/// 커스텀 Easing 함수
/// </summary>
public class CustomEasingFunction : EasingFunctionBase
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CustomEasingFunction()

    /// <summary>
    /// 생성자
    /// </summary>
    public CustomEasingFunction() : base()
    {
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기 - EaseInCore(normalizedTime)

    /// <summary>
    /// 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기
    /// </summary>
    /// <param name="normalizedTime">정규화된 시간</param>
    /// <returns>변환된 진행률</returns>
    protected override double EaseInCore(double normalizedTime)
    {
        return Math.Pow(normalizedTime, 7);
    }

    #endregion
}

using System;

using System.Windows.Media.Animation;

/// <summary>

/// 커스텀 Easing 함수

/// </summary>

public class CustomEasingFunction : EasingFunctionBase

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - CustomEasingFunction()

/// <summary>

/// 생성자

/// </summary>

public CustomEasingFunction() : base()

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기 - EaseInCore(normalizedTime)

/// <summary>

/// 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기

/// </summary>

/// <param name="normalizedTime">정규화된 시간</param>

/// <returns>변환된 진행률</returns>

protected override double EaseInCore(double normalizedTime)

{

return Math.Pow(normalizedTime, 7);

}

#endregion

}

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 애니메이션 제어하기

■ Storyboard 엘리먼트를 사용해 애니메이션을 제어하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel>
    <TextBlock
        Margin="10"
        TextWrapping="Wrap">
        This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.
    </TextBlock>
    <Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="storyboard">
                <PointAnimation
                    Storyboard.TargetName="ellipseGeometry"
                    Storyboard.TargetProperty="Center"
                    RepeatBehavior="Forever"
                    Duration="0:0:5"
                    From="20 200"
                    To="400 100" />
            </Storyboard>
        </Canvas.Resources>
        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="20 200"
                    RadiusX="15"
                    RadiusY="15" />
            </Path.Data>
        </Path>
        <StackPanel
            Canvas.Left="10"
            Canvas.Top="265"
            Orientation="Horizontal">
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Begin"
                Click="beginButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Pause"
                Click="pauseButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Resume"
                Click="resumeButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Stop"
                Click="stopButton_Click" />
        </StackPanel>
    </Canvas>
</StackPanel>

<TextBlock

Margin="10"

TextWrapping="Wrap">

This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.

</TextBlock>

<Canvas.Resources>

<PointAnimation

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

RepeatBehavior="Forever"

Duration="0:0:5"

From="20 200"

To="400 100" />

</Storyboard>

</Canvas.Resources>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="20 200"

RadiusX="15"

RadiusY="15" />

</Path.Data>

</Path>

<StackPanel

Canvas.Left="10"

Canvas.Top="265"

Orientation="Horizontal">

<Button

Margin="2"

Width="65"

Height="30"

Content="Begin"

Click="beginButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Pause"

Click="pauseButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Resume"

Click="resumeButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Stop"

Click="stopButton_Click" />

</StackPanel>

</Canvas>

</StackPanel>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region Begin 버튼 클릭시 처리하기 - beginButton_Click(sender, e)

/// <summary>
/// Begin 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void beginButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>
/// Pause 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void pauseButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Pause();
}

#endregion

#region Resume 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

/// <summary>
/// Resume 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void resumeButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Resume();
}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>
/// Stop 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void stopButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Stop();
}

#endregion

using System.Windows.Input;

#region Begin 버튼 클릭시 처리하기 - beginButton_Click(sender, e)

/// <summary>

/// Begin 버튼 클릭시 처리하기

/// </summary>

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

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

private void beginButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Begin();

}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>

/// Pause 버튼 클릭시 처리하기

/// </summary>

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

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

private void pauseButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Pause();

}

#endregion

#region Resume 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

/// <summary>

/// Resume 버튼 클릭시 처리하기

/// </summary>

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

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

private void resumeButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Resume();

}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>

/// Stop 버튼 클릭시 처리하기

/// </summary>

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

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

private void stopButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Stop();

}

#endregion

[C#/SILVERLIGHT] Storyboard 클래스 : 코드 구현하기

■ Storyboard 클래스를 사용해 코드로 구현하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas" />

▶ 예제 코드 (C#)


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

Rectangle rectangle = new Rectangle();

rectangle.Width  = 200d;
rectangle.Height = 200d;

Color color = Color.FromArgb(255, 255, 0, 0);

SolidColorBrush solidColorBrush = new SolidColorBrush();

solidColorBrush.Color = color;

rectangle.Fill = solidColorBrush;

this.canvas.Children.Add(rectangle);


Duration duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimation leftDoubleAnimation = new DoubleAnimation();
DoubleAnimation topDoubleAnimation  = new DoubleAnimation();

leftDoubleAnimation.Duration = duration;
topDoubleAnimation.Duration  = duration;


Storyboard storyboard = new Storyboard();

storyboard.Children.Add(leftDoubleAnimation);
storyboard.Children.Add(topDoubleAnimation );

Storyboard.SetTarget(leftDoubleAnimation, rectangle);
Storyboard.SetTarget(topDoubleAnimation , rectangle);

Storyboard.SetTargetProperty(leftDoubleAnimation, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(topDoubleAnimation , new PropertyPath("(Canvas.Top)" ));

leftDoubleAnimation.To = 200d;
topDoubleAnimation.To  = 200d;

this.canvas.Resources.Add("StoryboardKey", storyboard);

storyboard.Begin();

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

Rectangle rectangle = new Rectangle();

rectangle.Width = 200d;

rectangle.Height = 200d;

Color color = Color.FromArgb(255, 255, 0, 0);

SolidColorBrush solidColorBrush = new SolidColorBrush();

solidColorBrush.Color = color;

rectangle.Fill = solidColorBrush;

this.canvas.Children.Add(rectangle);

Duration duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimation leftDoubleAnimation = new DoubleAnimation();

DoubleAnimation topDoubleAnimation = new DoubleAnimation();

leftDoubleAnimation.Duration = duration;

topDoubleAnimation.Duration = duration;

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(leftDoubleAnimation);

storyboard.Children.Add(topDoubleAnimation );

Storyboard.SetTarget(leftDoubleAnimation, rectangle);

Storyboard.SetTarget(topDoubleAnimation , rectangle);

Storyboard.SetTargetProperty(leftDoubleAnimation, new PropertyPath("(Canvas.Left)"));

Storyboard.SetTargetProperty(topDoubleAnimation , new PropertyPath("(Canvas.Top)" ));

leftDoubleAnimation.To = 200d;

topDoubleAnimation.To = 200d;

this.canvas.Resources.Add("StoryboardKey", storyboard);

storyboard.Begin();

※ WPF에서는 Storyboard.SetTarget 메소드가

[C#/SILVERLIGHT] Storyboard 클래스 : TargetName 첨부 속성을 사용해 속성 간접 설정하기

■ Storyboard 클래스의 TargetName 첨부 속성을 사용해 속성을 간접 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <ColorAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="00:00:01"
                From="Blue"
                To="Yellow" />
        </Storyboard>
    </Grid.Resources>
    <Rectangle x:Name="rectangle"
        Width="200"
        Height="200"
        StrokeThickness="10"
        Stroke="Blue"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Grid>

<Grid>

<Grid.Resources>

<ColorAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="00:00:01"

From="Blue"

To="Yellow" />

</Storyboard>

</Grid.Resources>

<Rectangle x:Name="rectangle"

Width="200"

Height="200"

StrokeThickness="10"

Stroke="Blue"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 클래스 : TargetName 첨부 속성을 사용해 속성 직접 설정하기

■ Storyboard 클래스의 TargetName 첨부 속성을 사용해 속성을 직접 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <ColorAnimation
                Storyboard.TargetName="solidColorBrush"
                Storyboard.TargetProperty="Color"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="00:00:01"
                From="Blue"
                To="Yellow" />
        </Storyboard>
    </Grid.Resources>
    <Rectangle
        Width="200"
        Height="200"
        StrokeThickness="10"
        Stroke="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown">
        <Rectangle.Fill>
            <SolidColorBrush x:Name="solidColorBrush"
                Color="Blue" />
        </Rectangle.Fill>
    </Rectangle>
</Grid>

<Grid>

<Grid.Resources>

<ColorAnimation

Storyboard.TargetName="solidColorBrush"

Storyboard.TargetProperty="Color"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="00:00:01"

From="Blue"

To="Yellow" />

</Storyboard>

</Grid.Resources>

<Rectangle

Width="200"

Height="200"

StrokeThickness="10"

Stroke="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown">

<Rectangle.Fill>

<SolidColorBrush x:Name="solidColorBrush"

Color="Blue" />

</Rectangle.Fill>

</Rectangle>

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 엘리먼트 : DoubleAnimation 엘리먼트 사용하기

■ Storyboard 엘리먼트에서 DoubleAnimation 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="0:0:02"
                RepeatBehavior="Forever"
                AutoReverse="True"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="0:0:04"
                From="0"
                To="100" />
        </Storyboard>
    </Grid.Resources>
    <Button
        Grid.Row="0"
        Grid.Column="0"
        Width="100"
        Height="25"
        Content="Start"
        Click="startButton_Click" />
    <Button
        x:Name="stopButton"
        Grid.Row="0"
        Grid.Column="1"
        Width="100"
        Height="25"
        Content="Stop"
        Click="stopButton_Click" />
    <Rectangle
        x:Name="rectangle"
        Grid.Row="1"
        Grid.Column="1"
        Width="0"
        Height="0"
        Loaded="rectangle_Loaded">
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Offset="0"   Color="LightBlue" />
                <GradientStop Offset="0.4" Color="Blue"      />
                <GradientStop Offset="0.8" Color="Purple"    />
                <GradientStop Offset="1.0" Color="Lavender"  />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="0:0:02"

RepeatBehavior="Forever"

AutoReverse="True"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="0:0:04"

From="0"

To="100" />

</Storyboard>

</Grid.Resources>

<Button

Grid.Row="0"

Grid.Column="0"

Width="100"

Height="25"

Content="Start"

Click="startButton_Click" />

<Button

x:Name="stopButton"

Grid.Row="0"

Grid.Column="1"

Width="100"

Height="25"

Content="Stop"

Click="stopButton_Click" />

<Rectangle

x:Name="rectangle"

Grid.Row="1"

Grid.Column="1"

Width="0"

Height="0"

Loaded="rectangle_Loaded">

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Grid>

▶ 예제 코드 (C#)


using System.Windows;

#region 사각형 로드시 처리하기 - rectangle_Loaded(sender, e)

/// <summary>
/// 사각형 로드시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_Loaded(object sender, RoutedEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

#region Start 버튼 클릭시 처리하기 -startButton_Click(sender, e)

/// <summary>
/// Start 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void startButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Resume();
}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>
/// Stop 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void stopButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Pause();
}

#endregion

using System.Windows;

#region 사각형 로드시 처리하기 - rectangle_Loaded(sender, e)

/// <summary>

/// 사각형 로드시 처리하기

/// </summary>

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

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

private void rectangle_Loaded(object sender, RoutedEventArgs e)

{

this.storyboard.Begin();

}

#endregion

#region Start 버튼 클릭시 처리하기 -startButton_Click(sender, e)

/// <summary>

/// Start 버튼 클릭시 처리하기

/// </summary>

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

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

private void startButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Resume();

}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>

/// Stop 버튼 클릭시 처리하기

/// </summary>

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

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

private void stopButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Pause();

}

#endregion

[C#/SILVERLIGHT] DiscreteDoubleKeyFrame 엘리먼트 사용하기

■ DiscreteDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width">
                <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="200" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:02" Value="300" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:03" Value="400" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] DiscreteObjectKeyFrame 엘리먼트 사용하기

■ DiscreteObjectKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="Collapsed" />
                <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="Visible"   />
                <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Collapsed" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Visibility">

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object pSender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object pSender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] EasingDoubleKeyFrame 엘리먼트 사용하기

■ EasingDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:05" Value="300">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] LinearDoubleKeyFrame 엘리먼트 사용하기

■ LinearDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width">
                <LinearDoubleKeyFrame KeyTime="00:00:01" Value="200" />
                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="300" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] SplineDoubleKeyFrame 엘리먼트 사용하기

■ SplineDoubleKeyFrame 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width">
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="200" KeySpline="1.0 0.0, 1.0 1.0" />
                <SplineDoubleKeyFrame KeyTime="00:00:05" Value="300" KeySpline="0.0 1.0, 1.0 1.0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] BounceEase 엘리먼트 : 타원 이동시키기

■ BounceEase 엘리먼트를 사용해 타원을 이동시키는 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
                Duration="00:00:05"
                BeginTime="00:00:00"
                To="270">
                <DoubleAnimation.EasingFunction>
                    <BounceEase
                        EasingMode="EaseOut"
                        Bounces="6" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Ellipse
        x:Name="ellipse"
        Canvas.Left="150"
        Canvas.Top="30"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        RenderTransformOrigin="0.5 0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform     />
                <SkewTransform      />
                <RotateTransform    />
                <TranslateTransform />
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="#ff0100ff" Offset="0" />
                <GradientStop Color="#ff908fff" Offset="1" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"

Duration="00:00:05"

BeginTime="00:00:00"

To="270">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="6" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Ellipse

x:Name="ellipse"

Canvas.Left="150"

Canvas.Top="30"

VerticalAlignment="Top"

Width="100"

Height="100"

RenderTransformOrigin="0.5 0.5">

<Ellipse.RenderTransform>

</TransformGroup>

</Ellipse.RenderTransform>

<Ellipse.Fill>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

this.ellipse.MouseLeftButtonDown += ellipse_MouseLeftButtonDown;

...

#region 타원 마우스 왼쪽 버튼 다운시 처리하기 - ellipse_MouseLeftButtonDown(sender, e)

/// <summary>
/// 타원 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

this.ellipse.MouseLeftButtonDown += ellipse_MouseLeftButtonDown;

...

#region 타원 마우스 왼쪽 버튼 다운시 처리하기 - ellipse_MouseLeftButtonDown(sender, e)

/// <summary>

/// 타원 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] ColorAnimation 엘리먼트 사용하기

■ ColorAnimation 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="grid">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <ColorAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                Duration="00:00:01"
                To="Blue" />
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Canvas.Left="0"
        Canvas.Top="0"
        Width="100"
        Height="100">
        <Rectangle.Fill>
            <SolidColorBrush
                Color="Red" />
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<ColorAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:01"

To="Blue" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Canvas.Left="0"

Canvas.Top="0"

Width="100"

Height="100">

<Rectangle.Fill>

<SolidColorBrush

Color="Red" />

</Rectangle.Fill>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] PointAnimation 엘리먼트 사용하기

■ PointAnimation 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <PointAnimation
                Storyboard.TargetProperty="Center"
                Storyboard.TargetName="ellipseGeometry"
                Duration="00:00:01"
                To="200 400" />
        </Storyboard>
    </Canvas.Resources>
    <Path Name="path"
        Fill="Beige">
        <Path.Data>
            <EllipseGeometry x:Name="ellipseGeometry"
                Center="200 100"
                RadiusX="100"
                RadiusY="100" />
        </Path.Data>
    </Path>
</Canvas>

<Canvas.Resources>

<PointAnimation

Storyboard.TargetProperty="Center"

Storyboard.TargetName="ellipseGeometry"

Duration="00:00:01"

To="200 400" />

</Storyboard>

</Canvas.Resources>

<Path Name="path"

Fill="Beige">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="200 100"

RadiusX="100"

RadiusY="100" />

</Path.Data>

</Path>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

...

this.path.MouseLeftButtonDown += path_MouseLeftButtonDown;

...

#region 패스 마우스 왼쪽 버튼 다운시 처리하기 - path_MouseLeftButtonDown(sender, e)

/// <summary>
/// 패스 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

...

this.path.MouseLeftButtonDown += path_MouseLeftButtonDown;

...

#region 패스 마우스 왼쪽 버튼 다운시 처리하기 - path_MouseLeftButtonDown(sender, e)

/// <summary>

/// 패스 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 사각형 움직이기

■ Storyboard 엘리먼트를 사용해 사각형을 움직이는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="grid">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="00:00:01"
                SpeedRatio="2"
                BeginTime="00:00:00"
                AutoReverse="True"
                RepeatBehavior="2x"
                FillBehavior="HoldEnd"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="00:00:01"
                SpeedRatio="2"
                BeginTime="00:00:00"
                AutoReverse="True"
                RepeatBehavior="2x"
                FillBehavior="HoldEnd"
                From="0"
                To="100" />
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Red"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Top)"

Duration="00:00:01"

SpeedRatio="2"

BeginTime="00:00:00"

AutoReverse="True"

RepeatBehavior="2x"

FillBehavior="HoldEnd"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:01"

SpeedRatio="2"

BeginTime="00:00:00"

AutoReverse="True"

RepeatBehavior="2x"

FillBehavior="HoldEnd"

From="0"

To="100" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Red"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Timeline 엘리먼트 : AutoReverse 속성 사용하기

■ Timeline 엘리먼트의 AutoReverse 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                AutoReverse="True"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                AutoReverse="True"
                From="0"
                To="100" />
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Red" />
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Top)"

AutoReverse="True"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

AutoReverse="True"

From="0"

To="100" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Red" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Timeline 엘리먼트 : BeginTime 속성 사용하기

■ Timeline 엘리먼트의 BeginTime 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                BeginTime="00:00:01"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                BeginTime="00:00:01"
                From="0"
                To="100" />
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Red" />
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Top)"

BeginTime="00:00:01"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

BeginTime="00:00:01"

From="0"

To="100" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Red" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

this.rectangle.MouseLeftButtonDown += rectangle_MouseLeftButtonDown;

...

#region 사각형 마우스 왼쪽 버튼 다운시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion