03กายวิภาคของ composition

บทนี้จะพาอ่าน composition ออกทั้งไฟล์ แล้วเริ่มสร้างการ์ดนัดประชุมทีมที่เห็นในบทที่ 1 องค์ประกอบมีน้อยกว่าที่คิด: กล่องหลักหนึ่งใบ กับลูก ๆ ที่ประกาศเวลาของตัวเอง

3.1 root — กล่องที่นิยามทั้งเรื่อง

ทุก composition มี element รากหนึ่งตัวใน body ที่ถือข้อมูลนิยามของวิดีโอทั้งหมด:

<div
  id="root"
  data-composition-id="main"
  data-start="0"
  data-duration="10"
  data-width="1920"
  data-height="1080"
></div>

• data-composition-id — ชื่อประจำตัว ใช้เป็นกุญแจตามหา timeline (บทที่ 5)
• data-duration — ความยาววิดีโอเป็นวินาที ตัวนี้คือคำตอบของคำถาม "เรนเดอร์กี่เฟรม" ไม่ใช่ความยาวของ animation
• data-width / data-height — ขนาดเฟรมเป็นพิกเซล และ root ต้องมี CSS กำหนดขนาดจริงตามนี้ด้วย

กติกาข้อสุดท้ายสำคัญกว่าที่เห็น: ถ้า root ไม่ถูกกำหนดขนาดเป็นพิกเซลจริง ลูกที่ใช้ height: 100% จะยุบเหลือศูนย์แล้วเนื้อหาทั้งหมดไปกองที่มุมซ้ายบน — เป็นบั๊กเงียบที่เครื่องตรวจอัตโนมัติไม่ฟ้อง ต้องดู snapshot ด้วยตาเท่านั้นถึงเห็น

3.2 clip — ลูกที่ประกาศเวลาของตัวเอง

เนื้อหาทุกก้อนบนจอคือ clip: element ที่ประกาศ "ฉันอยู่บนจอช่วงไหน" ด้วย attribute สามตัว นี่คือ clip จริงจากการ์ดนัดประชุม:

<div id="headline" class="clip" data-start="0.5" data-duration="9.5" data-track-index="2">
  <div class="column">
    <div id="team-chip">ทีมการตลาด</div>
    <div id="headline-text">ประชุมทีมรายสัปดาห์</div>
  </div>
</div>

data-start = โผล่วินาทีไหน · data-duration = อยู่นานเท่าไหร่ · data-track-index = อยู่รางไหน (บทที่ 4) ส่วน class="clip" เป็นธรรมเนียมให้เครื่องมือหาเจอ การซ่อน-โชว์ clip ตามเวลาเป็นหน้าที่ของ framework ล้วน ๆ — โค้ดคุณห้ามไปยุ่งกับ visibility ของมัน

3.3 กติกาที่เครื่องไม่ตรวจให้

ระหว่างเขียนเล่มนี้ ผมทดลองถอด data-start ออกจาก root แล้วรันทั้ง lint และ check — ผ่านเงียบทั้งคู่ (v0.8.8) ทั้งที่ contract ระบุว่าต้องมี บทเรียนอยู่ตรงนี้: เครื่องตรวจของ HyperFrames เก่งมากในเรื่องที่มันเห็น แต่กติกาบางข้อยังไม่มีใครตรวจแทนคุณ เขียนให้ครบตาม contract ตั้งแต่แรก อย่ารอให้เครื่องเตือน