Silverlight를 설치하려면 여기를 클릭합니다.*
Korea 대한민국변경|Microsoft 전체 사이트
MSDN
|개발자 센터|라이브러리|MSDN Online|다운로드|코드 센터|Subscriptions|MSDN 행사
MSDN Home   MSDN Home
MSDN 홈 > .NET Framework 홈 > 기술 문서(Articles) > Windows Presentation Foundation에서의 2D 및 3D 동적 애니메이션 작성

Windows Presentation Foundation 에서의 2D 및 3D 동적 애니메이션 작성

  

Karsten Januszewski
Microsoft Corporation

January 2005, Updated June 2006
개요 : WPF(Windows Presentation Foundation)이 제공하는 2D 애니메이션 인프라를 사용하여 애니메이션 작업 관리자를 작성하는 방법과 동적 애니메이션 3D 매시를 작성하는 방법을 설명합니다.

적용 대상:
Vista/.NET Framework 3.0 Beta 2

AvalonTaskMgr.msi 샘플 파일의 다운로드.

목차

시작하며
CPU 성능 카운터 데이터 액세스와 선그래프 추가
애니메이션 추가
애니메이션 막대 그래프 추가
마무리

데이터 비주얼화의 목적으로 WPF(Windows Presentation Foundation)를 사용하는 매우 흥미로운 시나리오가 있습니다. WPF 애니메이션 기능을 사용하면, 정보를 본능적, 직감적으로 표현할 수 있을 가능성이 커집니다. 대부분의 Windows 사용자가 경험하고 있는 데이터 비주얼화의 하나는 작업 관리자에 의한 CPU 사용률의 그래피컬 표시입니다. 데이터 비주얼화를 설명하기 위해, WPF를 사용하여 데이터 비주얼화를 구현하고, WPF 플랫폼의 몇 가지 기능을 소개합니다. 우선, WPF 드로잉 브러시를 사용하여 그래프의 작성이 얼마나 간단한지를 보여드립니다. 두 번째는 심플하고 세련된 애니메이션 프로그래밍 모델을 설명합니다. 세 번째는 응용 프로그램이 취득한 데이터를 사용하여 즉시 제어되는 동적 애니메이션의 작성 테크닉을 설명합니다. 마지막으로 3D세계 및 동적 애니메이션 3D 매시의 작성 방법을 살펴보고, 최종적인 응용 프로그램의 스냅샷을 보여드립니다.

시작하며

응용 프로그램 작성하려면 우선 레이아웃을 설정합니다. Window.ResizeMode를 NoResize로 설정하고, 응용 프로그램의 사이즈 변경을 억제하고, StackPanel이나 Grid 등의 WPF 레이아웃 컨트롤의 사이즈 변경 기능이 전혀 필요 없기 때문에, Canvas 를 사용해 컨트롤을 배치했습니다. 캔버스에는 TextBlock, Viewport3d 및 그래프용의 두개의 캔버스 이렇게 4 개의 컨트롤만이 존재합니다. 각 컨트롤은 Canvas.Left 속성 설정에 의해 캔버스에 고정되어 있습니다.

다음 절차에서는 좌표축이 되는 가로선과 세로선을 표시하고 그래프를 추가합니다. WPF에는 DrawingBrush 컨트롤을 사용해 그래프를 작성하는 매우 편리한 기능이 있습니다. 이 기능을 사용하면 영역 가득 드로잉 할 수 있습니다. 드로잉 자체는 사각형, 타원형 등, 다양한 WPF의 도형을 사용해 구성할 수 있습니다. DrawingBrush 의 가장 중요한 속성은 Drawing 속성에 의해 브러시가 사용하는 도형이 정해집니다. 이 예는 그래프를 형성하는 두 종류의 선의 조화된 도형에 사용합니다.

DrawingBrush의 또 하나의 중요한 기능은 같은 도형을 늘어놓고 표시할 수 있는 것입니다. DrawingBrush 는 열거형을 취하는 TileMode 속성을 지원 합니다. TileMode 를 Tile로 설정하면, 표면에 같은 도형을 얼마든지 늘어놓고 하나의 도형을 선언할 수 있습니다. DrawingBrush의Viewport 를 설정하여, 각 도형의 사이즈를 정해집니다. 그리고 DrawingBrush의 캔버스의 배경을 설정하면, 캔버스 전체에 화상이 펼쳐 집니다. 따라서, 초록의 그리드를 작성하기 위해 다음과 같이, 브러시에 세로 선과 가로선의 두 개의 선을 설정합니다.

<DrawingBrush x:Name="gridBackgroundBrush" 
        Viewport="0,0,10,10" 
        ViewportUnits="Absolute"
        TileMode="Tile">
  <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
          <DrawingGroup.Children>
        <DrawingGroup>
  <DrawingBrush.Drawing>
</DrawingBrush>

다음의 절차에서는 캔버스 배경으로 이 브러시를 적용합니다. Background는 Canvas 속성이므로, XAML의 Background 속성의 아래에 다음과 같이 DrawingBrush 를 상자로 할 수 있습니다.

  <Canvas.Background>
    <DrawingBrush x:Name="gridBackgroundBrush">...</DrawingBrush>
  </Canvas.Background>

그러나 이 배경을 재사용할 경우도 있으므로 드로잉 브러시를 리소스로서 작성한 후, 배경을 필요로 하는 캔버스의 스타일을 작성하는 것이 효율적입니다.

<Window.Resources>
  <DrawingBrush x:Name="gridBackgroundBrush">...</DrawingBrush>
  <Style x:Name="myCanvasStyle">
    <Canvas Background="{gridBackgroundBrush}" />
  </Style>
</Window.Resources>

그 뒤 "myCanvasStyle" 스타일을 사용하고, 배경 속성을 설정할 수 있습니다.

CPU 성능 카운터 데이터에의 엑세스와 선그래프의 추가

그래프가 완성되었으면, 애니메이션을 추가합니다. 우선, 표시하는 데이터 (이 예에서는 CPU 사용률의 데이터)를 불러와야 합니다. .NET Framework에는System.Diagnostics.PerformanceCounter 에서 이러한 데이터에 액세스하기 위한 편리한 클래스가 있습니다. 이 클래스를 사용하여, 수백 종류의 성능 카운터를 취득할 수 있지만, 여기에서는 전체의 CPU사용률만을 취득합니다.

다음은 성능 카운터 호출을 사용하기 위해 인크리먼트(increment)를 사용해 이벤트를 발생시키는 타이머가 필요합니다. WPF 에서는 이러한 타이머로서 System.Timer 네임 스페이스에 UITimer가 있습니다. 응용 프로그램이 현재의 CPU 사용률을 취득할 때는 언제라도 성능 카운터에서 NextValue() 메소드를 호출하면, 값이 제공됩니다. 여기서는 0.5 초 마다 값을 요구하도록 타이머를 설정합니다. Tick 이벤트를 타이머와 연동시켜 새로운 CPU사용률에 근거해 애니메이션을 갱신할 수 있습니다.

Windows Vista에서 API를 사용해 진단 정보를 취득하려면 상향된 액세스 허가가 필요합니다. 상향된 액세스 허가를 취득하는 방법은 그다지 많지 않습니다. 세련 되지 않은 방법으로 억지로 취득하려면, 응용 프로그램을 오른쪽 클릭해 [Run As Administrator] 를 클릭합니다. 그러나 이러한 사소한 정보를 모르는 사용자도 있고, 응용 프로그램의 실패 이유가 올바른 액세스 허가가 부여되지 않기 때문이라는 것을 알고 있는 사용자도 있습니다. 상향된 허가를 취득하는 좀 더 세련된 방법으로 고도의 액세스 허가를 요구하기 위한 표준의 Windows Vista 대화 상자를 사용하는 방법이 있습니다. 이것을 실시하기 위해서, 응용 프로그램의 옆에 매니페스트를 늘어놓아 추가했습니다 .이것에 의해 requestedExecutionLevel 에 requireAdministrator 값을 지정하여 상향된 액세스 허가를 요구합니다. 참고용으로 매니페스트 전체를 보여드립니다.

<?xml version="1.0" encoding="Shift_JIS" ?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
  <assemblyIdentity version="1.0.0.0" 
      processorArchitecture="X86"
      name="WPF Performance Monitor"
      type="win32" />
  <description>WPF Performance Monitor</description>
  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
    <security>
      <requestedPrivileges>
        <requestedExecutionLevel level="requireAdministrator" />
      </requestedPrivileges>
    </security>
  </trustInfo>
</assembly>

이 응용 프로그램에서는 응용 프로그램에 두 개의 조작이 발생합니다. 첫번째는 특별한 특권이 필요한 것을 사용자에 보여주는 특별한 아이콘을 응용 프로그램에 관련 지을 수 있습니다. 두번째는 응용 프로그램의 시작과 동시에 사용자에게 프롬프트가 표시됩니다. 양쪽 모두의 스크린 화면입니다.

그 외에도 알고 있으면 유용한 팁들이 있습니다. 첫째는 좀 전에 사용한 옆에 늘어놓는 방법이 아닌.exe 자체에 이 매니페스트 정보를 묻는 방법도 있습니다. 이것에 대한 것은 문서가 가까운 시일 내에 공개될 예정입니다. 두번째는 매니페스트 정보를 추가해도, 응용 프로그램이 Windows XP 상에서 동작하는 것은 변함이 없습니다. 마지막으로, 매니페스트를 추가해도 디버그의 경험이 향상되지는 않습니다. 고도의 액세스 허가를 필요로 하는 응용 프로그램의 디버그를 실시하려면, 고도의 액세스 허가를 사용하여 Visual Studio 자체를 실행합니다. 이것에 의해 응용 프로그램을 실행하기 위한 프로세스가 Visual Studio 에 의해서 작성될 때, 그 프로세스가 고도의 특권을 가지게 됩니다. 이와 같이 Windows Vista 에서는 이 프로젝트를 디버그 하기 위해, 고도의 액세스 허가를 사용해 Visual Studio 를 실행할 필요가 있습니다.

XAML 내의 윈도우의Loaded 이벤트와 코드 내에 관련되는 이벤트 처리기를 연동하여, 윈도우의Loaded 이벤트 내에서 이러한 컨트롤과 X 및 Y int 를 초기화합니다.

public partial class Window1 : Window
{
private int x = 0;
private int y = 0;
private int cpuInt;
private System.Diagnostics.PerformanceCounter performanceCounter;
private System.Threading.UITimer uiTimer;

private void WindowLoaded(object sender, EventArgs e) 
{

  //성능 카운터의 실행
  performanceCounter = new System.Diagnostics.PerformanceCounter("Processor", "% Processor Time", "_Total");
  //uitimer 의 실행
  uiTimer = new System.Threading.UITimer();
  uiTimer.Interval = new TimeSpan(5000000);
  uiTimer.Tick += new EventHandler(uiTimer_Tick);
  uiTimer.Start();

}

void uiTimer_Tick(object sender, EventArgs e)
{
  cpuInt = Convert.ToInt32(performanceCounter.NextValue());
  Do2DAnimation();
  CpuText.TextContent = cpuInt.ToString();
  y = cpuInt;
  x = x + 1;
}
}

여기서 Do2DAnimation 메소드 내에 코드를 구현 할 필요가 있습니다. 선그래프를 작성하기 위해서는 이전의 사용률의 값 (예를 들어80%)을 확보해, 거기에 새로운 값 (예를 들어, 20%)의 선을 그을 필요가 있습니다. 이 예에서는 CPU 사용률 값이 Y축으로 표현되어 각 픽셀이 사용률을 나타냅니다. 시각은 X 축으로 표현되어 X 축상의 10 픽셀이 0.5 초를 나타냅니다.

여기서 Y 축 0 이 페이지의 맨 위에 있지만, 보통은 0이 맨 아래에 100이 맨 위에 표시됩니다. 그렇게 하려면, CPU값을 100에서 빼면 됩니다. 이것으로 Line 형태 위에 X1, X2, Y1, 및 Y2 를 설정하면, 다음과 같은 선분이 생깁니다.

private void Do2DAnimation()
{


  //X2, Y2 에 상당하는 선을 작성합니다.이것은 실제로는 점이 됩니다.
  Line segmentAnimation = new Line();
  segmentAnimation.X1 = new System.Windows.Length(x * 10);
  segmentAnimation.Y1 = new System.Windows.Length(100 - y);
  segmentAnimation.X2 = new System.Windows.Length((x * 10) + 10);
  segmentAnimation.Y2 = new System.Windows.Length(100 - cpuInt);
  segmentAnimation.Stroke = System.Windows.Media.Brushes.LimeGreen;
  segmentAnimation.StrokeThickness = new System.Windows.Length(1);
  CpuGraphAnimation2d.Children.Insert(0, segmentAnimation);
}

브러시의 Stroke 속성으로 선의 색을 StrokeThickness 속성으로 굵기를 지정하는 것에 주의해 주세요. 마지막으로 캔버스의 자식 콜렉션으로 Insert 메소드를 호출하고, 선을 비주얼 트리에 추가합니다.

위의 코드를 추가하면, 올바르게 기능하는 솔루션을 얻을 수 있어, 체크한 점을 통과하는 선이 삽입됩니다. 그러나, 이 코드가 캔버스의 끝을 인식하지 못해서 문제를 야기할 가능성이 있습니다. 이 코드를 실행하면, WPF 가 캔버스의 폭을 펼쳐 다른 캔버스를 좌측으로 이동시켜, 선의 X 축이 캔버스의 경계의 밖에 나오지 않도록 보정하는 것을 알 수 있습니다. WPF 의 이 동작은 그 자체는 편리하지만, 다른 문제가 있습니다. 응용 프로그램이 실행되는 한, 새로운 선이 잇달아 무한히 작성됩니다.

그래서 화면의 사이즈에 맞춰 정해진 수의 선을 작성해 필요에 따라 리사이클 하는 것이 적절합니다. 거기에 X의 값을 기록해, 캔버스의 구석에 이르렀을 때에 그것을 클리어 하는 것이 필요합니다. 캔버스는 200px 이므로 선을 20 개 그리면 캔버스의 구석에 도달합니다. 이 방법을 사용하면 방금전의 uiTimer_Tick 메소드내의 코드를 다음과 같이 업데이트할 수 있습니다. 

void uiTimer_Tick(object sender, EventArgs e)
{
  cpuInt = Convert.ToInt32(performanceCounter.NextValue());
  Do2DAnimation();
  CpuText.TextContent = cpuInt.ToString();
  y = cpuInt;
  x = x + 1;
  if (x == 20)
  {
    CpuGraphAnimation2d.Children.RemoveRange(0, 20);
    x = 0;
  }
}

또 Loaded 이벤트를 갱신함과 동시에, 그래프를 재사용할 수 있는 20 개의 선의 배열을 작성할 필요가 있습니다. 이렇게 작성된 선을Loaded 이벤트의 선의 배열에 추가하여, 선이 무한대로 작성되는 문제가 해결됩니다. 

for (int i = 0; i < 20; i++)
{
  Line line = new Line();
  line.Stroke = System.Windows.Media.Brushes.LimeGreen;
  line.StrokeThickness = new System.Windows.Length(1);
  lines[i] = line;
}

마지막으로 새로운 선을 매회 인스턴스화하는 것이 아니라, Do2DAnimation() 메소드를 사용해 선의 배열을 사용하도록 코드를 변경합니다.

//Line segmentAnimation = new Line();
Line segmentAnimation = lines[x];

애니메이션 추가

이것으로 정상적으로 기능하는 응용 프로그램이 만들어졌지만, 선 전체를 한 번에 그래프에 삽입하는 애니메이션은 그다지 흥미롭지 않습니다. 비주얼 효과로서는 상당히 낮은 수준입니다. 두개의 좌표 사이를 선이 실제로 그려져 간다는 애니메이션을 작성해, 훨씬 부드러운 비주얼 효과를 실현하고 싶습니다. WPF의 2D 애니메이션 인프라를 사용하면, 이런 종류의 애니메이션은 매우 간단하게 작성할 수 있습니다. 기본적인 지식에 대해서는 animation in the WinFX SDK (영문)를 참조해 주세요.

다음은 이러한 선을 애니메이션화한 방법을 설명합니다. 우선, 비주얼 트리에 선이 추가되었을 때에, 점이 하나만 그려지도록, X2 와 Y2 를 X1 와 Y1 를 동일하게 변경합니다. 다음은 실제의 X2 와 Y2 의 값을 사용하고, WPF 애니메이션을 작성합니다. System.Windows.Media.Animation 네임 스페이스에서 두 개의 DoubleAnimation 클래스를 작성할 필요가 있습니다. 작성하는 것이 DoubleAnimation 클래스이라는 것을 어떻게 알았는지 이상하게 생각될지도 모릅니다. 그것은 애니메이션화하는 값 「X2 와 Y2」의 데이터형이 어느쪽이나 Double 형태였기 때문입니다. System.Windows.Media.Animation 네임 스페이스를 참조하면, ByteAnimation 이나 BooleanAnimation 등이 다양한 많은 오브젝트 타입이 특정 애니메이션 클래스인 것을 알 수 있습니다. 이러한 Animation 클래스는 모두 AnimationTimeline 추상 클래스로부터 파생하여 모든 종류의 애니메이션을 행하기 위한 공통의 패러다임이 됩니다. 처음엔 이 방법으로 애니메이션을 작성하는 것을 어렵게 느끼지만, WPF에 익숙해지면 쉬워졌습니다. WPF 애니메이션에는 이 공통 패러다임이 있기 때문에 WPF를 이해하면, 모든 것을 애니메이션화 할 수 있어 이러한 기술 습득을 다른 응용 프로그램으로 재사용할 수 있습니다.

여기에 애니메이션을 작성하려면, DoubleAnimation 클래스에 몇 가지 속성을 설정한 후, 그것들을 선자체에 관련 짓습니다. 일반적으로 애니메이션 클래스는 From,To,By 속성을 지원 합니다. from값에서 to값까지by 값만 애니메이션을 작성하기 위한 구문으로 사용됩니다. 이 예에서는 DoubleAnimation의 생성자으로, 선의 종점을 기본으로 To 값만을 설정합니다. From와 By값은 자동적으로 설정됩니다. 또 Duration 속성을 건네주고, 애니메이션의 시간의 길이를 선언합니다. 이 예에서는 Duration이 0.5 초로 설정되어, 애니메이션이 타이머와 동기합니다.

이러한 속성을DoubleAnimation 클래스로 설정한 후 애니메이션의 특정 인스턴스를 작성할 필요가 있습니다. 여기서 애니메이션의CreateClock() 메소드를 호출합니다. 다음에 사용자 인터페이스의 특정 FrameworkElement, 이 예에서는Line 에 그 클락을 적용합니다. ApplyAnimationClock() 메소드를 사용하여 Line.X2Property 등 애니메이션화하는 속성을 지정합니다.ApplyAnimationClock()은 애니메이션화하는 대상인 의존 속성 (이 예에서는Line.X2Property 나Line.Y2Property)와 애니메이션으로부터 작성한 클락의 2 개의 인수를 취합니다. 작성하는 애니메이션을 연동시켜, 클락 자체를 ApplyAnimationClock() 속성을 조작해 제어할 수 있습니다.

이러한 선을 리사이클 하려면, 추가 전에 NULL을 설정하여 애니메이션을 소거해야 합니다.

작성된 코드는 다음과 같습니다.

//add animation to X
//add animation to X
segmentAnimationX = new DoubleAnimation((x * 10) + 10, new Duration(TIME_SPAN));
//null out prior animation
segment.ApplyAnimationClock(Line.X2Property, null); 
clockSegmentX = segmentAnimationX.CreateClock();
segment.ApplyAnimationClock(Line.X2Property, clockSegmentX); 

//add animation to Y
segmentAnimationY = new DoubleAnimation(100 - cpuInt, new Duration(TIME_SPAN));
//null out prior animation
segment.ApplyAnimationClock(Line.Y2Property, null);
clockSegmentY = segmentAnimationY.CreateClock();
segment.ApplyAnimationClock(Line.Y2Property, clockSegmentY);


//insert the line and begin animations
CpuGraphAnimation2d.Children.Insert(0, segment);
clockSegmentX.Controller.Begin();
clockSegmentY.Controller.Begin();

단지 선을 삽입한 것 만으로 무미 건조한 테크닉과 비교하여, 애니메이션화된 선은 훨씬 부드럽습니다.

애니메이션화한 막대 그래프의 추가

선그래프가 완성되었으면, 작업 관리자에 표시된 그래프를 막대 그래프로 변환해 봅시다. 여기에서도 WPF 애니메이션을 사용하면, 작업 관리자가 사각형을 단지 재표시하는 것이 아니라, 사각형을 축소 확대해 작업 관리자의 경험을 개선할 수 있습니다. 또, 사각형을 조금 투명하게 하고, 비주얼 효과를 높입시다.

막대 그래프를 작성하려면, 사각형을 사용하면 거의 완벽합니다. 그러나 사각형은 주의가 필요합니다. 작성하는 애니메이션에서는 봉이 아래에서 위에 수직에 올라가도록 작성하고 싶습니다. 그렇지만 WPF의 좌표축은 Y 축방향은 아래에, X 축방향은 오른쪽으로 움직입니다. 따라서, 애니메이션이 아래에서 위에 움직이도록 하려면, 사각형을 회전시켜 배치할 필요가 있습니다. WPF에는 표준의 변형 클래스를 사용해 이 조작을 실시하는 편리한 클래스가 있어, 비주얼 트리의 임의의 요소에 적용할 수 있습니다 이 예에서는 RotateTransform 클래스를 사용하여, 사각형을 180 도 회전시켜, 캔버스상에 배치합니다. 초기화 루틴내에 적절한 회전과 변형 조작을 작성해, 그것을 변형 콜렉션에 추가해, 사각형을 작성해, RenderTransform 메소드를 사용해 변형을 렌더링 해, 마지막으로, 사각형을 비주얼 트리에 추가합니다. 결국, 사각형의 애니메이션화는 선의 애니메이션화와 매우 잘 닮았습니다. 여기에서도DoubleAnimation 을 사용해 RectangleWidth 속성에 적용합니다. 사각형을 180 도 회전시킨다는 것에 주의해 주세요.

이렇게 하면 완성됩니다. 하지만 2D 대신에 3D 바의 애니메이션을 작성해, 이 응용 프로그램을 3D를 사용해 개선하고 싶다면, Viewport3D를 2D 캔버스 위에 배치합니다.

Viewport3D는 OrthographicCamera 를 사용해, 뷰포트(ViewPoint)내에 배치된 모델을 참조합니다. 높이를 변화시킨 후에 고정하여 PerspectiveCamera 대신에OrthographicCamera 를 사용하겠습니다. DirectionalLight를 하나만 추가하고, 그래프에 조명을 맞힙니다. 또 하늘의ModelVisual3D 를 제공하고, 코드 경유로 원통을 추가합니다. 작성하는 3D 환경을 설정하는 XAML는 다음과 같습니다. 

  <Viewport3D>
  <Viewport3D.Camera>
        <OrthographicCamera 
          Width="2.5"
          UpDirection="0,1,0"
          Position="0.0,-0.2,-5.0"
          LookDirection="0,0.05,1"
            />
      </Viewport3D.Camera>
      <ModelVisual3D>
        <ModelVisual3D.Content>
          <Model3DGroup >
            <DirectionalLight Color="White" Direction="-7, -4, -10" />
          </Model3DGroup>
        </ModelVisual3D.Content>
      </ModelVisual3D>
      <ModelVisual3D/>
    </Viewport3D>

Viewport3D는 OrthographicCamera 를 사용해, 뷰포트(ViewPoint)내에 배치된 모델을 참조합니다. 높이를 변화시킨 후에 고정하여 PerspectiveCamera 대신에OrthographicCamera 를 사용하겠습니다. DirectionalLight를 하나만 추가하고, 그래프에 조명을 맞힙니다. 또 하늘의ModelVisual3D 를 제공하고, 코드 경유로 원통을 추가합니다. 작성하는 3D 환경을 설정하는 XAML는 다음과 같습니다.

 원통을 코드로 어떻게 작성하는지를 설명합시다. 우선 원시적의 클래스에 있는 원통의 팩토리 클래스를 작성하고, 원통을 작성합니다. 팩토리로부터 특정의 원통을 작성하여, 그 특정의 원통의 브러시 소재로서 이 예에서는 초록의 SolidColorBrush 를 제공합니다. ScaleTranform3D를 사용해 원통을 변형해, 원통의 Y 의 최초의 값이 0 

//초기의 3d 실린더의 추가
Mesh3DObjects.Cylinder cylinderFactory = new Mesh3DObjects.Cylinder();
Material materialGreen = new DiffuseMaterial(new SolidColorBrush(Colors.LimeGreen));
cylinder = new GeometryModel3D(cylinderFactory.Mesh, materialGreen);
ModelVisual3D mv3d = CpuPumpAnimation3dViewPort.Children[1] as ModelVisual3D;
mv3d.Content = cylinder;

다음은 3D 오브젝트를 애니메이션화하면 마지막입니다. WPF 애니메이션 플랫폼이 뛰어난 점은 3D를 애니메이션화하기 위한 테크닉이, 2D의 애니메이션화와 같은 점입니다. 원통의 사이즈를 변경하려면, 매시의 ScaleTransform3D 속성을 사용할 필요가 있습니다. ScaleTransform3D는 Vector3D의 하나의 타입이므로, Vector3DAnimation을 작성합니다. 2D 공간과 같이, 매시의  ScaleTransform3D.ScaleYProperty 의존 속성을 애니메이션화합니다. 이 예에서는 Y=1 의 경우, 원통이 100 % 가 됩니다. 따라서 CPU 사용률을 나타내는 Y 의 값에 .01 을 걸면 상대 값을 얻을 수 있어 To 값에 의해 나타납니다. From 값은 cpuInt 에 .01 을 건 값입니다.

또 원통이 위로 상승하도록, 이 변형 ScaleCenter 의 Y 의 값을 -1 로 지정할 필요가 있습니다. 이것은 직관적으로 이해하기 어렵지만, ScaleTransform 의 ScaleCenter 를 설정하지 않으면, 원통이 상하 양방향으로부터 그려집니다. 여기서 설정하고 싶은 애니메이션은 위로만 「상승한다」는 움직임이므로, ScaleCenter 를 설정해야 합니다

이전의 애니메이션을 소거한 후, 새로운 애니메이션을 추가하여 콜렉션을 추가하면. 이것으로 완성입니다.

private void Do3DAnimation()
{

    vector3DAnimation = new DoubleAnimation();
    vector3DAnimation.From = (double)(y * .01);
    vector3DAnimation.To = (double)(cpuInt * .01);
    vector3DAnimation.Duration = new Duration(TIME_SPAN);
    //스케일 센터를 y = -1 로 설정
    scaleTransform3D.CenterY = -1; 
    clock3D = vector3DAnimation.CreateClock();
    scaleTransform3D.ApplyAnimationClock(ScaleTransform3D.ScaleYProperty,clock3D);
    ModelVisual3D mv3d = CpuPumpAnimation3dViewPort.Children[1] as ModelVisual3D;
    mv3d.Transform = scaleTransform3D;
    clock3D.Controller.Begin();
    CpuPumpAnimation3dViewPort.Visibility = Visibility.Visible;

}

이것으로 동적으로 애니메이션화 된 3D 매시가 생겼습니다.

마무리

이 응용 프로그램은 폭넓게 응용할 수 있습니다. 작업 관리자나 성능 모니터를 모두 WPF로 작성하는 것도 가능합니다. 또는 예를 들어, WCF Web 서비스 등을 사용하여 다른 데이터 소스로부터 그래프를 작성할 수도 있습니다. WPF에는 눈을 끌만한 데이터 비주얼화를 위한 방법이 많이 있습니다.
  

Top of Page Top of Page


Microsoft