เริ่มต้นกับแพลตฟอร์มภาพเคลื่อนไหว Greensock

Sep 15, 2025
วิธีการ
GreenSock Animation Platform logo

แพลตฟอร์มแอนิเมชั่น Greensock (GSAP) ช่วยให้คุณสามารถเคลื่อนไหวทุกสิ่งที่คุณสามารถเข้าถึงได้ด้วย JavaScript รวมถึง DOM, Canvas และ CSS รวมถึงวัตถุที่กำหนดเองของคุณเอง

GSAP ยังช่วยแก้ไขความไม่สอดคล้องของเบราว์เซอร์ที่ง่ายขึ้น การทดสอบผู้ใช้ (ดี เว็บโฮสติ้ง สามารถช่วยได้ที่นี่ด้วย) ให้คุณใช้วัตถุเพื่อจัดการภาพเคลื่อนไหวที่ซับซ้อนและทำงานได้เร็วกว่า jQuery มากถึง 20 เท่า มันได้กลายเป็นมาตรฐานในอุตสาหกรรมและถูกนำมาใช้ในเว็บไซต์ที่ได้รับรางวัลนับไม่ถ้วน มีเว็บไซต์เพื่อสร้าง? นี่คือคำแนะนำของเราที่ดีที่สุด สร้างเว็บไซต์ รอบ ๆ

01. ตั้งค่าไฟล์ HTML พื้นฐาน

Get started with GSAP: Set up a basic HTML file

รวมภาพด้วย โลโก้ คลาสในไฟล์ HTML ของคุณ

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

เริ่มต้นใช้งานโดยการตั้งค่าไฟล์ HTML พื้นฐานที่คุณสามารถลดลงในรหัส JavaScript ของคุณ รวมภาพด้วย โลโก้ ชั้นเรียน คุณจะใช้ GSAP เพื่อเคลื่อนไหวคุณสมบัติเพื่อดูว่ามันทำงานอย่างไร 

 & lt; html lang = "en" & gt;
& lt; หัว & gt;
  & lt; สไตล์ & gt;
    . logo {width: 150px; }
  & lt; / style & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; img class = "โลโก้"
SRC = "Logo.svg" / & GT;
& lt; สคริปต์ & gt;
// รหัสที่นี่
& lt; / สคริปต์ & gt;
& lt; / body & gt;
& lt; / html & gt;

02. รวมห้องสมุด GSAP

ถัดไปคุณจะต้องเพิ่ม GSAP ไปยังโครงการเว็บของคุณ ระหว่างของคุณ & lt; image & gt; และ & lt; สคริปต์ & gt; แท็ก, ใส่ลิงค์ไปยังห้องสมุด GSAP คุณสามารถดาวน์โหลด zip โดยตรงจาก ที่นี่ หรือคว้ามันมาจาก github (หากคุณมีไฟล์ที่จะแบ่งปันให้เลือกที่สมบูรณ์แบบ การจัดเก็บเมฆ . ไฟล์ยังโฮสต์บน CDN CloudFlare ที่รวดเร็วมากดังนั้นวิธีที่ง่ายที่สุดคือการใช้ไฟล์ที่โฮสต์เช่นนี้: 

 & lt; สคริปต์ SRC = "https://cdnjscloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt;

03. เคลื่อนไหวด้วย tweening

Tweening เป็นกระบวนการเปลี่ยนค่าเมื่อเวลาผ่านไปเพื่อสร้างภาพเคลื่อนไหว ตัวอย่างเช่นการย้ายวัตถุจาก A ถึง B ปรับขนาดหรือหมุนได้ คุณสามารถทวีค่าที่กำหนดเองของคุณเองได้

วิธีที่ง่ายที่สุดในการเพิ่มคุณสมบัติคือการใช้ tweenmax.to () ฟังก์ชั่น. สิ่งนี้ต้องการวัตถุเป้าหมายระยะเวลาและคู่สมบัติ / ค่าที่คุณเคลื่อนไหว หากต้องการดูฟังก์ชั่นในการดำเนินการลองใช้แต่ละบรรทัดของโค้ดด้านล่างโดยใช้ โลโก้ เป็นวัตถุเป้าหมาย: 

 // Tween X ตำแหน่งจากปัจจุบัน
ถึง 400 มากกว่า 2 วินาที
tweenmax.to ("โลโก้", 2, {x: 400});
// tween y ตำแหน่งจากปัจจุบัน
ถึง 200 และความทึบกับ 0, มากกว่า 1
ครั้งที่สอง
tweenmax.to ("โลโก้", 1, {y: 200, ความทึบ: 0});
// tween x และ y ถึง 100, สเกล
1.5 และหมุน 90 องศามากกว่า 2
ครั้งที่สอง
Tweenmax.to ("โลโก้", 2, {x: 100, y: 100, สเกล: 1.5, การหมุน: 90});

04. ทวีตจากและจาก

Get started with GSAP: Tween from and FromTo

คุณสามารถกำหนดทั้งค่าเริ่มต้นและจุดสิ้นสุดสำหรับ tweening

คุณสามารถเพิ่มคุณสมบัติจากมูลค่าปัจจุบันไปยังเครื่องใหม่โดยใช้ ถึง() แต่คุณสามารถทวีตได้ จาก ค่าเป็นค่าปัจจุบัน ตัวอย่างเช่นถ้าคุณ โลโก้ กำลังเริ่มต้นที่ตำแหน่ง x 0 และคุณต้องการให้มันจบที่นั่นคุณสามารถทำได้: 

 tweenmax.from ("โลโก้", 2, {x: 400});

ในกรณีนี้โลโก้ของคุณจะย้ายทันที x = 400 แล้วทวีต x = 0 . คุณสามารถกำหนดทั้งค่าเริ่มต้นและจุดสิ้นสุดโดยไม่สนใจค่าปัจจุบันโดยใช้ จากการ() แบบนี้: 

 tweenmax.fromto ("โลโก้", 2, {x: 400}, {x: 200});

05. การผ่อนคลาย

Get started with GSAP: Easing

การผ่อนคลายเพิ่มตัวละครในภาพเคลื่อนไหวของคุณ

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

 tweenmax.to ("โลโก้", 2, {x: 100, y: 100, การหมุน: 90, ความสะดวก: circ.easein});

06. ฟังก์ชั่นการผ่อนคลายและการเข้า / ออก

Get started with GSAP: Easing functions and In / Out

มีตัวเลือกการผ่อนคลายมากมายให้เลือกด้วย GSAP

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

 // ผ่อนคลายด้วยการตีกลับ
tweenmax.to ("โลโก้", 2, {x: 100, y: 100, การหมุน: 90, ความสะดวก: bounce.easeout};
// ผ่อนคลายเข้าและออกด้วยความยืดหยุ่น
Tweenmax.to (". โลโก้", 2, {x: 100, y: 100, การหมุน: 90, ความสะดวก: elastic.EaseInout};

07. ล่าช้าทวีต

บางครั้งคุณจะต้องการชะลอการเริ่มต้นของแอนิเมชั่นไม่ว่าจะจะซิงโครไนซ์กับภาพเคลื่อนไหวอื่นหรือเพื่อให้รอเหตุการณ์ที่จะเกิดขึ้น คุณสามารถใช้คุณสมบัติพิเศษของ GSAP อื่นที่เรียกว่า ความล่าช้า เพื่อทำสิ่งนี้. ลองใช้รหัสต่อไปนี้เพื่อดูว่าคุณสามารถหน่วงเวลา tweens สำหรับเวลาที่เฉพาะเจาะจง: 

 Tweenmax.to ("โลโก้", 1, {Y: 100, ความสะดวก: Bounce.Easeout};
// ล่าช้า tween นี้ 1 วินาที
Tweenmax.to (". โลโก้", 1, {การหมุน: 90, ความสะดวก: circ.easeout, ล่าช้า: 1});

08. ฟังก์ชั่นการติดต่อกลับ

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

 tweenmax.to ("โลโก้", 1, {
Y: 100,
ความง่าย: Bounce.Easeout,
oncomplete: tweencomplete
});
ฟังก์ชั่น tweencomplete () {
console.log ("tween complete");
}

09. พารามิเตอร์โทรกลับ

เมื่อยิง Callbacks คุณอาจต้องการส่งข้อมูลพร้อมกับการเรียกกลับไปยังฟังก์ชั่นที่จัดการกับมัน คุณอาจต้องส่งข้อมูลเกี่ยวกับผู้โทรหรือค่าเฉพาะ สิ่งนี้ช่วยให้คุณสามารถรวมภาพเคลื่อนไหวของคุณด้วยฐานรหัสที่เหลือของคุณ พารามิเตอร์ทั้งหมดผ่านผ่าน โทรกลับ + "พารามิเตอร์" , นั่นคือ onupdateparams .

ในตัวอย่างต่อไปนี้คุณสามารถติดตามความคืบหน้าของ tween โดยใช้คำหลัก {ตัวเอง} และสามารถดูวิธีการผ่านพารามิเตอร์หลายรายการโดยใช้อาร์เรย์: 

 tweenmax.to ("โลโก้", 1, {
Y: 100,
ความง่าย: Bounce.Easeout,
onupdate: tweenupdate,
onupdateparams: ["{self}",
"เสร็จสมบูรณ์"]
});
ฟังก์ชั่น tweenupdate (tween,
ข้อความ) {
var ร้อยละ = tween
ความคืบหน้า () * 100; // ความคืบหน้า ()
เป็นค่า 0-1
console.log (เปอร์เซ็นต์ +
"" + ข้อความ);
}

10. การควบคุมแอนิเมชั่น

โอเคดังนั้นตอนนี้คุณสามารถสร้าง tweens และบรรเทา tweens การโทรกลับและพารามิเตอร์ไฟได้อย่างง่ายดาย แต่คุณควบคุมแอนิเมชั่นได้อย่างไร บ่อยครั้งที่คุณต้องการเริ่มหรือหยุดพวกเขาตามเหตุการณ์อื่น ๆ

หากคุณต้องการหยุดเคลื่อนไหวคุณสามารถใช้ หยุด() วิธี. หากคุณต้องการที่จะดำเนินการต่อ Tween ให้ใช้ ดำเนินการต่อ () . เพื่อทำลายการใช้งานทวี ฆ่า() . ลองทำสิ่งต่อไปนี้และดูว่าเกิดอะไรขึ้น: 

 // var เพื่ออ้างอิงถึง tween
var tween = tweenmax.to ("
โลโก้ ", 2, {y: 100, ความสะดวก: ตีกลับ
ง่าย});
// หยุดชั่วคราวทันที
tween.pause ();
// เริ่มกิจกรรม
Settimeout (ฟังก์ชั่น () {tween
เรซูเม่ ()}, 1,000);
// Reverse Animation ในกิจกรรม
Settimeout (ฟังก์ชั่น () {tween
ย้อนกลับ ()}, 3000);

11. CSS และ CSSPlugin

Get started with GSAP: CSS and CSSPlugin

cssplugin ตรวจจับอัตโนมัติเมื่อจำเป็นสำหรับภาพเคลื่อนไหว

cssplugin รวมอยู่เมื่อคุณใช้ tweenmax . มันเป็นตัวช่วยประหยัดเวลาขนาดใหญ่ในรูปแบบปกติของมันในเบราว์เซอร์และตรวจจับอัตโนมัติเมื่อจำเป็นสำหรับภาพเคลื่อนไหว Cssplugin สามารถจัดการกับ Tweens สีแอนิเมชั่น SVG และประสิทธิภาพที่ดีที่สุดด้วยการแคชและเทคนิคภายในอื่น ๆ - และมักจะมีประสิทธิภาพมากขึ้นในการแปลตำแหน่งผ่าน CSS

คุณได้เห็นสิ่งนี้ในการดำเนินการเมื่อคุณใช้ ความทึบ และ ตำแหน่ง ภาพเคลื่อนไหว มันใช้งานได้โดยไม่มีการเข้ารหัสพิเศษใด ๆ !

12. แปลง 2D และ 3D

Get started with GSAP: 2D and 3D transforms

GSAP รวมถึงการแปลงในตัวที่ช่วยให้คุณสามารถปรับขนาดหมุนแปลและเอียง

การแปลง CSS ช่วยให้คุณสามารถปรับขนาดหมุนแปลและเอียง พวกเขาทำงานทั้ง 2D และ 3D เพื่อสร้างเอฟเฟกต์ที่สวยงามอย่างรวดเร็ว GSAP รวมถึงคุณสมบัติการแปลงในตัวเช่น x , Y , การหมุน , การหมุน , การหมุน , skewx และ สเกล . ลองใช้ Tween ต่อไปนี้ในภาพของคุณแทนสิ่งที่เราได้ลองไปแล้ว: 

 tweenmax.to (". โลโก้", 3, {
x: 100,
Y: 100,
ขนาด: 1.5,
การหมุน: 360,
ความง่าย: Bounce.Easeout});

13. ไทม์ไลน์

Get started with GSAP: Timelines

วัตถุไทม์ไลน์ของ GSAP ช่วยให้คุณสามารถจัดการภาพเคลื่อนไหวได้หลายภาพ

เมื่อคุณย้ายเกินหนึ่งหรือสอง tweens คุณอาจสงสัยว่าจะจัดการเคลื่อนไหวหลายภาพเคลื่อนไหวได้อย่างไร GSAP มี เส้นเวลา วัตถุที่จะทำอย่างนั้น คุณต่อท้าย tweens ไปที่ เส้นเวลา วัตถุและสามารถใช้ ตำแหน่ง พารามิเตอร์หลังจาก tween ถึงเวลา คุณสามารถใช้ tweens วิ่งหนึ่งหลังหรือมีช่องว่างหรือแม้กระทั่งทับซ้อนกัน เพิ่มรูปภาพเพิ่มเติมให้กับ HTML ของคุณด้วยคลาส logo2 และ logo3 ตามลำดับ

หากต้องการดูว่ามันทำงานอย่างไรลองทำสิ่งต่อไปนี้ เส้นเวลา รหัส: 

 // สร้างอินสแตนซ์ไทม์ไลน์
var tl = timelinemax ใหม่ ();
tl.add (tweenmax.to ("โลโก้", 1,
{x: 50}));
// หมายเหตุ "0" สุดท้ายที่จะทำ
อันนี้เริ่มต้นที่ 0 วินาที
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// หมายเหตุ "+.25" เพื่อทำสิ่งนี้
หนึ่งเริ่มต้นที่. 25 วินาที
tl.add (tweenmax.to (". logo3", 1,
{rotationy: 180, y: 50,
x: 50}), "+ 25");

14. การควบคุมไทม์ไลน์

เช่นเดียวกับการควบคุมแอนิเมชั่นคุณอาจต้องการควบคุมไทม์ไลน์เช่นกัน โชคดีที่คุณสามารถหยุดทำงานต่อไปเรซูเม่และย้อนกลับได้เหมือนกับที่คุณสามารถทำได้ด้วยภาพเคลื่อนไหว คุณสามารถเพิ่มพารามิเตอร์ไปยังไทม์ไลน์เพื่อ ทำซ้ำ , yoyo และเพิ่มการเรียกกลับสำหรับไทม์ไลน์ทั้งหมด คุณสามารถควบคุมความเร็วของไทม์ไลน์โดยใช้ timescale คุณสมบัติ. ลองเปลี่ยนการประกาศไทม์ไลน์ของคุณด้วยรหัสต่อไปนี้เพื่อดูว่ามันทำงานอย่างไร: 

 var tl = timelinemax ใหม่ ({
// ทำซ้ำอย่างไม่ จำกัด
ทำซ้ำ: -1,
Yoyo: TRUE,});

15. รับและตั้งค่าคุณสมบัติ

คุณสมบัติหนึ่งที่มีประโยชน์จริงๆคือการได้รับและการตั้งค่าคุณสมบัติของ tweens and timelines ด้วยวิธีนี้คุณสามารถทำความรู้จักกับความคืบหน้าและระยะเวลาโดยรวมหรือรวบรวมข้อมูลอื่น ๆ เกี่ยวกับวัตถุ GSAP ในรหัสนี้ตัวอย่างนี้คุณสามารถ รับ ระยะเวลาของไทม์ไลน์แล้ว ตั้ง ระยะเวลาที่จะเปลี่ยนมัน ใช้งานได้เหมือนกันสำหรับ tweens เช่นกัน เป็นอีกวิธีที่ยอดเยี่ยมในการตอบสนองในเวลาจริงในการแข่งขันและแก้ไขภาพเคลื่อนไหวในการบิน เพิ่มต่อไปนี้หลังจากรหัสไทม์ไลน์ก่อนหน้าของคุณ: 

 // รับระยะเวลาปัจจุบันของ
ไทม์ไลน์
console.log (tl.duration ());
// ตั้งค่าระยะเวลาเป็น 5 วินาที
หลังจากรอ 2 วินาที
Settimeout (ฟังก์ชั่น () {
tl.duration (5);
}, 2000);

บทความนี้ได้รับการตีพิมพ์ในงานสร้างสรรค์ในนิตยสาร Web Design Creative Web Design ซื้อปัญหา 279 หรือ ติดตาม .

อ่านเพิ่มเติม:

  • Super Charge SVG แอนิเมชั่นกับ GSAP
  • ส่งออก After Effects Animations ไปยัง HTML5
  • วิธีสร้างภาพเคลื่อนไหวขนาดนั้นสำหรับอุปกรณ์ทั้งหมด

วิธีการ - บทความยอดนิยม

วาดพลังของความคมชัดในศิลปะ

วิธีการ Sep 15, 2025

การเรียนรู้ที่จะใช้ความคมชัดในงานศิลปะจะเปลี่ยนโครงการของคุณและ�..

วิธีการวาดแมว

วิธีการ Sep 15, 2025

ต้องการทราบวิธีการวาดแมว? คุณมาถูกที่แล้ว การ..

วิธีการสร้างแอป AR

วิธีการ Sep 15, 2025

หน้า 1 จาก 3: สร้างแอป AR: ขั้นตอนที่ 01-10 ..

วิธีการทาสีเหมือนต้นแบบศตวรรษที่ 19

วิธีการ Sep 15, 2025

ศตวรรษที่ 19 เป็นช่วงเวลาที่ยอดเยี่ยมสำหรับงา�..

19 เคล็ดลับสำหรับศิลปะที่กล้าหาญที่ยอดเยี่ยม

วิธีการ Sep 15, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

วิธีการปั้น Goblin ที่พิมพ์ 3 มิติ

วิธีการ Sep 15, 2025

แนวคิดสำหรับโครงการนี้เห็ด Goblin มาจากการวาดภาพ�..

ฝึกฝนทักษะการวาดภาพชีวิตของคุณอย่างชาญฉลาด

วิธีการ Sep 15, 2025

ไม่มีอะไรที่ฉันรักดีกว่าการเป็นภาพวาดกลางแจ้งโลกรอบตัวฉัน แต่มัน�..

วิธีการสร้างนางฟ้าราชินีที่สดใส

วิธีการ Sep 15, 2025

ถูกขอให้ทาสีราชินีนางฟ้าที่ไม่ดีโดยไม่มีใคร..

หมวดหมู่