การพัฒนา iOS ด้วย Swift 2 - ภาพเคลื่อนไหว

ภาพเคลื่อนไหวเป็นส่วนสำคัญของแอปพลิเคชันใด ๆ เนื่องจากดึงดูดความสนใจของผู้ใช้มาที่แอปพลิเคชัน ภาพเคลื่อนไหวเป็นเพียงชุดของภาพที่ทำซ้ำในอัตราที่รวดเร็ว นอกจากนี้ยังทำให้แอปพลิเคชันของคุณแตกต่างจากที่อื่น

การทำโครงการแอนิเมชั่น - แอนิเมชั่นคิตตี้

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

ในส่วนนี้เราจะใช้ภาพต่อไปนี้

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

(หากคุณไม่ต้องการใช้รูปภาพเหล่านี้ให้ค้นหา gif ใด ๆ และแปลงเป็นรูปภาพออนไลน์โดยใช้ gif เป็นตัวแปลงรูปภาพ)

ภายในการทำงานของปุ่มเราจะแทรกคำสั่งต่อไปนี้เพื่อแสดงภาพเมื่อกดปุ่ม

imageView.image = UIImage(named: "frame_0_delay-0.1s.gif") 
// frame_0_delay-0.1s.gif, is the name of image

นี่คือวิธีที่เรากำหนดภาพโดยใช้โปรแกรมให้กับ Image View ตอนนี้มุมมองควรมีลักษณะดังนี้ -

มุมมองแรกจะปรากฏขึ้นเมื่อเราเรียกใช้แอปพลิเคชัน เมื่อเราคลิกที่ปุ่ม Animate จะปรากฏภาพ

นี่ไม่ใช่ภาพเคลื่อนไหว แต่เป็นเพียงภาพ เราจะสร้างแอนิเมชั่นตอนนี้ -

เพิ่มตัวแปรด้านล่างช่องรูปภาพ: var counter = 1.

ดูว่าภาพของเรามีชื่อสามัญและมีเพียงอักขระเดียวเท่านั้นที่แตกต่างกัน เปลี่ยนรหัสของปุ่มเคลื่อนไหวตามที่แสดงด้านล่าง -

@IBAction func animatePressed(_ sender: Any) { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-0.1s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

ตอนนี้เมื่อคุณกด animateปุ่มภาพจะเปลี่ยนทุกครั้ง ขั้นตอนต่อไปคือการสร้างสิ่งต่อไปนี้ -

  • สร้างตัวแปร - isAnimating และกำหนด False ให้กับมัน

  • สร้างตัวแปรตัวจับเวลาและกำหนดไฟล์ Timer() ฟังก์ชั่นมัน

เมื่อทำสองขั้นตอนข้างต้นเสร็จแล้วให้สร้างฟังก์ชันเคลื่อนไหวและวางโค้ดต่อไปนี้

func animate() { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

โดยที่ counter คือตัวแปรตัวนับของเราที่เราสร้างไว้ในไฟล์ก่อนหน้านี้ ตอนนี้ภายในฟังก์ชันปุ่มเคลื่อนไหวให้เพิ่มรหัสต่อไปนี้ -

if isAnimating { 
   timer.invalidate() 
   isAnimating = false 
} else { 
   timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: 
   #selector(ViewController.animate), userInfo: nil, repeats: true) 
   isAnimating = true 
}

ลองเรียกใช้แอปพลิเคชันและเราจะเห็นว่ามีการเรียกใช้ภาพเคลื่อนไหวบนอุปกรณ์ของคุณ

Challenge - เพิ่มปุ่มหยุดที่จะหยุดภาพเคลื่อนไหว