Animation

Width늘어나기

<!--

애니메이션(Animation) : 객체의 상태(속성)값을 A=>B로 서서히 변화를 주는 작업

: 원하는 시간, 원하는 변화값 제어

: 스토리보드(Storyboard), 애니메이션(Timeline)

-->

<Window x:Class="WPFEx.Animation"

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

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

Title="Animation" Height="300" Width="300">

<Button.Triggers>

<!--

스토리보드 : 공통된 목적을 가지는 애니메이션들을 관리하는 집합

-->

<!--

DoubleAnimation : 애니메이션(Timeline)

: 1개의 속성값에 대해서만 변화

-->

<DoubleAnimation

From="13" To="100"

Duration="0:0:2"

Storyboard.TargetProperty="FontSize"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Window>

Width Height 각각 다른 곳에서 타겟형태로 늘리기

<Window x:Class="WPFEx.Animation03"

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

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

Title="Animation03" Height="300" Width="300">

<Button.Triggers>

<DoubleAnimation

From="50"

To="250"

Duration="0:0:1"

Storyboard.TargetName="btn"

Storyboard.TargetProperty="Width"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

<Button.Triggers>

<DoubleAnimation

From="50"

To="250"

Duration="0:0:1"

Storyboard.TargetName="btn"

Storyboard.TargetProperty="Height"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Button>

</StackPanel>

</Window>

DoubleAnimation 각종 속성 형태 List, 반복, 무한반복, 리턴등..

<Window x:Class="WPFEx.Animation04"

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

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

Title="Animation04" Height="300" Width="300">

<Button.Triggers>

<!--

From : 초기값

To : 최종값

Duration : 소요시간

Storyboard.TargetProperty : 대상속성

Storyboard.TargetName : 대상객체(생략하면 본인)

-->

<!--<DoubleAnimation

From="12" To="100"

Duration="0:0:1"

Storyboard.TargetProperty="FontSize"

/>-->

<!--

From은 생략 가능 : 현재값이 From으로 사용

: 다시 누르면 변화없음(From=100)

-->

<!--<DoubleAnimation

To="100"

Duration="0:0:1"

Storyboard.TargetProperty="FontSize"

/>-->

<!--<DoubleAnimation

By="10"

Duration="0:0:1"

Storyboard.TargetProperty="FontSize"

/>-->

<!--

FillBehavior : 애니메이션이 끝나고 난뒤의 행동

-->

<!--<DoubleAnimation

From="12" To="100"

Duration="0:0:1"

Storyboard.TargetProperty="FontSize" FillBehavior="Stop"

/>-->

<!--<DoubleAnimation

From="12" To="100"

Duration="0:0:3"

Storyboard.TargetProperty="FontSize" AutoReverse="True"

/>-->

<!--

RepeatBehavior : 반복 횟수(nx), Forever(무한 반복)

AutoReverse = RepeatBehavior X 2

-->

<DoubleAnimation

From="12" To="100"

Duration="0:0:0.5"

AutoReverse="True"

Storyboard.TargetProperty="FontSize" RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Window>

<Window x:Class="WPFEx.Animation05"

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

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

Title="Animation05" Height="300" Width="500">

<Ellipse.Triggers>

<!--<DoubleAnimation

Storyboard.TargetProperty="Width"

From="50" To="250"

Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="5x"

<DoubleAnimation

Storyboard.TargetProperty="Height"

From="50" To="250"

Duration="0:0:0.5"

AutoReverse="True"

RepeatBehavior="Forever"

/>-->

<!--<DoubleAnimation

Storyboard.TargetProperty="Width"

From="50" To="250"

Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

AccelerationRatio="0.5"

/>-->

<!--<DoubleAnimation

Storyboard.TargetProperty="Width"

From="50" To="250"

Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

DecelerationRatio="1"

<DoubleAnimation

Storyboard.TargetProperty="StrokeThickness"

From="5" To="15"

Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

DecelerationRatio="1"

/>-->

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="430" Duration="0:0:3.3"

AutoReverse="True"

RepeatBehavior="Forever"

DecelerationRatio="1"

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="210" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

AccelerationRatio="0.8"

DecelerationRatio="0.2"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

</Canvas>

</Window>

Int32형 애니메이션

<Window x:Class="WPFEx.Animation06"

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

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

Title="Animation06" Height="300" Width="300">

<!--<Grid>

<Button.Triggers>

<Int32Animation

Storyboard.TargetProperty="Width"

From="50" To="250"

Duration="0:0:5"

AutoReverse="True"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Grid>-->

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.Children>

<Button.Triggers>

<Int32Animation

Storyboard.TargetProperty="(Grid.Row)"

From="0" To="3" Duration="0:0:3"

RepeatBehavior="Forever"

<Int32Animation

Storyboard.TargetProperty="(Grid.Column)"

From="0" To="4" Duration="0:0:4"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Grid.Children>

</Grid>

</Window>

Color 애니메이션

<Window x:Class="WPFEx.AnimationRectangle"

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

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

Title="AnimationRectangle" Height="300" Width="300">

<Grid>

<Rectangle.Triggers>

<ColorAnimation

From="Yellow" To="Red"

Duration="0:0:0.01"

AutoReverse="True"

RepeatBehavior="Forever"

Storyboard.TargetProperty="Fill.Color"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Grid>

</Window>

<Window x:Class="WPFEx.Animation07"

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

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

Title="Animation07" Height="300" Width="300">

<Rectangle.Triggers>

<ColorAnimation

Storyboard.TargetProperty="Fill.Color"

From="White" To="Red"

Duration="0:0:1"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</UniformGrid>

</Window>

이구문 x100 개 만든것

디자인 코드와 비즈니스 코드 분류

<!--

버튼의 트리거를 다른곳에서 코딩 목적 : 가독성(코드를 보기 용이하게 하기 위해서)

리소스 관리와 유사하게 관리할수 있다.

1. 현재 이벤트가 누구의 소유인지?

2. 애니메이션이 누구를 대상?(속성의 소유주?)

-->

<Window x:Class="WPFEx.Animation08"

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

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

Title="Animation08" Height="300" Width="300">

<Window.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="FontSize"

Storyboard.TargetName="btn"

From="12" To="100" Duration="0:0:1"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

</Window>

Style, 클릭이벤트를 스타일로 지정하여 중복 작업을 방지

<Window x:Class="WPFEx.Animation09"

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

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

Title="Animation09" Height="300" Width="300">

<Window.Resources>

<!--<Style.Triggers>

</Trigger>

</Style.Triggers>-->

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="Width" From="50" To="250" Duration="0:0:1"

<DoubleAnimation

Storyboard.TargetProperty="Height" From="50" To="250" Duration="0:0:1"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

</StackPanel>

</Window>

x100개 만든것 코드 단축(스타일 트리거)

<Window x:Class="WPFEx.Animation10"

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

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

Title="Animation10" Height="300" Width="300">

<Window.Resources>

<Style.Triggers>

<ColorAnimation

Storyboard.TargetProperty="Fill.Color"

From="White" To="Red"

Duration="0:0:3"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

</UniformGrid>

</Window>

<Window x:Class="WPFEx.Animation11"

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

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

Title="Animation11" Height="300" Width="300">

<Window.Resources>

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="Width"

From="0" To="600" Duration="0:0:5"

RepeatBehavior="Forever"

AutoReverse="True"

<DoubleAnimation

Storyboard.TargetProperty="Height"

From="0" To="600" Duration="0:0:5"

RepeatBehavior="Forever"

AutoReverse="True"

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

From="1" To="0" Duration="0:0:5"

RepeatBehavior="Forever"

AutoReverse="True"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

</Grid>

</Window>

C#파일 + Xaml 파일

Xaml 파일
<Window x:Class="WPFEx.Animation12"

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

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

Title="Animation12" Height="300" Width="800" Loaded="Window_Loaded">

<Window.Resources>

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Left)"

From="0" To="750" Duration="0:0:3.2"

AutoReverse="True"

RepeatBehavior="Forever"

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Top)"

From="0" To="218" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Left)"

From="0" To="750" Duration="0:0:4.3"

AutoReverse="True"

RepeatBehavior="Forever"

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Top)"

From="0" To="218" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Left)"

From="0" To="750" Duration="0:0:5.3"

AutoReverse="True"

RepeatBehavior="Forever"

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Top)"

From="0" To="218" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

<Style.Triggers>

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Left)"

From="0" To="750" Duration="0:0:3.8"

AutoReverse="True"

RepeatBehavior="Forever"

<DoubleAnimation

Storyboard.TargetProperty="(Canvas.Top)"

From="0" To="218" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

</Canvas>

</Window>

C#파일

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

namespace WPFEx

{

/// <summary>

/// Animation12.xaml에 대한 상호 작용 논리

/// </summary>

public partial class Animation12 : Window

{

public Animation12()

{

InitializeComponent();

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

string[] txts = new string[5] { "원피스", "헌터헌터", "블리치@", "이누야샤", "미야자키 하야오" };

//Rectangle 50개 생성

Random rnd = new Random();

for (int i = 0; i < 50; i++)

{

Rectangle rect = new Rectangle();

//Color.FromArgb(255, 빨간, 녹색, 파란);

rect.Stroke = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256)));

canvas1.Children.Add(rect);

Ellipse circle = new Ellipse();

circle.Stroke = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256)));

canvas1.Children.Add(circle);

Line line = new Line();

line.Stroke = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256)));

line.X1 = rnd.NextDouble() * 50;

line.Y1 = rnd.NextDouble() * 50;

line.X2 = rnd.NextDouble() * 50;

line.Y2 = rnd.NextDouble() * 50;

canvas1.Children.Add(line);

TextBlock txt = new TextBlock();

txt.Text = txts[rnd.Next(0, 5)];

txt.Foreground = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256)));

txt.FontSize = rnd.Next(15, 50);

canvas1.Children.Add(txt);

}

Xaml 파일

<Window x:Class="WPFEx.Animation13"

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

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

Title="Animation13" Height="300" Width="700" Loaded="Window_Loaded">

<Window.Resources>

<Style.Triggers>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

</Canvas>

</Window>

C#파일

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

namespace WPFEx

{

/// <summary>

/// Animation13.xaml에 대한 상호 작용 논리

/// </summary>

public partial class Animation13 : Window

{

public Animation13()

{

InitializeComponent();

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

Random rnd = new Random();

for (int i = 0; i < 50; i++)

{

Line line = new Line();

line.Stroke = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256), (byte)rnd.Next(1, 256)));

line.X1 = rnd.NextDouble() * 50;

line.Y1 = rnd.NextDouble() * 50;

line.X2 = rnd.NextDouble() * 50;

line.Y2 = rnd.NextDouble() * 50;

canvas1.Children.Add(line);

}

저작자표시

Animation

'Programming/WPF' Related Articles

티스토리툴바