02.SilverLight3 - Hello World [ 에니메이션 ]

기본적인 에니메이션을 적용한 예제입니다.
     Hello World를 작업한 예제에 추가합니다.

Microsoft Expression Blend 3 사용하기

솔루션탐색기에서 작업한 파일 -> 마우스 오른쪽 클릭 ->Open Expression Biend... 클릭 [그림2-1 : 기본화면]    lblDisplay에 에니메이션 효과를 줍니다. [그림2-2]

---

에니메이션을 주기 위해 Storyboard( 스토리보드 )를 사용합니다.

lblDisplay에 에니메이션 효과 주기

[그림2-3] 먼저 노랑색의 "플레임 해드"를 원하시는 시간에 클릭  후 "키 프레임"을 클릭합니다. [ 시간 : 초 단위 ] [그림2-4] 반복하게 되면 [그림2-4] 와 같이 나타납니다. 여기서 "키 프레임"을 클릭하고 애니메이션을 주고 자 하는 여기서 "lblDisplay"를 화면모드에서 선택하고 이리저리 이동시키거나, 색깔을 줍니다. [그림2-5]    완성됐다면 저장한 후에 다시 프로젝트로 이동합니다.

---

추가한 에니메이션 적용하기

다시 작업중인 Visual Studio 2010을 열면 [그림2-6] 와 같은 메세지가 나옵니다. [그림2-6]    "Yes to All"을 선택하시면 [그림2-7] 과 같이 코드가 추가되어 있습니다.     Microsoft Expression Blen에서 애니메이션 효과를 준것이 코드로 나타나있습니다. [그림2-7] 솔루션 탐색기에서 작업중인 해당페이지 (현재 여기 예제에서는 MainPage.xaml)에서 코드비하인드 페이지 (MainPage.xaml.cs)로 이동하여 애니메이션을 추가합니다.

---

MainPage.xaml.cs

public MainPage() {     InitializeComponent();     this.Loaded += new RoutedEventHandler(MainPage_Loaded); }   void MainPage_Loaded(object sender, RoutedEventArgs e) {     SbStart.Begin(); }

결과는~소스파일을 다운 받은 후 실행해주세요.

TestPage.html

RiaHelloWorld-A.zip