นำเข้า SVG ใน Apple Motion: ตรวจงานภาพก่อนทำแอนิเมชัน

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

มีคำถามสามข้อที่ต้องตอบแยกกัน: งานภาพปรากฏหรือไม่ ความโปร่งใสดูถูกต้องหรือไม่ และควบคุมส่วนที่ต้องเคลื่อนไหวแยกกันได้หรือไม่ ภาพที่ปรากฏบนพื้นที่ทำงานตอบเพียงข้อแรก ไม่ได้ยืนยันว่าพาธ SVG แต่ละพาธกลายเป็นรูปทรงของ Motion เอง

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

เลือกขั้นตอนให้ตรงกับเวอร์ชัน Motion และงาน

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

ตัดสินใจว่าต้องเกิดอะไรหลังนำเข้า:

แถวสุดท้ายสำคัญเป็นพิเศษ เอกสาร SVG ของ Motion ระบุว่า SVG ที่มีแอนิเมชันแสดงเพียงเฟรมแรก การนำเข้าไฟล์ที่มีแอนิเมชันไม่เหมือนการนำเข้าแอนิเมชันของไฟล์นั้น

หากกำลังเลือกระหว่างโปรแกรมแอนิเมชัน คู่มือแปลงโลโก้เป็นพาธใน After Effects และ ขั้นตอนแปลงภาพเป็นพาธใน Adobe Animate อธิบายวัตถุปลายทางของแต่ละโปรแกรม คำสั่งและชนิดวัตถุเหล่านั้นใช้แทนการนำเข้าสื่อของ Motion ไม่ได้

เริ่มจากต้นฉบับที่ตรวจได้

บันทึกตัวอย่างต้นฉบับนี้เป็น orbit-mark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
  <circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
  <circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>

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

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

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

นำเข้าในองค์ประกอบภาพ แล้วตรวจสื่อ

เลือกกลุ่มที่ต้องการให้เครื่องหมายปรากฏ ตาม ขั้นตอนนำเข้าของ Motion ปัจจุบัน เลือก File > Import > Media หรือกด Command-I เลือก SVG แล้วนำเข้า คุณยังลากไฟล์จาก Finder ลงพื้นที่ทำงานหรือกลุ่มในรายการ Layers ได้

หลังนำเข้า มองหาภาพบนพื้นที่ทำงานและเลเยอร์ในกลุ่มที่ต้องการ อย่าตัดสินไฟล์เพียงจากการมีชื่ออยู่ในรายการ Media Apple ยังอธิบายการนำเข้าเฉพาะรายการนั้นโดยไม่เพิ่มสื่อในองค์ประกอบภาพ ในกรณีนั้นภาพจะยังไม่ปรากฏบนพื้นที่ทำงานหรือรายการ Layers

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

หากต้องการตรวจการแทนพื้นหลังของ Motion คลิก Media ในแผง Project และเลือกวัตถุ SVG เปิด Media Inspector หน้า SVG ของ Apple อธิบาย Use Background Color และตัวควบคุมสีที่เกี่ยวข้อง ปิดการแทนนี้ไว้เมื่อต้องเก็บบริเวณโปร่งใสของต้นฉบับ เปิดเฉพาะเมื่อตั้งใจแทนด้วยสี

สี่เหลี่ยมทึบที่วาดอยู่ใน SVG แล้วเป็นอีกปัญหาหนึ่ง การปิดตัวเลือกพื้นหลังสื่อไม่ได้ลบพาธที่เป็นส่วนของงานภาพ คู่มือพื้นหลัง SVG โปร่งใส อธิบายการวินิจฉัยในระดับต้นฉบับนั้น

ทดสอบการควบคุมแต่ละส่วนก่อนเพิ่มคีย์เฟรม

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

สำหรับวงกลมที่ต้องเคลื่อนอิสระ ลองเลือกและเลื่อนเฉพาะส่วนนั้น ยอมรับงานส่งมอบเมื่อวงแหวนอยู่ที่เดิมและเรียกควบคุมวัตถุที่ต้องการได้แยกกันเท่านั้น ชื่อกลุ่ม SVG ช่องว่างที่เห็น หรือภาพย่อเลเยอร์ไม่ใช่หลักฐานเพียงพอในตัวเอง

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

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

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

วินิจฉัยเนื้อหาที่ไม่รองรับด้วยสำเนาที่เรียบง่ายขึ้น

ข้อจำกัด SVG ของ Apple ระบุหลายเหตุผลที่ไฟล์อาจต่างจากโปรแกรมต้นฉบับ ใช้อาการเลือกการตรวจถัดไป

อย่าตีความข้อจำกัดการอ้างอิงภายนอกว่าเป็นหลักฐานว่าทุกคุณสมบัติ SVG ที่มีข้อมูลครบในตัวใช้ได้ ไฟล์ตั้งต้นที่เล็กกว่าช่วยแยกสิ่งที่ต้องพึ่งภายนอก แต่งานภาพสุดท้ายยังต้องตรวจเอง

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

เตรียมเครื่องหมายที่มีแต่แรสเตอร์สำหรับ Motion

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

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

ก่อนส่งโครงการให้ผู้อื่น บันทึกชื่อไฟล์ต้นทาง เวอร์ชัน Motion การเลือกพื้นหลัง และองค์ประกอบที่ต้องแยกไว้ รวมไฟล์หลักที่แก้ไขได้และภาพอ้างอิงแสดงการจัดวางที่ต้องการ ขั้นตอนงานภาพในบล็อก อธิบายการตัดสินใจเตรียมงานก่อนส่งมอบนั้น

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

Apple Motion นำเข้าไฟล์ SVG โดยตรงได้หรือไม่? ได้ เอกสาร Motion 6.3 ของ Apple ระบุการรองรับ SVG ใช้ขั้นตอนนำเข้าของเวอร์ชันที่ติดตั้ง แล้วตรวจงานภาพและตัวควบคุมที่จำเป็น

การนำเข้า SVG เก็บแอนิเมชันไว้หรือไม่? ไม่ Motion แสดงเพียงเฟรมแรกของ SVG แอนิเมชัน หากเฟรมนั้นโปร่งใส งานที่นำเข้าอาจดูว่าง

ทำไม SVG มีพื้นหลังสีใน Motion? ตรวจ Use Background Color ใน Media Inspector และตรวจต้นฉบับหารูปทรงพื้นหลังทึบ การตั้งค่าพื้นหลังสื่อกับสี่เหลี่ยมที่วาดใน SVG เป็นสาเหตุคนละอย่าง

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

แหล่งอ้างอิง

1. Apple — มีอะไรใหม่ใน Motion — การรองรับ SVG ตามเอกสาร Motion 6.3
2. Apple — ทำงานกับไฟล์ SVG ใน Motion — ตัวควบคุมความโปร่งใสและข้อจำกัดคุณสมบัติ SVG
3. Apple — นำเข้าสื่อใน Motion — การนำเข้าสื่อ การวางในกลุ่ม และการนำเข้าเฉพาะรายการ Media
4. Apple — วาดรูปทรงเรียบง่ายใน Motion — ทางเลือกในตัวสำหรับรูปทรงเรียบง่ายที่ควบคุมแยกกัน

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