การแสดงแอนิเมชั่น iOS บนมุมมองด้วย UIKit และ UIView

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

ด้วยความกว้างขวางของหัวข้อ เราจะครอบคลุมแต่ละส่วนอย่างรัดกุมในระดับที่ค่อนข้างสูง เป้าหมายคือการให้ความรู้ผู้อ่านด้วยชุดตัวเลือกในการเพิ่มแอนิเมชั่นไปยังแอป iOS ของเขา/เธอ

ก่อนที่เราจะเริ่มต้นด้วยหัวข้อที่เกี่ยวข้องกับ iOS ให้เราดูสั้น ๆ ที่ความเร็วของแอนิเมชั่น

เคลื่อนไหวที่ 60FPS

โดยทั่วไปในวิดีโอ แต่ละเฟรมจะแสดงด้วยรูปภาพ และอัตราเฟรมจะกำหนดจำนวนภาพที่พลิกในลำดับ นี่เรียกว่า 'เฟรมต่อวินาที' หรือ FPS

FPS กำหนดจำนวนภาพนิ่งที่พลิกภายในหนึ่งวินาที ซึ่งหมายความว่ายิ่งมีจำนวนภาพ/ เฟรมมากเท่าใด รายละเอียด/ ข้อมูลก็จะแสดงมากขึ้นในวิดีโอ สิ่งนี้เป็นจริงสำหรับแอนิเมชั่นเช่นกัน

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

คุณต้องการเห็นความแตกต่างระหว่าง 30FPS และ 60FPS หรือไม่? ตรวจสอบสิ่งนี้!

คุณสังเกตเห็นความแตกต่างหรือไม่? ดวงตาของมนุษย์สามารถรู้สึกกระวนกระวายใจได้อย่างแน่นอนที่ fps ที่ต่ำกว่า ดังนั้นจึงเป็นแนวปฏิบัติที่ดีเสมอที่จะตรวจสอบให้แน่ใจว่าแอนิเมชั่นใดๆ ที่คุณสร้าง ปฏิบัติตามกฎพื้นฐานในการทำงานที่ 60FPS หรือสูงกว่า ทำให้รู้สึกสมจริงและมีชีวิตชีวามากขึ้น

เมื่อดู FPS แล้ว เรามาเจาะลึกถึงเฟรมเวิร์กหลักต่างๆ ของ iOS ที่ทำให้เรามีวิธีแสดงแอนิเมชั่นกัน

กรอบงานหลัก

ในส่วนนี้ เราจะพูดถึงเฟรมเวิร์กใน iOS SDK ซึ่งสามารถใช้สำหรับการสร้างแอนิเมชั่นการดูได้ เราจะอธิบายแต่ละอย่างคร่าวๆ โดยอธิบายชุดคุณลักษณะพร้อมตัวอย่างที่เกี่ยวข้อง

ภาพเคลื่อนไหว UIKit/ UIView

UIView เป็นคลาสพื้นฐานสำหรับมุมมองใดๆ ที่แสดงเนื้อหาในแอป iOS

UIKit ซึ่งเป็นเฟรมเวิร์กที่ให้ UIView แก่เรา มีฟังก์ชันแอนิเมชั่นพื้นฐานอยู่แล้ว ซึ่งทำให้สะดวกสำหรับนักพัฒนาที่จะบรรลุมากขึ้นโดยทำน้อยลง

API UIView.animate เป็นวิธีที่ง่ายที่สุดในการทำให้มุมมองเคลื่อนไหว เนื่องจากคุณสมบัติของมุมมองใดๆ ก็สามารถเคลื่อนไหวได้อย่างง่ายดายโดยระบุค่าคุณสมบัติในไวยากรณ์แบบบล็อก

ในแอนิเมชั่น UIKit ขอแนะนำให้แก้ไขเฉพาะคุณสมบัติแอนิเมชั่นของ UIVIew มิฉะนั้นจะมีผลกระทบที่แอนิเมชั่นอาจทำให้การดูจบลงในสถานะที่ไม่คาดคิด

แอนิเมชั่น(กับDuration: แอนิเมชั่น: เสร็จสิ้น)

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

ภาพเคลื่อนไหวเกือบทุกประเภท เช่น การย้าย การปรับขนาด การหมุน การซีดจาง ฯลฯ ในมุมมองสามารถทำได้ด้วย API เดียวนี้

ตอนนี้ ให้พิจารณาว่าคุณต้องการทำให้การเปลี่ยนแปลงขนาดปุ่มเคลื่อนไหว หรือคุณต้องการให้มุมมองเฉพาะเพื่อซูมเข้าสู่หน้าจอ นี่คือวิธีที่เราทำได้โดยใช้ UIView.animate API:

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3 }

นี่คือสิ่งที่เราทำที่นี่:

1. เราเรียกเมธอด UIView.animate ด้วยค่าระยะเวลาที่ส่งไปซึ่งแสดงถึงระยะเวลาที่แอนิเมชั่นที่อธิบายไว้ในบล็อกควรทำงาน
2. เราตั้งค่าเฟรมใหม่ของปุ่มที่ควรแสดงสถานะสุดท้ายของแอนิเมชัน
3. เราตั้งค่าศูนย์กลางปุ่มด้วย center ของ superview เพื่อให้อยู่ที่กึ่งกลางของหน้าจอ

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

Width = 0, Height = 0

ไปยังกรอบสุดท้าย:

Width = Height = newButtonWidth

และนี่คือสิ่งที่อนิเมชั่นจะมีลักษณะดังนี้:

เคลื่อนไหวด้วย Duration

วิธีนี้เหมือนกับส่วนขยายของวิธีการเคลื่อนไหวที่คุณสามารถทำทุกอย่างที่คุณสามารถทำได้ใน API ก่อนหน้า โดยเพิ่มพฤติกรรมทางฟิสิกส์บางอย่างในแอนิเมชั่นการดู

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

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center }), completion: nil)

นี่คือชุดของพารามิเตอร์ที่เราใช้:

1. duration
   หมายถึงระยะเวลาของภาพเคลื่อนไหวที่กำหนดระยะเวลาที่บล็อกของโค้ดควรทำงาน
2. delay
   แสดงถึงการหน่วงเวลาเริ่มต้นที่เราต้องการให้มีก่อนเริ่มแอนิเมชัน
3. SpringWithDamping
   แสดงถึงค่าของเอฟเฟกต์สปริงที่เราต้องการให้มุมมองทำงาน ค่าต้องอยู่ระหว่าง 0 ถึง 1 ยิ่งค่าต่ำ การแกว่งของสปริงยิ่งสูงขึ้น
4. velocity
   หมายถึงความเร็วที่ภาพเคลื่อนไหวควรเริ่ม
5. options
   ประเภทของเส้นโค้งแอนิเมชั่นที่คุณต้องการนำไปใช้กับแอนิเมชั่นการดูของคุณ
6. สุดท้ายบล็อกของรหัสที่เรากำหนดกรอบของปุ่มที่จะต้องเคลื่อนไหว มันเหมือนกับแอนิเมชั่นก่อนหน้า

และนี่คือสิ่งที่แอนิเมชั่นจะดูเหมือนกับการกำหนดค่าแอนิเมชั่นด้านบน:

UIViewPropertyAnimator

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

ท่าทางสัมผัส 'เลื่อนเพื่อปลดล็อก' แบบคลาสสิกและแอนิเมชั่นปิด/ขยายมุมมองผู้เล่น (ในแอป Music) เป็นตัวอย่างของแอนิเมชั่นแบบโต้ตอบและขัดจังหวะได้ คุณสามารถเริ่มย้ายมุมมองด้วยนิ้วของคุณ จากนั้นปล่อยมุมมอง แล้วมุมมองจะกลับไปที่ตำแหน่งเดิม อีกวิธีหนึ่ง คุณสามารถจับมุมมองระหว่างแอนิเมชันและลากนิ้วต่อไปได้

ต่อไปนี้เป็นตัวอย่างง่ายๆ ของวิธีที่เราสามารถบรรลุแอนิเมชั่นโดยใช้ UIViewPropertyAnimator :

 let newButtonWidth: CGFloat = 60 let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } animator.startAnimation() //2

นี่คือสิ่งที่เรากำลังทำ:

1. เราเรียก UIViewProperty API โดยผ่านระยะเวลาและเส้นโค้งของภาพเคลื่อนไหว
2. ไม่เหมือนกับ UIView.animate API ทั้งสองด้านบน แอนิเมชั่นจะไม่เริ่ม เว้นแต่คุณจะระบุเอง เช่น คุณจะควบคุมกระบวนการ/โฟลว์แอนิเมชั่นทั้งหมดได้อย่างเต็มที่

ในตอนนี้ สมมติว่าคุณต้องการควบคุมแอนิเมชั่นให้มากกว่านี้ ตัวอย่างเช่น คุณต้องการออกแบบและควบคุมแต่ละเฟรมในแอนิเมชั่น มี API อื่นสำหรับสิ่งนั้น animateKeyframes แต่ก่อนที่เราจะเจาะลึกลงไป เรามาดูกันว่าเฟรมคืออะไรในแอนิเมชั่น

frame คืออะไร?

คอลเล็กชันของการเปลี่ยนแปลง/การเปลี่ยนเฟรมของมุมมอง จากสถานะเริ่มต้นไปยังสถานะสุดท้าย ถูกกำหนดเป็น animation และแต่ละตำแหน่งของมุมมองระหว่างแอนิเมชันจะเรียกว่า frame

เคลื่อนไหวคีย์เฟรม

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

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

 UIView.animateKeyframes(withDuration: 5, //1 delay: 0, //2 options: .calculationModeLinear, //3 animations: { //4 UIView.addKeyframe( //5 withRelativeStartTime: 0.25, //6 relativeDuration: 0.25) { //7 self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8 } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { self.button.center = CGPoint(x: self.view.bounds.width, y: start.y) } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { self.button.center = start } })

นี่คือรายละเอียด:

1. duration
   เรียก API โดยส่งผ่านระยะเวลาของแอนิเมชัน
2. delay
   ระยะเวลาดีเลย์เริ่มต้นของแอนิเมชั่น
3. options
   ประเภทของเส้นโค้งแอนิเมชั่นที่คุณต้องการนำไปใช้กับแอนิเมชั่นมุมมองของคุณ
4. animations
   บล็อกที่ใช้แอนิเมชั่นคีย์เฟรมทั้งหมดที่ออกแบบโดยนักพัฒนา/ผู้ใช้
5. addKeyFrame
   เรียก API เพื่อออกแบบแอนิเมชั่นแต่ละรายการ ในกรณีของเรา เราได้กำหนดการย้ายปุ่มแต่ละครั้ง เราสามารถมีแอนิเมชั่นดังกล่าวได้มากเท่าที่เราต้องการ เพิ่มในบล็อก
6. relativeStartTime
   กำหนดเวลาเริ่มต้นของแอนิเมชันในคอลเล็กชันของบล็อกแอนิเมชัน
7. relativeDuration
   กำหนดระยะเวลาโดยรวมของแอนิเมชั่นเฉพาะนี้
8. center
   ในกรณีของเรา เราเพียงแค่เปลี่ยนคุณสมบัติตรงกลางของปุ่มเพื่อย้ายปุ่มไปรอบๆ หน้าจอ

และนี่คือลักษณะของอนิเมชั่นสุดท้าย:

CoreAnimation

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

API แอนิเมชั่น UIKit ไม่ได้ให้การควบคุมอนิเมชั่นที่ทำบนมุมมองหนึ่งมากนัก เนื่องจากส่วนใหญ่จะใช้สำหรับคุณสมบัติแอนิเมชั่นของมุมมองที่เคลื่อนไหวได้ ดังนั้นในกรณีดังกล่าว ที่คุณตั้งใจจะควบคุมทุกเฟรมของแอนิเมชั่น จะดีกว่าถ้าใช้ API ของแอนิเมชั่นหลักที่เกี่ยวข้องโดยตรง หรือสามารถใช้ทั้งภาพเคลื่อนไหว UIView และภาพเคลื่อนไหวหลักร่วมกันได้เช่นกัน

UIView + แอนิเมชั่นหลัก

มาดูกันว่าเราจะสร้างแอนิเมชั่นการเปลี่ยนปุ่มเดิมขึ้นมาใหม่พร้อมกับการระบุเส้นเวลาโดยใช้ UIView และ Core Animation API ได้อย่างไร

เราสามารถใช้ฟังก์ชันกำหนดเวลาของ CATransaction ซึ่งช่วยให้คุณระบุและควบคุมเส้นโค้งของภาพเคลื่อนไหวได้

มาดูตัวอย่างของแอนิเมชั่นการเปลี่ยนขนาดปุ่มที่มีรัศมีมุมโดยใช้ฟังก์ชันจับเวลาของ CATransaction และแอนิเมชั่น UIView ผสมกัน:

 let oldValue = button.frame.width/2 let newButtonWidth: CGFloat = 60 /* Do Animations */ CATransaction.begin() //1 CATransaction.setAnimationDuration(2.0) //2 CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3 // View animations //4 UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } // Layer animations let cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5 cornerAnimation.fromValue = oldValue //6 cornerAnimation.toValue = newButtonWidth/2 //7 button.layer.cornerRadius = newButtonWidth/2 //8 button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9 CATransaction.commit() //10

นี่คือรายละเอียด:

1. begin
   แสดงถึงจุดเริ่มต้นของบล็อกโค้ดแอนิเมชั่น
2. duration
   ระยะเวลาของแอนิเมชั่นโดยรวม
3. curve
   แสดงถึงเส้นเวลาที่ต้องใช้กับแอนิเมชั่น
4. UIView.animate
   แอนิเมชั่นแรกของเราที่จะเปลี่ยนเฟรมของปุ่ม
5. CABasicAnimation
   เราสร้างวัตถุ CABasicAnimation โดยอ้างอิง cornerRadius ของปุ่มเป็นคีย์พาธ เนื่องจากนั่นคือสิ่งที่เราต้องการทำให้เคลื่อนไหว ในทำนองเดียวกัน หากคุณต้องการควบคุมระดับแบบละเอียดสำหรับแอนิเมชั่นคีย์เฟรม คุณสามารถใช้คลาส CAKeyframeAnimation
6. fromValue
   แสดงถึงค่าเริ่มต้นของแอนิเมชั่น กล่าวคือ ค่าเริ่มต้นของ cornerRadius ของปุ่มจากตำแหน่งที่แอนิเมชั่นต้องเริ่มต้น
7. toValue
   หมายถึงค่าสุดท้ายของภาพเคลื่อนไหว กล่าวคือ ค่ามุมสุดท้ายของ cornerRadius ของปุ่มที่ภาพเคลื่อนไหวต้องสิ้นสุด
8. cornerRadius
   เราต้องตั้งค่าคุณสมบัติ cornerRadius ของปุ่มด้วยค่าสุดท้ายของแอนิเมชั่น มิฉะนั้น ค่า cornerRadius ของปุ่มจะถูกเปลี่ยนกลับเป็นค่าเริ่มต้นโดยอัตโนมัติหลังจากแอนิเมชั่นเสร็จสิ้น
9. addAnimation
   เราแนบอ็อบเจ็กต์แอนิเมชั่นที่มีการกำหนดค่าของกระบวนการแอนิเมชั่นทั้งหมดเข้ากับเลเยอร์โดยแสดงคีย์พาธที่แอนิเมชั่นจะต้องดำเนินการ
10. commit
    แสดงถึงจุดสิ้นสุดของบล็อกโค้ดแอนิเมชันและเริ่มต้นจากแอนิเมชัน

นี่คือลักษณะของอนิเมชั่นสุดท้าย:

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

UIKitDynamics

UIKit Dynamics เป็นเอ็นจิ้นฟิสิกส์สำหรับ UIKit ซึ่งช่วยให้คุณสามารถเพิ่มพฤติกรรมทางฟิสิกส์ เช่น การชน แรงโน้มถ่วง การผลัก สแน็ป และอื่นๆ ไปยังการควบคุม UIKit

UIKitDynamicAnimator

นี่คือคลาสผู้ดูแลระบบของเฟรมเวิร์ก UIKit Dynamics ที่ควบคุมแอนิเมชั่นทั้งหมดที่ทริกเกอร์โดยการควบคุม UI ที่กำหนด

UIKitDynamicBehavior

ช่วยให้คุณสามารถเพิ่มพฤติกรรมทางฟิสิกส์ให้กับแอนิเมเตอร์ ซึ่งจะทำให้แอนิเมเตอร์ทำงานบนมุมมองที่แนบมากับแอนิเมชั่นได้

พฤติกรรมประเภทต่างๆ สำหรับ UIKitDynamics ได้แก่:

• UIAttachmentBehavior
• UICollisionBehavior
• UIFieldBehavior
• UIGravityBehavior
• UIPushBehavior
• UISnapBehavior

สถาปัตยกรรมของ UIKitDynamics มีลักษณะดังนี้ โปรดทราบว่าสามารถแทนที่รายการที่ 1 ถึง 5 ด้วยมุมมองเดียว

ให้เรานำพฤติกรรมทางฟิสิกส์มาใช้กับปุ่มของเรา เราจะมาดูวิธีการใช้แรงโน้มถ่วงกับปุ่มเพื่อให้เรารู้สึกว่าต้องจัดการกับวัตถุจริง

 var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3

นี่คือรายละเอียด:

1. UIKitDynamicAnimator
   เราได้สร้างวัตถุ UIKitDynamicAnimator ซึ่งทำหน้าที่เป็นตัวประสานสำหรับการแสดงภาพเคลื่อนไหว เรายังผ่านการตรวจสอบปุ่มของเราเป็นมุมมองอ้างอิง
2. UIGravityBehavior
   เราได้สร้างวัตถุ UIGravityBehavior และส่งปุ่มของเราไปยังองค์ประกอบอาร์เรย์ที่มีการฉีดพฤติกรรมนี้
3. addBehavior
   เราได้เพิ่มวัตถุแรงโน้มถ่วงให้กับแอนิเมเตอร์
   
   สิ่งนี้ควรสร้างแอนิเมชั่นดังที่แสดงด้านล่าง:
   

   

   เราควรบอกให้อนิเมเตอร์พิจารณาด้านล่างของหน้าจอให้เป็นพื้น นี่คือที่มา UICollisionBehavior
   
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
   เราได้สร้างอ็อบเจ็กต์ UICollisionBehavior และส่งผ่านปุ่มเพื่อให้พฤติกรรมนั้นถูกเพิ่มเข้าไปในองค์ประกอบ
5. translatesReferenceBoundsIntoBoundary
   การเปิดใช้งานคุณสมบัตินี้จะบอกให้อนิเมเตอร์ใช้ขอบเขตการดูอ้างอิงเป็นจุดสิ้นสุด ซึ่งอยู่ด้านล่างสุดของหน้าจอในกรณีของเรา
6. addBehavior
   เราได้เพิ่มลักษณะการชนกันของแอนิเมเตอร์ที่นี่
   
   ตอนนี้ปุ่มของเราควรจะแตะพื้นและยืนนิ่งดังที่แสดงด้านล่าง:
   

   

   
   มันค่อนข้างเรียบร้อยใช่มั้ย?
   
   ตอนนี้ ให้เราลองเพิ่มเอฟเฟกต์การเด้งเพื่อให้วัตถุของเรารู้สึกเหมือนจริงมากขึ้น ในการทำเช่นนั้น เราจะใช้คลาส UIDynamicItemBehavior
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! var bouncingBehavior : UIDynamicItemBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6 //Adding the bounce effect bouncingBehavior = UIDynamicItemBehavior(items: [button]) //7 bouncingBehavior.elasticity = 0.75 //8 dynamicAnimator.addBehavior(bouncingBehavior) //9

7. UIDynamicItemBehavior
   เราได้สร้างอ็อบเจ็กต์ UIDynamicItemBehavior และส่งผ่านปุ่มเพื่อให้การทำงานนั้นถูกเพิ่มเข้าไปในองค์ประกอบ
8. elasticity
   ค่าต้องอยู่ระหว่าง 0-1 ซึ่งแสดงถึงความยืดหยุ่น กล่าวคือ จำนวนครั้งที่วัตถุต้องกระเด้งขึ้นและลงจากพื้นเมื่อถูกกระแทก นี่คือที่มาของเวทมนตร์ — โดยการปรับแต่งคุณสมบัตินี้ คุณสามารถแยกความแตกต่างระหว่างวัตถุประเภทต่างๆ เช่น ลูกบอล ขวด วัตถุแข็ง และอื่นๆ
9. addBehavior
   เราได้เพิ่มลักษณะการชนกันของแอนิเมเตอร์ที่นี่

ตอนนี้ ปุ่มของเราควรจะเด้งเมื่อตกลงพื้นดังที่แสดงด้านล่าง:

repo นี้ค่อนข้างมีประโยชน์และแสดงพฤติกรรม UIKitDynamics ทั้งหมดในการดำเนินการ นอกจากนี้ยังมีซอร์สโค้ดเพื่อเล่นกับพฤติกรรมแต่ละอย่าง ในความคิดของฉันควรทำหน้าที่เป็นรายการวิธีมากมายในการทำแอนิเมชั่น iOS ในมุมมอง!

ในหัวข้อถัดไป เราจะพิจารณาคร่าวๆ เกี่ยวกับเครื่องมือต่างๆ ที่จะช่วยเราในการวัดประสิทธิภาพของแอนิเมชัน ฉันยังขอแนะนำให้คุณดูวิธีเพิ่มประสิทธิภาพการสร้าง Xcode ของคุณ เนื่องจากจะช่วยประหยัดเวลาในการพัฒนาได้มาก

การปรับแต่งประสิทธิภาพ

ในส่วนนี้ เราจะมาดูวิธีการวัดและปรับแต่งประสิทธิภาพของแอนิเมชั่น iOS ในฐานะนักพัฒนา iOS คุณอาจเคยใช้ Xcode Instruments เช่น Memory Leaks และ Allocations เพื่อวัดประสิทธิภาพของแอปโดยรวมแล้ว มีเครื่องมือที่ใช้ในการวัดประสิทธิภาพของแอนิเมชั่นเช่นเดียวกัน

เครื่องมือ Core Animation

ลองใช้เครื่องมือ Core Animation แล้วคุณจะเห็น FPS ที่หน้าจอแอปของคุณนำเสนอ นี่เป็นวิธีที่ยอดเยี่ยมในการวัดประสิทธิภาพ/ความเร็วของแอนิเมชั่นที่แสดงในแอป iOS ของคุณ

การวาดภาพ

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

Rasterization

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

ห่อ

โดยสรุป ฉันได้สรุปรายการทรัพยากรที่มีประโยชน์สำหรับแอนิเมชั่น iOS ด้วย คุณอาจพบว่าสิ่งนี้มีประโยชน์มากเมื่อทำงานกับแอนิเมชั่น iOS นอกจากนี้ คุณอาจพบว่าชุดเครื่องมือออกแบบนี้มีประโยชน์ในขั้นตอน (การออกแบบ) ก่อนที่จะเจาะลึกลงไปในแอนิเมชั่น

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