ในโพสต์นี้คุณจะสร้างภาพเคลื่อนไหวยอดนิยมบางส่วนใน CodePen ได้อย่างไร ภาพเคลื่อนไหวเหล่านี้ใช้เทคนิคการแสดงทั้งหมดที่กล่าวถึงในบทความอื่นๆ ในส่วนนี้
ดูทำไมภาพเคลื่อนไหวบางภาพจึงทำงานช้า เพื่อเรียนรู้ทฤษฎีเบื้องหลังคำแนะนำเหล่านี้ และคู่มือภาพเคลื่อนไหวเพื่อดูเคล็ดลับที่นำไปใช้ได้จริง
วิซาร์ดกำลังโหลดภาพเคลื่อนไหว
ดูภาพเคลื่อนไหวในการโหลดวิซาร์ดบน CodePen
ภาพเคลื่อนไหวการโหลดนี้สร้างขึ้นด้วย CSS ทั้งหมด รูปภาพรวมถึงภาพเคลื่อนไหวทั้งหมดสร้างขึ้นใน CSS และ HTML และไม่มีรูปภาพหรือ JavaScript คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำความเข้าใจถึงวิธีการสร้างและประสิทธิภาพการทำงาน
ตรวจสอบภาพเคลื่อนไหวโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ขณะที่ภาพเคลื่อนไหวทำงาน ให้เปิดแท็บประสิทธิภาพใน Chrome DevTools แล้วบันทึกภาพเคลื่อนไหว 2-3 วินาที คุณควรจะเห็นในสรุปว่าเบราว์เซอร์ไม่มีการดำเนินการ Layout หรือ Paint เมื่อเรียกใช้ภาพเคลื่อนไหวนี้
หากต้องการดูว่าภาพเคลื่อนไหวนี้เกิดขึ้นได้อย่างไรโดยไม่ทำให้เกิดการจัดวางและเพนท์ ให้ตรวจสอบองค์ประกอบที่เคลื่อนไหวในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณใช้แผงภาพเคลื่อนไหวเพื่อค้นหาองค์ประกอบที่เคลื่อนไหวต่างๆ ได้ การคลิกที่องค์ประกอบใดก็ได้จะเป็นการไฮไลต์องค์ประกอบนั้นใน DOM
เช่น เลือกรูปสามเหลี่ยม แล้วดูว่ากล่องขององค์ประกอบเปลี่ยนแปลงอย่างไรระหว่างที่ลอยอยู่ในอากาศ ขณะที่หมุนกลับไปที่ตำแหน่งเริ่มต้น
ขณะที่ยังเลือกองค์ประกอบอยู่ ดูที่แผงรูปแบบ จากจุดนี้คุณจะเห็น CSS ที่วาดรูปร่างของสามเหลี่ยม และภาพเคลื่อนไหวที่ใช้
วิธีการทำงาน
รูปสามเหลี่ยมสร้างขึ้นโดยใช้องค์ประกอบจำลอง ::after เพื่อเพิ่มเนื้อหาที่สร้างขึ้น โดยใช้เส้นขอบในการสร้างรูปร่าง
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
ภาพเคลื่อนไหวจะถูกเพิ่มโดยบรรทัด CSS ต่อไปนี้
animation: path_triangle 10s ease-in-out infinite;
เมื่ออยู่ใน Chrome DevTools คุณจะดูคีย์เฟรมได้ด้วยการเลื่อนลงที่แผงรูปแบบ
คุณจะเห็นว่าภาพเคลื่อนไหวนี้สร้างขึ้นโดยใช้ transform เพื่อเปลี่ยนตำแหน่งองค์ประกอบและหมุนองค์ประกอบ
พร็อพเพอร์ตี้ transform เป็นหนึ่งในพร็อพเพอร์ตี้ที่อธิบายไว้ในคู่มือภาพเคลื่อนไหว ซึ่งไม่ทำให้เบราว์เซอร์ทำเลย์เอาต์หรือระบายสี (ซึ่งเป็นสาเหตุหลักของภาพเคลื่อนไหวที่ช้า)
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
ส่วนที่มีการเคลื่อนไหวที่แตกต่างกันของภาพเคลื่อนไหวนี้ใช้เทคนิคที่คล้ายกัน ผลลัพธ์ที่ได้คือภาพเคลื่อนไหวที่ซับซ้อนซึ่งทำงานอย่างราบรื่น
วงกลมกะพริบ
บางครั้งภาพเคลื่อนไหวประเภทนี้ก็ใช้เพื่อดึงดูดความสนใจไปที่บางสิ่งบางอย่างในหน้าเว็บ คุณใช้ Firefox DevTools เพื่อทำความเข้าใจภาพเคลื่อนไหวได้
ตรวจสอบภาพเคลื่อนไหวด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox
ขณะที่ภาพเคลื่อนไหวทำงานอยู่ ให้เปิดแท็บ "ประสิทธิภาพ" ในเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox และบันทึกภาพเคลื่อนไหว 2-3 วินาที หยุดการบันทึก ใน Waterfall คุณควรจะเห็นว่าไม่มีรายการสำหรับ คำนวณรูปแบบใหม่ ตอนนี้คุณก็ทราบแล้วว่าภาพเคลื่อนไหวนี้จะไม่ทำให้มีการคำนวณรูปแบบใหม่ ดังนั้นจึงหมายถึงการดำเนินการเกี่ยวกับเลย์เอาต์และการลงสี
เมื่ออยู่ใน Firefox DevTools ให้ตรวจสอบวงกลมเพื่อดูว่าภาพเคลื่อนไหวนี้ทำงานอย่างไร
<div> ที่มีคลาสเป็น pulsating-circle จะทำเครื่องหมายตำแหน่งของวงกลม แต่จะไม่มีการวาดวงกลม
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
ระบบจะสร้างวงกลมและภาพเคลื่อนไหวที่มองเห็นได้โดยใช้องค์ประกอบจำลอง ::before และ ::after
องค์ประกอบ ::before สร้างวงแหวนทึบแสงที่ยื่นออกไปนอกวงกลมสีขาวโดยใช้ภาพเคลื่อนไหวชื่อ pulse-ring ซึ่งจะเคลื่อนไหว transform: scale และ opacity
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
อีกวิธีหนึ่งในการดูว่าพร็อพเพอร์ตี้ใดกำลังเคลื่อนไหวคือการเลือกแผงภาพเคลื่อนไหวในเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox จากนั้นคุณจะเห็นภาพเคลื่อนไหวที่ใช้ และคุณสมบัติที่สร้างเป็นภาพเคลื่อนไหว
วงกลมสีขาวสร้างขึ้นและทำให้เคลื่อนไหวโดยใช้องค์ประกอบเทียม ::after
ภาพเคลื่อนไหว pulse-dot ใช้ transform: scale เพื่อขยายและย่อจุดระหว่างภาพเคลื่อนไหว
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
ภาพเคลื่อนไหวแบบนี้สามารถนำไปใช้กับหลายๆ ที่ในแอปพลิเคชันของคุณ สิ่งสำคัญคือการแตะเล็กๆ น้อยๆ เหล่านี้ไม่ส่งผลต่อประสิทธิภาพโดยรวมของแอป
ภาพ 3 มิติแบบ 3 มิติของ CSS แบบบริสุทธิ์
ดู 3 มิติแบบ 3 มิติบริสุทธิ์ของ CSS ใน CodePen
ภาพเคลื่อนไหวนี้ดูซับซ้อนมาก แต่ก็ใช้เทคนิคที่เราเห็นในตัวอย่างก่อนหน้านี้แล้ว ความซับซ้อนนี้มาจากการทำให้องค์ประกอบจำนวนมากเคลื่อนไหว
เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และเลือกองค์ประกอบที่มีคลาสเป็น plane
ทรงกลมประกอบด้วยระนาบและซี่ที่กำลังหมุน
ระนาบและซี่ล้อเหล่านี้อยู่ภายใน Wrapper <div>
และองค์ประกอบนี้ที่หมุนโดยใช้ transform: rotate3d
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
จุดจะฝังอยู่ในองค์ประกอบ plane และ spoke ได้
โดยจะใช้ภาพเคลื่อนไหวที่ใช้ Transform ในการปรับขนาดและแปล
ซึ่งจะสร้างเอฟเฟ็กต์ที่กะพริบ
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
งานที่เกี่ยวข้องกับการสร้างภาพเคลื่อนไหวนี้ก็คือการหาเวลาที่เหมาะสม เพื่อสร้างเอฟเฟกต์การเลี้ยวและการกะพริบ ภาพเคลื่อนไหวค่อนข้างตรงไปตรงมา และใช้วิธีการที่มีประสิทธิภาพมาก
คุณดูประสิทธิภาพของภาพเคลื่อนไหวนี้ได้โดยเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และบันทึกประสิทธิภาพขณะที่กําลังทํางาน หลังจากการโหลดครั้งแรก ภาพเคลื่อนไหวไม่ทริกเกอร์ "เลย์เอาต์" หรือ " Paint" และจะทำงานได้ลื่นไหล
บทสรุป
จากตัวอย่างเหล่านี้ คุณจะเห็นว่าการทำให้คุณสมบัติ 2-3 รายการเคลื่อนไหวโดยใช้วิธีการที่มีประสิทธิภาพสามารถสร้างภาพเคลื่อนไหวที่ยอดเยี่ยมมากได้อย่างไร การใช้วิธีการที่มีประสิทธิภาพตามที่อธิบายไว้ในคู่มือภาพเคลื่อนไหวเป็นค่าเริ่มต้นจะช่วยให้คุณมีเวลาสร้างเอฟเฟ็กต์ตามที่ต้องการ และไม่ต้องกังวลเรื่องการทำหน้าเว็บให้ช้าลงได้