D3.js - ภาพเคลื่อนไหว

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

Example - ให้เราพิจารณาโค้ดต่อไปนี้ในหน้า“ transition_color.html”

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

ที่นี่สีพื้นหลังของเอกสารเปลี่ยนจากสีขาวเป็นสีเทาอ่อนจากนั้นเป็นสีเทา

ระยะเวลา () วิธีการ

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

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

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

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

ตอนนี้หมายเลขสีแต่ละสีจะช้าลงอย่างราบรื่นและสม่ำเสมอจาก 0 ถึง 150 เพื่อให้ได้การผสมระหว่างเฟรมที่ถูกต้องตั้งแต่ค่าเฟรมเริ่มต้นไปจนถึงค่าเฟรมสุดท้าย D3.js ใช้วิธีการสอดแทรกภายใน ไวยากรณ์ได้รับด้านล่าง -

d3.interpolate(a, b)

D3 ยังรองรับประเภทการแก้ไขต่อไปนี้ -

interpolateNumber - รองรับค่าตัวเลข
interpolateRgb - สนับสนุนสี
interpolateString - สตริงการสนับสนุน

D3.js ดูแลโดยใช้วิธี interpolate ที่เหมาะสมและในกรณีขั้นสูงเราสามารถใช้วิธีการ interpolate โดยตรงเพื่อให้ได้ผลลัพธ์ที่ต้องการ เรายังสามารถสร้างวิธีการแก้ไขใหม่ได้หากจำเป็น

วิธีการหน่วงเวลา ()

วิธีการหน่วงเวลา () ช่วยให้การเปลี่ยนแปลงเกิดขึ้นหลังจากช่วงเวลาหนึ่ง พิจารณารหัสต่อไปนี้ใน“ transition_delay.html”

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

วงจรชีวิตของการเปลี่ยนแปลง

การเปลี่ยนแปลงมีวงจรชีวิตสี่ขั้นตอน -

กำหนดเวลาการเปลี่ยนแปลงแล้ว
การเปลี่ยนแปลงจะเริ่มขึ้น
การเปลี่ยนแปลงดำเนินไป
การเปลี่ยนแปลงสิ้นสุดลง

ให้เราอธิบายทีละข้อโดยละเอียด

กำหนดเวลาการเปลี่ยนแปลง

มีการกำหนดเวลาการเปลี่ยนแปลงเมื่อสร้างขึ้น เมื่อเราโทรselection.transitionเรากำลังจัดกำหนดการการเปลี่ยนแปลง นอกจากนี้ยังเป็นเวลาที่เราโทรattr(), style() และวิธีการเปลี่ยนอื่น ๆ เพื่อกำหนดคีย์เฟรมสิ้นสุด

การเปลี่ยนแปลงเริ่มต้นขึ้น

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

หากการเปลี่ยนแปลงมีความล่าช้าควรตั้งค่าเริ่มต้นเมื่อการเปลี่ยนแปลงเริ่มต้นเท่านั้น เราทำได้โดยฟังเหตุการณ์เริ่มต้น -

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

การเปลี่ยนแปลงทำงาน

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

การเปลี่ยนแปลงสิ้นสุดลง

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