Simple WPF Animation with Expression Blend


 

สิ่งที่จำเป็น (Prerequisites)

Download source:

บทนำ

การสร้างแอพพลิเคชันในยุคสมัยปัจจุบัน นอกจากความเรียบง่ายต่อการใช้งานแล้ว เราต้องเพิ่มความหรูหรา สวยงาม และมีความล้ำสมัย ซึ่ง WPF (Windows Presentation Foundation) ได้ปรับเปลี่ยนแนวคิดสำหรับการพัฒนาแอพพลิเคชันสมัยใหม่ในปัจจุบัน ช่วยให้เหล่านัพัฒนาสามารถรังสรรค์แอพพลิเคชันได้ตามจินตนาการ อย่างไม่สิ้นสุด

 

ในบทความนี้ผู้เขียนขอเล่าความถึงเศษเสี้ยวหนึ่งของ WPF โดยขอนำท่านผู้อ่านเข้าสู่การทำภาพคลื่อนไหวแบบง่ายๆ และการใช้เครื่องมือมีระดับอย่าง Microsoft Expression Blend ในการพัฒนาแอพพลิเคชันด้วย WPF ดังกล่าว และเป้าประสงค์ของเราในครั้งนี้จะเป็นดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 1: ดูเหมือนว่าเป้าประสงค์ของเรามิได้หรูหรา ตามคำกล่าวเลย นะครับ สรรพสิ่งล้วนมีจุดเริ่มต้น และบทความนี้ขอเป็นเพียงจุดเริ่มต้นเล็กๆ ของสรรพสิ่งทั้งหลายดังกล่าว และการเป็นจุดเริ่มต้น มิได้หมายความว่า จุดเริ่ม และสิ้นสุด ต้องเสมอเหมือน

   

เป้าประสงค์ของเรา:

เป้าประสงค์ของเรา กล่าวคือเราจะทำปุ่มเมนูด้วย คอนโทรล Button เมื่อนำเมาส์เคลื่อนที่ไปวางบนปุ่มเมนูดังกล่าวมันจะหมุนรอบตัวเอง หนึ่งรอบพร้อมกับขยายใหญ่ขึ้นเมื่อเราคลิกเมาส์ลงไป จะแสดงรูปภาพหมุนรอบตัวเองเช่นกัน สามรอบพร้อมกับขยายใหญ่ ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 1:

Simple_WPF_Animation

รูปที่ 1:

 

ขั้นตอนการพัฒนาแอพพลิเคชัน:

ขั้นตอนที่ หนึ่ง: สร้างโปรเจ็กต์

ขั้นตอนที่ สอง: สร้างภาพคลื่อนไหว

ขั้นตอนที่ สาม: สร้างTriggers กระตุ้นให้แสดงภาพเคลื่อนไหว

 

ขั้นตอนที่ หนึ่ง: สร้างโปรเจ็กต์:

1. เราหยิบเครื่องมือมีระดับอย่าง Microsoft Expression Blend ขึ้นมา

2. คลิกเมาส์บนเมนู New Project…

3. เลือกประเภทโปรเจ็กต์เป็น WPF Application (.exe)

4. ทำการเพิ่มคอนโทรล Button เข้าไปใน Artboard โดยดับเบิ้ลคลิกคอนโทรล Button ในกล่องเครื่องมือ      (Tool box) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 2:

y1pWZPAFjDJx0CaL0Gc4lUDRk8UfjU5mFcBQWAKa1mOs8Uysq-yXkNU2GQ5adkQMKjvaNwcUccQlSk

รูปที่ 2:

 

ปรับพลิเพอร์ตี้ของคอนโทรล Button:

เปลี่ยนชื่อ(Rename):

ทำการเปลี่ยนชื่อคอนโทรล Button ได้สองแบบกล่าวคือแบบแรก สามารถคลิกขวา แล้วเลือกเมนู Rename แล้วทำการพิมพ์ชื่อลงไปดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 3: หรือแบบที่สอง ให้คลิกเลือกคอนโทรลบน ArtBoard แล้วไปที่แทบ Properties ที่ช่อง Name สามารถพิมพ์ชื่อที่ต้องการลงไปได้ ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 4:

4 5

รูปที่ 3:                      รูปที่ 4:

 

เปลี่ยนป้ายชื่อ (Label):

สามารถเปลี่ยนป้ายชื่อได้สองแหล่งเช่นเดียวกัน กล่าวคือ แบบแรกคลิกขวาบนคอนโทรล แล้วเลื่อนเมาส์ไปเลือกเมนูเมนู Edit Text ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 5: แบบที่สองคลิกเมาส์เลือกคอนโทรลแล้วเลือกแทบ Properties เลือกกล่อง Common Properties ช่อง Content ทำการใส่ป้ายชื่อลงไป ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 6:

6 7

รูปที่ 5:                                              รูปที่ 6:

 

เพิ่มรูปภาพเข้ามาในโปรเจ็กต์:

คลิกเมาส์เลือกแทบ Project เพื่อให้แสดงโซลูชันของเรา จากนั้นทำการคลิกเมาส์ขวาบนโปรเจ็กต์ Simple WPF Animation แล้วเลื่อนเมาส์ลงไปเลือกเมนู Add New Folder ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 7:

จากนั้นทำการใส่ป้ายชื่อที่ต้องการลงไป บทความนี้ขอใช้ป้ายชื่อว่า Images ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 8:

จากนั้นทำการเปิดโฟลเดอร์ที่มีรูปภาพที่เราต้องการ แล้วทำการ คลิก – ลาก – แล้ววางรูปลงในโฟลเดอร์ดังกล่าว ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 9:

9 10 11

รูปที่ 7:                                                รูปที่ 8:                                                 รูปที่ 9:

 

นำรูปภาพเข้ามาใน ArtBoard:

การนำภาพมาวางบน ArtBoard ทำได้โดยการดับเบิ้ลคลิกบนไฟล์รูปภาพที่ต้องการในโฟลเดอร์ที่ได้เพิ่มเข้ามาใน       โปรเจ็กต์ก่อนหน้านี้ จากนั้นทำการย่อรูปให้เล็กลง ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 10:

จากนั้นทำการปรับพรอเพอร์ตี้รูปภาพโดยคลิกเมาส์เลือกรูปภาพ แล้วไปที่แทบ Properties เลือกกล่อง Appearance ช่อง Opacity=0% และ ช่อง Visibility = Hidden ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 11: เป้าประสงค์คือเราต้องการซ่อนรูปภาพไว้ตอนรันแอพพลิเคชัน เราจะแสดงรูปต่อเมื่อมีการกดปุ่ม เมนูที่ 1 ซึ่งกำลังจะเล่าความในลำดับต่อไป

13 14

รูปที่ 10:                                                 รูปที่ 11:

 

ขั้นตอนที่ สอง: สร้างภาพคลื่อนไหว:

ทำการเพิ่ม Storyboard เพื่อบันทึกความเคลื่อนไหวบทความนี้ เราจะทำการเพิ่ม Storyboard 2 อัน กล่าวคืออันแรก ใช้บันทึกความเคลื่อนใหวของ ปุ่มเมนูที่ 1 (button1) อันที่สองใช้บันทึกความเคลื่อนใหวของรูปภาพ (Image1)

เราไปทำการเพิ่ม Storyboard อันแรกโดยคลิกบน b1  เครื่องหมายบวก(+) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 12: จากนั้นให้ตั้งชื่อ Storyboard เป็น st_button1 แล้วกดปุ่ม OK ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 13:

15 16

รูปที่ 12:                                              รูปที่ 13:

 

จากรูปที่ 13: เมื่อเรากดปุ่ม OK เราจะได้สรรพสิ่งของโปรเจ็กต์ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 14:

17

รูปที่ 14:

 

กำหนดความเคลื่อนไหวให้ปุ่มเมนูที่ 1:

เรามาทำการกำหนด Keyframe เพื่อบันทึกภาพเคลื่อนไหวกันครับ บนกล่อง Objects and Timelineให้กดบนเครื่องบวก(+) Record_Keyframe เพื่อกำหนดจุดเริ่มต้นดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 15: จากนั้นเลื่อน Keyframe ไปที่ตำแหน่ง 1 มิลลิวินาที ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 15: แล้ว Record_Keyframe เพื่อบันทึกจุดภาพเคลื่อนไหวที่ 1 มิลลิวินาที ไว้ ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 16: จากนั้นเราจะไปปรับพรอเพอร์ตี้ของปุ่มเมนูที่ 1 เพื่อให้มันเคลื่อนไหวจากจุด 0 มิลลิวินาที ถึง 1 มิลลิวินาที ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 17 – 18:

18 xx1

รูปที่ 15:                                                   รูปที่ 16:

 

กำหนดให้ปุ่มหมุนรอบตัวเอง 1 รอบ โดยปรับพรอเพอร์ตี้บนกล่อง Transform ช่อง Rotate ให้ใส่มุม 360 องศาดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 17:

จากนั้นปรับเฉดสีพื้นให้ปุ่มเมนูที่ 1 ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 18: มาถึงขั้นตอนนี้เราก็ได้สร้าง Storyboard อันแรกที่ทำงานกับปุ่มเมนูที่ 1 เรียบร้อยแล้ว ขั้นตอนต่อไปเราไปสร้าง Storyboard อันที่สองครับ

19 20

รูปที่ 17:                                               รูปที่ 18:

 

ทำการสร้าง Storyboard อันที่สองเพื่อไว้กำหนดความเคลื่อนไหวให้กับ รูปภาพ (Image1) ให้เราตั้งชื่อ Storyboard เป็นชื่อ st_Image1 ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 19: เพื่อไว้สื่อว่าใช้สำหรับ Image1 เพราะเราต้องใช้ในขั้นตอน สร้างTriggers เพื่อกระตุ้นให้แต่ละStoryboard ให้แสดง ซึ่งจะกล่าวในลำดับต่อไป

21 

รูปที่ 19:

 

กำหนด Keyframe เริ่มต้นที่ 0 มิลลิวินาที ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 20: จากนั้นเลื่อน Keyframe ไปที่ 2 มิลลิวินาที จากนั้นทำการขยายรูปภาพให้ใหญ่ (ตามความเหมาะสมครับ) และทำการปรับพรอเพอร์ตี้ของรูปภาพ บน Appearance ปรับ Opacity = 100% และ Visibility = Visible ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 21: จากนั้นที่กล่อง Transform ช่อง Rotate ให้ใส่มุม 1080 องศา ให้หมุนรอบตัวเอง 3 รอบ ครับ (360*3=1080) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 22:

มาถึงขั้นตอนนี้ กล่าวได้ว่าเราได้ทำการกำหนดความเคลื่อนไหวให้คอนโทรลไว้เรียบร้อยแล้ว ขั้นตอนต่อไปเราจะไปกระตุ้นมันให้ Storyboard แต่ละอันทำงาน

22 23 24

รูปที่ 20:                                                   รูปที่ 21:                                              รูปที่ 22:

 

ขั้นตอนที่ สาม: สร้างTriggers กระตุ้นให้แสดงภาพเคลื่อนไหว:

ในขั้นตอนนี้เราจะมาทำการใส่ Triggers เพื่อกระตุ้น Storyboard แต่ละอันให้ทำงานตามเป้าประสงค์ของเรา ก่อนอื่นเราต้องลบ Triggers ที่ Default ตอนเราสร้าง Storyboard ออกก่อนนั่นคือ Event Window.Loaded โดยคลิกบน Event ดังกล่าวจากนั้นคลิก Delete triggers ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 23:

26

รูปที่ 23:

 

เราจะสร้าง Triggers เพื่อผูกเข้ากับ Event ของ button1 และ Image1 ดังนี้:

button1.MouseEnter: กระตุ้น Storyboard ชื่อ st_button1 ให้เริ่มทำงาน(Begin) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 24:

a1

รูปที่ 24:

 

button1.MouseLeave กระตุ้น Storyboard ชื่อ st_button1 ให้หยุดทำงาน (Remove) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 25:

a2

รูปที่ 25:

 

button1.Click กระตุ้น Storyboard ชื่อ st_Image1 ให้เริ่มทำงาน(Begin) ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 26:

a3

รูปที่ 26:         

                                   

Image1.MouseDown กระตุ้น Storyboard ชื่อ st_button1 ให้หยุดทำงาน (Remove)

ดังภาพที่ผู้เขียนได้บันทึกไว้เรียบร้อยแล้วในรูปที่ 27:

a4

รูปที่ 27:

 

บทสรุป

บทความนี้ท่านผู้ได้ทดลองใช้เครื่องมือ Microsoft Expression Blend ในการสร้างแอพพลิเคชัน WPF ซึ่งผู้เขียนได้นำเสนอวิธีการทำภาพเคลื่อนไหวแบบง่าย โดยใช้คอนโทรล button และ Image โดยการกำหนด Keyframe และปรับพรอเพอร์ตี้ของคอนโทรลเพื่อจำลองว่ามันเคลื่อนไหว และการกระตุ้นด้วย Triggers เพื่อกำหนดให้ Storyboard แต่ละอันแสดงตามเป้าประสงค์ของเรา

 


สรรพสิ่งบนโลกล้วนเปลี่ยนแปลงตามกาลเวลาฉันใด จิตใจของผู้คนย่อมมีวันเปลี่ยนแปลงฉันนั้น

น้ำหยดลงหินทุกวัน หินมันยังกร่อน จิตใจใหนเลยจะทานทนต่อการกัดกร่อนของสรรพสิ่งทุกวี่วัน

 

หวังว่าบทความนี้คงเป็นประโยชน์บ้างไม่มาก ก็คงเล็กน้อย และหากเกิดความผิดพลาดประการใด ผู้เขียนยินดีน้อมรับคำแนะนำ เพื่อปรับปรุงเปลี่ยนแปลงให้เกิดสิ่งดีดี ในครั้งต่อๆ ไป

 

 

Advertisements
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน WPF

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive