jQuery Academy · บทเรียน

การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง

การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

ก้าวข้ามความเร็วแอนิเมชันพื้นฐาน

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

jQuery มีตัวเลือกการปรับความเร็วในตัวสองแบบ ได้แก่ 'linear' (ความเร็วคงที่) และ 'swing' (เริ่มช้า ช่วงกลางเร็ว และจบช้า) แต่ถ้าต้องการมากกว่านั้นจะทำอย่างไร

สำรวจการปรับความเร็วเริ่มต้น

มาดูความแตกต่างระหว่างตัวเลือกการปรับความเร็วเริ่มต้นของ jQuery กัน

'linear': แอนิเมชันเคลื่อนที่ด้วยความเร็วคงที่ตั้งแต่เริ่มจนจบ
'swing': นี่คือตัวเลือกเริ่มต้น โดยจะเริ่มช้า เร็วขึ้นในช่วงกลาง และช้าลงอีกครั้งเมื่อจบ

ทั้งสองแบบใช้งานง่าย แต่บ่อยครั้งคุณอาจต้องการควบคุมความรู้สึกของแอนิเมชันได้มากกว่านี้

การปรับความเร็วแบบกำหนดเองด้วย jQuery UI

หากต้องการเอฟเฟกต์การปรับความเร็วที่ซับซ้อนยิ่งขึ้น เรามักใช้ส่วนเสริม ตัวเลือกยอดนิยมคือส่วนประกอบ การปรับความเร็วของ jQuery UI

ส่วนนี้จะเพิ่มฟังก์ชันใหม่จำนวนมากให้กับออบเจ็กต์ $.easing ของ jQuery เช่น 'easeOutBounce', 'easeInOutQuad' และอื่น ๆ ทำให้คุณมีคลังเส้นโค้งการเคลื่อนไหวที่กำหนดไว้ล่วงหน้าจำนวนมาก

โดยทั่วไป หากต้องการใช้งาน คุณต้องรวมไลบรารี jQuery UI ไว้ในโปรเจกต์ของคุณ

ตัวอย่างโค้ด: การเด้งด้วย EaseOutBounce

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

(หมายเหตุ: ตัวอย่างนี้สมมติว่าได้รวมแกนหลักและเอฟเฟกต์ของ jQuery UI ไว้แล้ว)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

ทำความเข้าใจการเรียกกลับของแอนิเมชัน

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

เมธอด .animate() ของ jQuery รองรับฟังก์ชันเรียกกลับ โดยฟังก์ชันที่ใช้กันมากที่สุดคือการเรียกกลับ complete

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

ตัวอย่างโค้ด: การเรียกกลับ `complete`

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

วิธีนี้ช่วยให้การแสดงผลสอดคล้องกันและการทำงานถัดไปเกิดขึ้นในจังหวะที่เหมาะสม

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

การเรียกกลับ `step`

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

การเรียกกลับ step จะทำงานกับคุณสมบัติแต่ละรายการที่กำลังทำแอนิเมชันในทุกขั้นของแอนิเมชัน และจะถูกเรียกอย่างต่อเนื่องขณะที่แอนิเมชันกำลังทำงาน

การเรียกกลับนี้รับอาร์กิวเมนต์ เช่น now (ค่าปัจจุบันของคุณสมบัติ), fx (ออบเจกต์ที่มีรายละเอียดของแอนิเมชัน) และ tween (สำหรับการควบคุมขั้นสูงยิ่งขึ้น)

ตัวอย่างโค้ด: การเรียกกลับ `step`

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

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

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

การใช้การเรียกกลับหลายรายการ

คุณสามารถใช้การเรียกกลับทั้ง step และ complete ในแอนิเมชันเดียวกันได้

เมธอด animate() รับออบเจกต์ตัวเลือกเป็นอาร์กิวเมนต์ที่สอง ซึ่งคุณสามารถกำหนดทั้ง duration, easing และฟังก์ชันเรียกกลับได้

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

ตรวจสอบการเรียกกลับ

การเรียกกลับของ jQuery animate() รายการใดเหมาะที่สุดสำหรับการอัปเดตแถบความคืบหน้าอย่างต่อเนื่องขณะที่แอนิเมชันกำลังทำงาน

สรุปการปรับความเร็วและการเรียกกลับ

ทำได้ดีมาก คุณได้เรียนรู้วิธียกระดับแอนิเมชันของ jQuery แล้ว

การปรับความเร็วแบบกำหนดเอง: ใช้ส่วนเสริมอย่าง jQuery UI เพื่อใช้เส้นโค้งความเร็วที่มีไดนามิกมากกว่าแค่ 'linear' หรือ 'swing'
การเรียกกลับ complete: เรียกใช้โค้ดอย่างแม่นยำเมื่อแอนิเมชันเสร็จสิ้น
การเรียกกลับ step: รับข้อมูลอัปเดตแบบเรียลไทม์และดำเนินการซ้ำตลอดความคืบหน้าของแอนิเมชัน

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

คำถามที่พบบ่อย

บทเรียน “การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง”

นำฟังก์ชันปรับความนุ่มนวลแบบกำหนดเองมาใช้เพื่อควบคุมความเร็วและการดำเนินไปของภาพเคลื่อนไหว พร้อมใช้ฟังก์ชันเรียกกลับเพื่อเรียกใช้โค้ดอย่างแม่นยำเมื่อภาพเคลื่อนไหวเสร็จสิ้นหรือดำเนินไปแต่ละขั้น คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

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

← กลับไปที่ jQuery Academy