DeveloperFeaturediOS DeveloperMobile TechnologyObject Oriented TechnologyObjective CProgramming LanguageSocial Media Marketing

เขียน iPhone Apps การใช้งาน UIImageView สำหรับสร้าง Animation แบบง่ายๆ

บทเรียนสำหรับการพัฒนาแอพพลิเคชันบน iOS หรือ App บนiPhoneกับการใช้งาน UIImageView สร้าง Animation หรือภาพเคลื่อนไหวได้

UIImageView for Animations
UIImageView for Animations

พอดีได้ศึกษาจากเว็บไซต์ appcoda.com แล้วเห็นว่าน่าสนใจก็เลยขอเอามา Edit อ้างอิงให้เหล่านักพัฒนาได้ศึกษากันในรูปแบบภาษาไทยครับ ซึ่ง iOS นั้นจริงๆ ถ้าเราใช้ Cocos2D สำหรับเขียนเกม ก็จะเป็นอะไรที่ง่ายสำหรับการสร้าง Animation และการเคลื่อนไหว แต่ถ้าไม่ต้องการใช้ Framework อย่าง Cocos2D มาช่วย มีแค่ Xcode เพียวๆ ก็สามารถใช้ UIImageView สร้างได้เช่นกันครับ

เริ่มต้นขออนุญาติใช้ภาพกราฟิกจากเว็บไซต์เจ้าของบทความก่อนแล้วกัน คือภาพของ Psy ครับ ซึ่งจะต้องใช้ภาพที่แบ่งออกเป็น Sprite Frame เรียงต่อกันออกมา ( หลักการเดียวกับการใช้ CSS Menu และ BitBlt ของ DirectX แบบการพัฒนาเกมแบบเก่าๆ)

เริ่มต้นพัฒนา Animation ด้วย UIImageView
เปิด XCode ขึ้นมาทำการ New Project ใหม่เลือกเป็น Single View Application ครับ

Create a new project using the Single View Application template
Create a new project using the Single View Application template
Simple Animation Project Settings
Simple Animation Project Settings

ตั้งชื่อ Project ตามใจชอบ เลือก Device เป็น iPhone และเลือก Use Storyboards และ Use Automatic Reference Counting ครับ

Image series for animation
Image series for animation

ดาวน์โหลดไฟล์ภาพกราฟิกทั้งหมดจาก Sample Project ตัวนี้

 Download the image pack

เมื่อดาวน์โหลดเสร็จแล้วให้เปิดไฟล์ ViewController.m ขึ้นมาแก้ไขที่ Method ที่ชื่อ viewDidLoad() เพิ่ม Code ต่อไปนี้

สังเกตว่าการเรียกใช้คำสั่งจะเป็นการเก็บ Array ของ รูปภาพทั้งหมดเป็นตัวแปร ไว้ในตัวแปร Array ที่ชื่อ imageNames เสร็จแล้วค่อยใช้การเรียก for() วน Loop ตามจำนวน Size ของ Array หรือจำนวนภาพทั้งหมดที่มีในตัวแปร imageNames ครับ

โดยมีการใช้ Duration หรือความเร็วในการเปลี่ยน Frame รูปภาพ 0.5 หรือ ครึ่งวินาทีประมาณนั้นครับ โดยภาพจะถูก Crop ตำแหน่งที่คำสั่ง CGRectMake ตำแหน่งที่ต้องการปรากฏในหน้าจอ ซึ่งตัวอย่างนั้นคือ (60,95,86,193) เป็นต้น ประมาณชิดขวา อยู่กลางๆ หน้าจอ

ตัวอย่างที่สอนนั้น จะมีการเพิ่ม คำสั่งในการเล่น Animation แบบ Slow Motion หรือมีค่าหน่วงมากๆ ตาม Code นี้

ทำการ Run Project ของเราดูอีกที จะเห็น ผลลัพธ์การเต้นโชว์ที่ เจ๋งครับ

ทำการ Run ตัว แอพพลิเคชัน
ทำการ Run ตัว แอพพลิเคชัน

ดาวน์โหลด Source Code ที่ AppCoda ครับ:  Download

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน