ใช้เอฟเฟกต์ภาพเคลื่อนไหว JavaScript ในแอปพลิเคชัน AngularJS
AngularJS เป็นชุดเฟรมเวิร์กที่หลากหลายสำหรับการสร้างเว็บแอปพลิเคชันหน้าเดียวนำฟังก์ชั่นที่จำเป็นทั้งหมดเพื่อสร้างแอปพลิเคชันที่หลากหลายและโต้ตอบ หนึ่งในคุณสมบัติหลักคือ Angular นำการสนับสนุนสำหรับภาพเคลื่อนไหว
เราสามารถใช้ภาพเคลื่อนไหวในเนื้อหาบางส่วนของแอปพลิเคชันเพื่อแสดงว่าการเปลี่ยนแปลงบางอย่างเกิดขึ้น ในบทความสุดท้ายของฉันฉันได้พูดคุยเกี่ยวกับการสนับสนุนแอนิเมชั่น CSS ในแอปพลิเคชันเชิงมุม ในบทความนี้เราจะเห็นวิธีการใช้สคริปต์ JavaScript เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวในแอปพลิเคชัน AngularJS
ในเชิงมุมความแตกต่างเพียงอย่างเดียวระหว่าง CSS และ JavaScript คือคำจำกัดความของพวกเขา ไม่มีความแตกต่างที่ป้องกันไม่ให้แอนิเมชั่นที่กำหนดไว้ ก่อนอื่นเราต้องโหลดโมดูล nganimate ลงในโมดูลรูทของแอปพลิเคชันของเรา
Angular.module ('Coursesapp', ['nganimate']);
เหตุการณ์แอนิเมชั่น JavaScript ทั้งหมดที่จะประมวลผลยังคงไม่เปลี่ยนแปลง นี่คือรายการของภาพเคลื่อนไหวที่รองรับโดยตรงและพฤติกรรมที่แตกต่างกันที่สอดคล้องกัน:
ชุดเหตุการณ์คำแนะนำ
ng-view
รวมถึง
การสวิตช์
ng-if Enter
ออกจาก
NG-repeat Enter
ออกจาก
เคลื่อนไหว
ng-show
ng-hide
เพิ่ม NG-Class
ลบ
รายการด้านบนเหมือนกับในบทความก่อนหน้า แต่ไม่ได้กล่าวถึงคลาส CSS ที่เกี่ยวข้องเพราะเราไม่จำเป็นต้องใช้พวกเขาเพื่อกำหนดภาพเคลื่อนไหว JavaScript เหตุการณ์ทั้งหมดเหล่านี้จะเกิดขึ้นหลังจากโมดูลแอปพลิเคชันได้โหลดโมดูล nganimate ตอนนี้เรามาดูวิธีที่จะทำให้คำแนะนำเหล่านี้ย้าย
ไวยากรณ์สำหรับภาพเคลื่อนไหวเชิงมุมแบบกำหนดเอง
นี่คือกรอบพื้นฐานสำหรับภาพเคลื่อนไหว JavaScript ที่กำหนดเอง:
Angular.Module ('CoursesApp') ภาพเคลื่อนไหว ('. name-of-animation', ฟังก์ชั่น (<projectables>) {return {เหตุการณ์: ฟังก์ชั่น (elem, เสร็จสิ้น) {// ตรรกะของภาพเคลื่อนไหวที่ทำ ();}};});นี่คือประเด็นสำคัญบางประการที่ต้องจดจำเมื่อเขียนแอนิเมชั่น JavaScript ใน AngularJS:
1. ชื่อของภาพเคลื่อนไหวเริ่มต้นด้วยจุด (.)
2. พฤติกรรมการเคลื่อนไหวทั้งหมดยอมรับสองพารามิเตอร์:
•วัตถุในองค์ประกอบ DOM ที่กำลังจะเรียกใช้ภาพเคลื่อนไหวเป็นวัตถุ JQLite ที่โหลดก่อนที่ AngularJS จะถูกโหลดหรือวัตถุ jQuery
•ฟังก์ชั่นการโทรกลับในตอนท้ายของภาพเคลื่อนไหว การกระทำที่สอดคล้องกับคำสั่งจะถูกหยุดชั่วคราวจนกว่าจะมีการเรียกฟังก์ชั่นการโทรกลับ
เรามีไลบรารี JavaScript หลายแห่งเช่น JQuery, Greensock, Anima และห้องสมุดอื่น ๆ อีกมากมายที่ทำให้ง่ายต่อการเขียนภาพเคลื่อนไหว เพื่อให้มันง่ายฉันใช้ jQuery เพื่อสร้างภาพเคลื่อนไหวในโพสต์นี้ หากต้องการเรียนรู้ห้องสมุดอื่น ๆ อีกหลายแห่งคุณสามารถเยี่ยมชมเว็บไซต์ที่เกี่ยวข้อง
ปล่อยให้มุมมอง ng
แอนิเมชั่นที่ใช้กับ NG-View Directive จะทำงานเมื่อเปลี่ยนมุมมองของแอปพลิเคชัน AngularJS
นี่คือเอฟเฟกต์ภาพที่เกิดจากภาพเคลื่อนไหวเมื่อมีมุมมองปรากฏขึ้น:
courseappanimations.animation ('. view-slide-in', function () {return {enter: function (องค์ประกอบ, ทำ) {element.css ({ความทึบ: 0.5, ตำแหน่ง: "ญาติ", ด้านบน: "10px", ซ้าย: "20px"})ข้างต้นสร้างเอฟเฟกต์สไลด์อินเมื่อมุมมองเข้าสู่หน้าจอ วิธีการทำจะถูกส่งผ่านเป็นฟังก์ชันการโทรกลับ นี่คือการแสดงให้เห็นว่าแอนิเมชั่นสิ้นสุดลงและตอนนี้กรอบ AngularJS สามารถดำเนินการต่อไปด้วยการกระทำครั้งต่อไป
หมายเหตุวิธีการที่มีการเรียกวิธีการเคลื่อนไหว () เราไม่จำเป็นต้องแปลงองค์ประกอบนี้เป็นวัตถุ jQuery เนื่องจาก jQuery ถูกโหลดไปแล้วก่อนที่จะโหลด AngularJs
ตอนนี้เราต้องใช้เอฟเฟกต์ภาพเคลื่อนไหวนี้กับ NG-View Directive แม้ว่าภาพเคลื่อนไหวนี้จะถูกกำหนดไว้ใน JavaScript แต่เราใช้แท็กคลาสเพื่อนำไปใช้กับคำสั่งเป้าหมายตามที่ตกลงกันไว้
อนิเมชั่น NG-Repeat
ท่ามกลางคำแนะนำที่คุณสามารถเลือกใช้ NG-Repeat เป็นคำสั่งที่สำคัญมาก มีคำแนะนำการใช้งานพื้นฐานอื่น ๆ อีกสองข้อ: การกรองและการเรียงลำดับ เพิ่มย้ายหรือลบคำแนะนำที่เกี่ยวข้องตามการกระทำที่ดำเนินการ
ต่อไปนี้แสดงให้เห็นถึงการใช้ภาพเคลื่อนไหวพื้นฐานบางอย่างและเมื่อมีการเปลี่ยนแปลงเกิดขึ้นคุณสามารถเห็นเอฟเฟกต์ภาพเคลื่อนไหวที่สอดคล้องกัน
courseappanimations.animation ('. repeat -animation', function () {return {enter: function (องค์ประกอบ, ทำ) {console.log ("เข้าสู่ ... "); var width = element.width (); element.css ({ตำแหน่ง: เสร็จสิ้น) {element.css (ตำแหน่ง: 'ญาติ', ซ้าย: 0, opacity: 1}); -อนิเมชั่น ng-hide
คำสั่ง ng-hide ใช้เพื่อเพิ่มหรือลบคลาสสไตล์ NG-hide ขององค์ประกอบเป้าหมาย ในการใช้แอนิเมชั่นเรามักจะต้องเพิ่มหรือลบสไตล์ CSS ส่งผ่านชื่อคลาสไปยังคลาสการประมวลผลภาพเคลื่อนไหวเพื่อให้ได้เอฟเฟกต์นี้ สิ่งนี้ช่วยให้เราสามารถตรวจสอบคลาสนี้และทำการปรับเปลี่ยนรหัสที่เหมาะสม
ต่อไปนี้เป็นรหัสตัวอย่างแอนิเมชั่นโดยใช้คำสั่ง NG-hide เพื่อให้ได้เอฟเฟกต์การแสดงผลที่ซีดจางและค่อยเป็นค่อยไปขององค์ประกอบ:
courseappanimations.animation ('. hide-animation', function () {return {beforeaddclass: ฟังก์ชั่น (องค์ประกอบ, classname, เสร็จสิ้น) {ถ้า (classname === 'ng-hide') {element.animate ({upacity: 0}, 500, เสร็จสิ้น); (classname === 'ng-hide') {element.css ('opacity', 0);ให้คำสั่งที่กำหนดเองย้าย
เพื่อให้คำสั่งที่กำหนดเองมีการเคลื่อนไหวเราจำเป็นต้องใช้บริการ $ animate แม้ว่าบริการ $ animate เป็นส่วนหนึ่งของกรอบ Core AngularJS แต่จำเป็นต้องโหลด Nganimate ก่อนที่บริการนี้จะมีบทบาทที่ยิ่งใหญ่ที่สุด
การใช้ตัวอย่างเดียวกันจากบทความก่อนหน้านี้เราจะนำเสนอรายการหลักสูตรหนึ่งหน้า เราสร้างคำสั่งเพื่อแสดงรายละเอียดของหลักสูตรในกริดและเนื้อหาในกริดจะเปลี่ยนเมื่อคลิกลิงก์ "ดูสถิติ" มาเพิ่มภาพเคลื่อนไหวเพื่อนำเสนอเอฟเฟกต์การแปลงนี้ให้กับผู้ใช้
เมื่อภาพเคลื่อนไหวการแปลงเริ่มต้นเราจะเพิ่มแท็กคลาส CSS และในตอนท้ายให้ลบแท็กคลาสนี้ นี่คือรหัสตัวอย่างสำหรับคำสั่งนี้:
app.directive ('coursedetails', ฟังก์ชั่น ($ animate) {return {scope: true, templateurl: 'coursedetails.html', ลิงก์: ฟังก์ชั่น (ขอบเขต, elem, attrs) {scope.viewdetails = true; elem.find {Elem.removeclass ("การสลับ");อย่างที่คุณเห็นเราดำเนินการนี้ในตอนท้ายของภาพเคลื่อนไหว ในเครื่องมือนักพัฒนาของเบราว์เซอร์เมื่อเราดูองค์ประกอบคำสั่งเราจะพบว่าแท็กคลาสสองคลาสการสลับและเพิ่มการเพิ่มกำลังเพิ่มอย่างรวดเร็วแล้วลบออก เราสามารถดูเอฟเฟกต์ของภาพเคลื่อนไหวได้โดยการกำหนดรูปแบบการแปลง CSS หรือภาพเคลื่อนไหว JavaScript ที่กำหนดเอง นี่คือรูปแบบการแปลง CSS ง่าย ๆ ที่สามารถใช้สำหรับคำแนะนำที่กล่าวถึงข้างต้น เพื่อความเรียบง่ายเราได้ลบคำนำหน้าเฉพาะ:
.DET-ANAM.Switching {การเปลี่ยนแปลง: 1S ทั้งหมดเชิงเส้น; ตำแหน่ง: ญาติ; ความทึบ: 0.5; ซ้าย: -20px;}หรือนี่คือภาพเคลื่อนไหวที่เขียนโดย jQuery ที่สามารถใช้สำหรับคำแนะนำเดียวกัน:
courseappanimations.animation ('. js-anim', function () {return {beforeaddclass: ฟังก์ชั่น (องค์ประกอบ, classname, เสร็จสิ้น) {ถ้า (classname === 'switching') {element.animate ({opacity: 0}, 1000, function () -ในภาพเคลื่อนไหวเหล่านี้หากสามารถนำไปใช้กับคำแนะนำในตัวก็สามารถนำไปใช้กับคำแนะนำที่กำหนดเองได้:
<Div Course-Details>/div>
คุณสามารถดูเอฟเฟกต์ของภาพเคลื่อนไหวทั้งหมดข้างต้นที่ทำงานบนหน้าตัวอย่าง
สรุปแล้ว
แอนิเมชั่นเมื่อเหมาะสมและใช้งานอย่างเหมาะสมจะนำความโกรธมาสู่แอปพลิเคชัน ดังที่เราได้เห็น AngularJS ให้การสนับสนุนที่หลากหลายสำหรับทั้ง CSS และ JavaScript Animations คุณสามารถเลือกหนึ่งในนั้นตามสถานการณ์ของทีม
อย่างไรก็ตามการใช้แอนิเมชั่นมากเกินไปจะทำให้แอปพลิเคชันช้าลงซึ่งจะทำให้แอปพลิเคชันดูไม่เป็นมิตรสำหรับผู้ใช้ ดังนั้นคุณต้องระมัดระวังและปรับให้เหมาะสมในการใช้อาวุธนี้