ANIMATION Archives - 17 중 17 번째 페이지

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

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


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="00:00:05"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="00:00:05"
                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)"

Duration="00:00:05"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:05"

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 엘리먼트 : FillBehavior 속성 사용하기

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


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                FillBehavior="Stop"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                FillBehavior="Stop"
                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)"

FillBehavior="Stop"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

FillBehavior="Stop"

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 엘리먼트 : RepeatBehavior 속성 사용하기

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


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="00:00:05"
                RepeatBehavior="2x"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="00:00:05"
                RepeatBehavior="2x"
                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)"

Duration="00:00:05"

RepeatBehavior="2x"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:05"

RepeatBehavior="2x"

From="0"

To="100" />

</Storyboard>

</Canvas.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Red" />

</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] Timeline 엘리먼트 : SpeedRatio 속성 사용하기

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


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="00:00:05"
                SpeedRatio="0.5"
                From="0"
                To="100" />
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="00:00:05"
                SpeedRatio="0.5"
                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)"

Duration="00:00:05"

SpeedRatio="0.5"

From="0"

To="100" />

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:05"

SpeedRatio="0.5"

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] ControlStoryboardAction 엘리먼트 사용하기

■ ControlStoryboardAction 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Grid
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
    <Grid.Resources>
        <Storyboard x:Key="StoryboardKey">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width"
                Duration="0:0:0.2"
                To="200" />
        </Storyboard>
    </Grid.Resources>
    <Button
        Width="140"
        Height="100"
        Content="ControlStoryboard">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:ControlStoryboardAction
                    ControlStoryboardOption="Play"
                    Storyboard="{StaticResource StoryboardKey}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>

<Grid

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width"

Duration="0:0:0.2"

To="200" />

</Storyboard>

</Grid.Resources>

<Button

Width="140"

Height="100"

Content="ControlStoryboard">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:ControlStoryboardAction

ControlStoryboardOption="Play"

Storyboard="{StaticResource StoryboardKey}" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

</Grid>

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

■ PlaySoundAction 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Button
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="140"
    Height="100"
    Content="PlaySoundAction">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:PlaySoundAction
                Source="http://127.0.0.1/ibelive.mp3"
                Volume="1" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

<Button

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="140"

Height="100"

Content="PlaySoundAction">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:PlaySoundAction

Source="http://127.0.0.1/ibelive.mp3"

Volume="1" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

※ Volume 속성은 0에서 1

[C#/WPF] Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기

■ Ellipse 엘리먼트를 사용해 커졌다 사라지는 동심원 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="Ellipse">
            <Setter Property="VerticalAlignment"   Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Width"               Value="0"      />
            <Setter Property="Height"              Value="0"      />
            <Setter Property="StrokeThickness"     Value="2"      />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard >
                        <Storyboard
                            FillBehavior="Stop"
                            RepeatBehavior="Forever">
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Height"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                Duration="0:0:5"
                                From="1"
                                To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Ellipse Margin="20  0  0  0" Stroke="Red"      />
        <Ellipse Margin=" 0 10  0  0" Stroke="Orange"   />
        <Ellipse Margin=" 0  0 20  0" Stroke="Yellow"   />
        <Ellipse Margin=" 0  0  0 30" Stroke="Green"    />
        <Ellipse Margin=" 0  0  0  0" Stroke="Blue"     />
        <Ellipse Margin=" 0 30 10  0" Stroke="DarkBlue" />
        <Ellipse Margin="30  0  0 10" Stroke="Purple"   />
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Style.Triggers>

<Storyboard

FillBehavior="Stop"

RepeatBehavior="Forever">

<DoubleAnimation

Storyboard.TargetProperty="Width"

Duration="0:0:5"

To="300" />

<DoubleAnimation

Storyboard.TargetProperty="Height"

Duration="0:0:5"

To="300" />

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="0:0:5"

From="1"

To="0" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

</Grid>

</Window>

TestProject.zip

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

■ Storyboard 클래스를 사용해 코드로 구현하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Storyboard 클래스 : 코드 구현하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Storyboard 클래스 : 코드 구현하기"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            // Page 객체에 대해 NameScope 객체를 설정합니다.
            NameScope.SetNameScope(this, new NameScope());

            #region StackPanel 객체를 생성한다.

            StackPanel stackPanel = new StackPanel();

            stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

            Content = stackPanel;

            #endregion
            #region Border 객체를 생성한다.

            Border border = new Border();

            border.Margin          = new Thickness(0, 60, 0, 20);
            border.BorderBrush     = Brushes.Black;
            border.BorderThickness = new Thickness(1);
            border.Background      = Brushes.Gray;
            border.Padding         = new Thickness(20);

            stackPanel.Children.Add(border);

            // Storyboard.TargetName 첨부 속성 설정을 위해 Border 객체의 명칭을 등록한다.
            RegisterName("border", border);

            #endregion
            #region ThicknessAnimation 객체를 생성한다.

            ThicknessAnimation thicknessAnimation = new ThicknessAnimation();

            thicknessAnimation.RepeatBehavior = RepeatBehavior.Forever;
            thicknessAnimation.AutoReverse    = true;
            thicknessAnimation.Duration       = TimeSpan.FromSeconds(1);
            thicknessAnimation.From           = new Thickness(1, 1, 1, 1);
            thicknessAnimation.To             = new Thickness(56, 28, 56, 28);

            Storyboard.SetTargetName(thicknessAnimation, "border");
            Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath(Border.BorderThicknessProperty));

            #endregion
            #region Storyboard 객체를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(thicknessAnimation);

            #endregion

            border.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media.Animation;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

// Page 객체에 대해 NameScope 객체를 설정합니다.

NameScope.SetNameScope(this, new NameScope());

#region StackPanel 객체를 생성한다.

StackPanel stackPanel = new StackPanel();

stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

Content = stackPanel;

#endregion

#region Border 객체를 생성한다.

Border border = new Border();

border.Margin = new Thickness(0, 60, 0, 20);

border.BorderBrush = Brushes.Black;

border.BorderThickness = new Thickness(1);

border.Background = Brushes.Gray;

border.Padding = new Thickness(20);

stackPanel.Children.Add(border);

// Storyboard.TargetName 첨부 속성 설정을 위해 Border 객체의 명칭을 등록한다.

RegisterName("border", border);

#endregion

#region ThicknessAnimation 객체를 생성한다.

ThicknessAnimation thicknessAnimation = new ThicknessAnimation();

thicknessAnimation.RepeatBehavior = RepeatBehavior.Forever;

thicknessAnimation.AutoReverse = true;

thicknessAnimation.Duration = TimeSpan.FromSeconds(1);

thicknessAnimation.From = new Thickness(1, 1, 1, 1);

thicknessAnimation.To = new Thickness(56, 28, 56, 28);

Storyboard.SetTargetName(thicknessAnimation, "border");

Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath(Border.BorderThicknessProperty));

#endregion

#region Storyboard 객체를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(thicknessAnimation);

#endregion

border.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] KeyFrame 클래스 : KeyTime 속성 사용하기

■ <T>KeyFrame 클래스의 KeyTime 속성을 사용하는 방법을 보여준다. ▶ 5초 설정하기 (XAML)


KeyTime="0:0:5"

KeyTime="0:0:5"

▶ 25% 설정하기 (XAML)


<!-- %는 연속적으로 증가해야 한다. -->

KeyTime="25%"

KeyTime="25%"

▶ 균등하게 설정하기 (XAML)

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

■ Timeline 엘리먼트의 RepeatBehavior 속성을 사용하는 방법을 보여준다. ▶ 3번 반복하기 (XAML)


RepeatBehavior="3x"

RepeatBehavior="3x"

▶ 1.5번 반복하기 (XAML)


RepeatBehavior="1.5x"

RepeatBehavior="1.5x"

▶ 10초 간격까지만 반복하기

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

■ Timeline 엘리먼트의 Duration 속성을 사용하는 방법을 보여준다. ▶ 2.5초간 지속하기 (XAML)


Duration="0:0:2.5"

Duration="0:0:2.5"

▶ 3분간 지속하기 (XAML)


Duration="0:3"

Duration="0:3"

▶ 7시간 지속하기 (XAML)