The Animation Module in React Native
เรียนรู้เพิ่มเติมจากหลักสูตรเต็มรูปแบบ
React Native: Advanced Concepts
Master the advanced topics of React Native: Animations, Maps, Notifications, Navigation and More!
วิดีโอออนดีมานด์ความยาว 16:33:06 • อัพเดทเมื่อ กุมภาพันธ์ 2025
Make compelling applications using expert-level features of React Native
Create amazingly smooth and performant animations
Build new React Native apps with Expo
Understand the latest Navigation options for new React Native apps
Add logic to your Firebase backend with Google Cloud Functions
Update your users with cross platform Push Notifications
Handle your users going offline with Redux Persist
ไทย [อัตโนมัติ]
ในส่วนสุดท้ายเราพูดเล็กน้อยเกี่ยวกับระบบแอนิเมชั่นเลย์เอาต์และระบบอนิเมชั่นภายในการแสดงพื้นเมืองอีกครั้ง โปรดจำไว้ว่าสิ่งเหล่านี้เป็นสองวิธีที่แตกต่างกันในการทำให้อนิเมชั่นของคุณกลายเป็นคนพื้นเมืองในแบบที่โมดูลระบบอนิเมชั่นของเราใช้สำหรับอนิเมชั่นที่เรียบง่ายและตรงไปตรงมา รวมกัน. เรากำลังจะพูดคุยในส่วนนี้เกี่ยวกับโมดูลภาพเคลื่อนไหวและโค้ดบางส่วนที่อยู่ภายใน ดังนั้นอนิเมชั่นโมดูลจึงมีฟังก์ชั่นและส่วนประกอบต่าง ๆ ที่เราสามารถใช้ในการตั้งค่าภาพเคลื่อนไหว ดังนั้นจึงมีรหัสมากมายคุณสมบัติมากมายที่อยู่ในโมดูลนี้และความยากลำบากส่วนใหญ่ที่ฉันคิดว่ามีอยู่โดยใช้โมดูลภาพเคลื่อนไหวนี้เป็นเพียงการทำความเข้าใจกับฟังก์ชั่นและโมดูลและส่วนประกอบต่าง ๆ ทั้งหมด เพื่อสร้างภาพเคลื่อนไหวภายในแอปของคุณ ดังนั้นในส่วนนี้เราจะสำรวจโมดูลภาพเคลื่อนไหวสักหน่อย ดังนั้นฉันอยากจะบอกคุณอีกเล็กน้อยเกี่ยวกับองค์ประกอบของคุณสมบัติที่แตกต่างกันวัตถุทั้งหมดที่อยู่ในโมดูลภาพเคลื่อนไหวเพื่อให้คุณมีกรอบอ้างอิงที่เราใช้แต่ละองค์ประกอบและฟังก์ชั่นและ blah blah blah ฉันต้องการเริ่มต้นด้วยการพูดคุยเล็กน้อยเกี่ยวกับภาพเคลื่อนไหวที่ง่ายมาก ดังนั้นเราจะพูดถึงแอนิเมชันนี้ที่นี่บนหน้าจอแล้วเราจะพูดถึงว่าส่วนต่าง ๆ ของรหัสที่อยู่ภายในโมดูลภาพเคลื่อนไหวจะช่วยเราในการรวบรวมแอนิเมชั่นนี้เข้าด้วยกันได้อย่างไร psyched เกี่ยวกับการเคลื่อนไหวเล็กน้อย อนิเมชั่นนั้นตรงไปตรงมาอย่างที่คิด ฉันต้องการเริ่มต้นด้วยลูกบอลที่ด้านบนของหน้าจอที่ศูนย์วินาทีเพื่อให้ลูกบอลเริ่มที่ด้านบนของหน้าจอและจากนั้นในช่วงหนึ่งวินาทีที่บอลควรย้ายในลักษณะเชิงเส้นเรียบมากลงไปด้านล่าง ของหน้าจอเช่นนั้น คุณสามารถจินตนาการได้ว่าถ้าฉันเล่นอนิเมชั่นให้คุณตอนนี้มันจะเป็นแบบนี้ ดังนั้นเหมือนหนึ่งวินาทีบางอย่างเช่นนั้น แต่มันจะดีและราบรื่นและน่าจะเกินช่วงหนึ่งวินาที ตกลง. ดังนั้นเมื่อใดก็ตามที่เราดูภาพเคลื่อนไหวใด ๆ ก็ตามที่ฉันต้องการให้คุณเริ่มคิดคำถามที่แตกต่างกันสามคำถาม และคำถามที่แตกต่างกันสามข้อนี้จะช่วยให้คุณเข้าใจส่วนต่าง ๆ ทั้งหมดของรหัสและเครื่องมือที่คุณมีในโมดูลภาพเคลื่อนไหวนั้น ดังนั้นคำถามสามข้อนี้สำคัญมากสำหรับคำตอบนั้น นี่คือคำถามสามข้อ ครั้งแรกที่รายการบนหน้าจอเป็นจุดที่กำหนดในเวลาใด ๆ ดังนั้นฉันคาดหวังว่าจะสามารถขอให้คุณชอบหรือขอใบสมัครของคุณในเวลาเท่ากับศูนย์วินาที ลูกบอลอยู่ที่ไหนบนหน้าจอ ถ้าฉันถามคำถามนี้กับคุณหวังว่าคุณคงพูดกับฉันได้ดีสตีเฟ่นบอลควรจะอยู่ด้านบนสุดของหน้าจอ ตกลง. น่าอัศจรรย์ และถ้าฉันกลับมาหาคุณอีกครั้งและฉันก็พูดว่าลูกบอลอยู่ตรงไหน หนึ่งวินาทีคุณควรบอกฉันว่า Oh Stephen ลูกจะลงที่ด้านล่างของหน้าจอแล้วในทางทฤษฎีถ้าฉันถามคุณเฮ้ว่าลูกบอลอยู่ที่ 1 1/2 วินาทีเหมือนจุดที่ใช้ห้าวินาที บอกฉันสิมันอยู่ตรงกลางของหน้าจอ ดังนั้นสิ่งที่ฉันพยายามสื่อนี่คือคำถามแรกที่เราต้องถามหรือตอบข้ออ้างว่าฉันได้ภาพเคลื่อนไหวที่แตกต่างกันที่เรารวบรวมไว้คือองค์ประกอบของเราควรอยู่บนหน้าจอในเวลาใดเวลาหนึ่ง คำถามที่สองที่เราต้องสามารถตอบเกี่ยวกับทุกอนิเมชั่นที่เรารวบรวมเข้าด้วยกันคือองค์ประกอบที่เคลื่อนไหว เห็นได้ชัดว่ามันเริ่มต้นที่ด้านบน แต่ในขณะที่เป้าหมายสุดท้ายหรือที่เราพยายามย้ายองค์ประกอบนี้ไปและแน่นอนเราไม่เพียง แต่ต้องพูดคุยเกี่ยวกับองค์ประกอบการเคลื่อนไหวรอบ ๆ เช่นกันเราสามารถพูดคุยเกี่ยวกับองค์ประกอบที่เปลี่ยนขนาดหรือสีเป็นหลัก . ข้อที่สองนี่คือเป้าหมายสุดท้ายของอนิเมชั่นนี้ องค์ประกอบควรมีลักษณะอย่างไรที่ควรอยู่บนหน้าจอ ควรใช้สีอะไร นั่นคือสิ่งที่ฉันอยากรู้ คำถามข้อที่สองที่นี่ ดังนั้นสิ่งที่เราพยายามที่จะประสบความสำเร็จกับภาพเคลื่อนไหวนี้ ในที่สุดคำถามที่สามและคำถามนี้อาจดูเหมือนชัดเจนมาก แต่สำคัญมากที่จะได้คำตอบนั้น องค์ประกอบใดที่เราพยายามเคลื่อนไปมาบนหน้าจอ ดังนั้นในบริบทของอนิเมชั่นนี้เราจึงพยายามที่จะย้ายลูกบอลไปรอบ ๆ ใช่มันค่อนข้างตรงไปตรงมา ฉันต้องการย้ายลูกบอลไปรอบ ๆ ตกลง. นี่คือคำถามสำคัญสามข้อที่คุณต้องถามเกี่ยวกับทุกอนิเมชั่นที่คุณรวบรวมไว้ และฉันคิดว่าคุณรู้ในหัวของคุณคุณอาจจะเริ่มจินตนาการ ลองนึกถึงแอปพลิเคชั่นที่ให้มาซึ่งคุณอาจใช้งานหรือแอนิเมชั่นที่คุณนึกออก คุณอาจใช้คำถามสามข้อนี้กับภาพเคลื่อนไหวใด ๆ ที่คุณจินตนาการได้ ดังนั้นอีกครั้งบางทีเรากำลังเปลี่ยนสีขององค์ประกอบบางอย่างหรือเรากำลังเปลี่ยนตำแหน่งของมันบนหน้าจอหรือเปลี่ยนขนาดของมัน องค์ประกอบใดที่เราพยายามเปลี่ยน เราจะเปลี่ยนแปลงได้อย่างไร สถานะสุดท้ายที่ควรเป็นคืออะไร นี่คือคำถามสามข้อที่เราต้องการถาม ตกลง. ดังนั้นตอนนี้เราเข้าใจคำถามสามข้อนี้แล้วเราจะพูดถึงว่าโมดูลภาพเคลื่อนไหวหรือส่วนต่าง ๆ ของรหัสในโมดูลนั้นจะช่วยให้เราตอบคำถามเหล่านี้อย่างไรเมื่อเรารวบรวมภาพเคลื่อนไหวเข้าด้วยกัน ดังนั้นทั้งหมดที่ฉันต้องการทำตอนนี้จากแผนภาพนี้ที่คุณกำลังมองออกที่เพิ่งดึงฉันต้องการให้คุณเข้าใจคุณสมบัติที่แตกต่างเหล่านี้เป็นวัตถุที่แตกต่างกันเหล่านี้ที่นั่งอยู่ในโมดูลภาพเคลื่อนไหวเพราะเราจะทำให้ดี การใช้งานเหล่านี้ในอนาคตเมื่อเราเริ่มทำงานกับแอปพลิเคชันแต่ละรายการของเรา ดังนั้นคำถามข้อหนึ่งตำแหน่งปัจจุบันขององค์ประกอบที่เคลื่อนไหวอยู่คืออะไร นั่นเป็นคำถามแรกที่เราต้องถาม รายการอยู่บนหน้าจอตอนนี้ที่ไหน โมดูลภาพเคลื่อนไหวมีวัตถุค่า วัตถุค่านี้ช่วยให้เราสามารถอธิบายตำแหน่งปัจจุบันหรือสถานะปัจจุบันขององค์ประกอบที่ควรจะอยู่บนหน้าจอ วัตถุค่านี้มีคุณสมบัติที่เล็กลงสองตัวที่เรียกว่า value และ value x y ดังนั้นสิ่งเหล่านี้คือวัตถุจาวาสคริปต์ที่เราจะใช้และพวกเขาจะช่วยเราอธิบายว่าตำแหน่งปัจจุบันขององค์ประกอบควรอยู่บนหน้าจอหรือสิ่งที่สีปัจจุบันของมันควรเป็น . นั่นคือจุดประสงค์ของโมดูลค่านี้ คำถามที่สองคือภาพเคลื่อนไหวเปลี่ยนไปอย่างไร คำถามนี้ได้รับการตอบโดยโมดูลประเภทที่อยู่ภายในของระบบภาพเคลื่อนไหวที่โมดูลประเภทมีฟังก์ชั่นนั้นหรือ ขอโทษนะที่ javascript วัตถุสปริงสลายและกำหนดเวลาวัตถุทั้งสามนี้ตรงนี้จะใช้เพื่อตอบคำถามว่าภาพเคลื่อนไหวเปลี่ยนแปลงอย่างไรเมื่อเวลาผ่านไป เช่นเดียวกับที่เราเปลี่ยนสีหรือเปลี่ยนตำแหน่งเมื่อเวลาผ่านไป ในที่สุดองค์ประกอบใดที่เราพยายามจะนำภาพเคลื่อนไหวนี้ไปใช้ นั่นคือจุดประสงค์ของโมดูลส่วนประกอบที่อยู่ภายในโมดูลภาพเคลื่อนไหวและข้างในนั้นเราได้รับส่วนประกอบทั้งสามของข้อความและรูปภาพ ดังนั้นเราจึงใช้ส่วนประกอบทั้งสามนี้ตรงนี้เพื่อระบุองค์ประกอบที่เราพยายามทำให้เคลื่อนไหวหรือเปลี่ยนแปลงตลอดเวลา เลสลี่ฉันอยากจะบอกว่าที่นี่เพียงเพื่อให้ชัดเจน 100% เกี่ยวกับสิ่งที่แตกต่างเช่นสิ่งที่ฉันคลิกและสิ่งเหล่านี้คุณรู้ค่าค่า xy เพียงเพื่อให้คุณเป็นตัวอย่างในทางปฏิบัติของสิ่งที่เกิดขึ้น พยายามถ่ายทอดที่นี่เกี่ยวกับโมดูลภาพเคลื่อนไหว ในตอนท้ายของวันที่เราเริ่มรวบรวมแอนิเมชั่นบางส่วนของเราเราก็จะจบลง ให้ฉันได้รับไฟล์จาวาสคริปต์ที่นี่อย่างรวดเร็วจริงๆ เราไปกันแล้วในที่สุดเราก็จะเริ่มนำเข้าโมดุลอนิเมชั่นจากชนพื้นเมืองอีกครั้ง และคุณไม่จำเป็นต้องคัดลอกในรหัสนี้ เพียงแค่นำสิ่งนี้มาให้คุณเป็นตัวอย่าง ดังนั้นในโมดูลอนิเมชั่นที่เรานำเข้าจากรีแอคทีฟแบบดั้งเดิมนั้นมีคุณสมบัติที่เป็นค่าภาพเคลื่อนไหวประเภท Daut ที่เคลื่อนไหวได้และส่วนประกอบ Dot จากนั้นในแต่ละวัตถุเหล่านี้มีคุณสมบัติเพิ่มเติมที่เราสามารถเข้าถึงได้ เช่นภาพเคลื่อนไหวหรือสปริงสำหรับประเภทและมุมมอง นี่คือวัตถุจาวาสคริปต์ตรงนี้ที่จะช่วยเราตอบคำถามว่าองค์ประกอบควรอยู่บนหน้าจออย่างไร นี่เป็นวัตถุจาวาสคริปต์ที่จะช่วยให้เราตอบคำถามว่าองค์ประกอบเปลี่ยนตำแหน่งหรือสีหรืออะไรก็ตามที่เราพยายามทำให้เคลื่อนไหว แล้วนี่คือองค์ประกอบที่จะช่วยให้เราตอบคำถามว่าองค์ประกอบใดที่เราพยายามสร้างภาพเคลื่อนไหว บนหน้าจอ. ดังนั้น. เพื่อให้แน่ใจว่าเป็นสิ่งที่ชัดเจนจริงๆสิ่งที่ฉันกำลังพูดถึง นี่คือวัตถุจาวาสคริปต์ทั้งหมดที่เรากำลังจะใช้งานเพื่อดึงภาพเคลื่อนไหวเหล่านี้ออก ตกลง. ดังนั้นในส่วนนี้ฉันรู้ว่านี่อาจจะค่อนข้างลึกได้อย่างรวดเร็ว แต่ Zuzu เริ่มเขียนโค้ดบางส่วน ทุกอย่างจะมารวมกันเป็นอย่างดี แต่การได้รับการแนะนำแบบนี้ฉันคิดว่ามันจะมีประโยชน์มากเมื่อเราเริ่มพูดถึงโค้ด ดังนั้นอีกครั้งเราพูดถึงในส่วนที่สามคำถามที่แตกต่างกันที่เราต้องการถามเกี่ยวกับทุกภาพเคลื่อนไหวที่เรารวบรวม จากนั้นเราก็พูดเพียงเล็กน้อยเกี่ยวกับเครื่องมือต่าง ๆ ภายในโมดูลภาพเคลื่อนไหวที่เราจะใช้เพื่ออธิบายว่าองค์ประกอบของเราเปลี่ยนแปลงบนหน้าจออย่างไร งั้นลองพักกันก่อนแล้วเราจะกลับมาอีกและเราจะเริ่มต้นทำงานกับอนิเมชั่นแรกของเราเพื่อให้เข้าใจถึงส่วนประกอบและวัตถุต่าง ๆ เหล่านี้ทั้งหมดที่อยู่ในโมดูลภาพเคลื่อนไหว เราจะคิดออกว่าพวกเขาทำงานอย่างไร ดังนั้นให้หยุดพักอย่างรวดเร็วและเริ่มเขียนโค้ดในส่วนถัดไป