Trong bài đăng này, hãy tìm hiểu cách tạo một số ảnh động phổ biến trên CodePen. Tất cả ảnh động này đều sử dụng các kỹ thuật hiệu suất được thảo luận trong các bài viết khác trong phần này.
Hãy xem bài viết Tại sao một số ảnh động bị chậm? để tìm hiểu lý thuyết đằng sau các đề xuất này và Hướng dẫn về ảnh động để biết các mẹo thực tế.
Ảnh động về trạng thái đang tải của trình hướng dẫn
Ảnh động tải Trình hướng dẫn xem trên CodePen
Ảnh động đang tải này được tạo hoàn toàn bằng CSS. Hình ảnh cùng với tất cả ảnh động đã được tạo trong CSS và HTML, không có hình ảnh hoặc JavaScript. Để hiểu cách tạo và hiệu suất của ứng dụng, bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển.
Kiểm tra ảnh động bằng Công cụ của Chrome cho nhà phát triển
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Công cụ của Chrome cho nhà phát triển và ghi lại vài giây của ảnh động. Trong phần Tóm tắt, bạn sẽ thấy trình duyệt không thực hiện bất kỳ thao tác nào về Bố cục hoặc Vẽ khi chạy ảnh động này.
Để tìm hiểu cách tạo ảnh động này mà không gây ra bố cục và sơn, hãy kiểm tra bất kỳ phần tử chuyển động nào trong Công cụ dành cho nhà phát triển của Chrome. Bạn có thể sử dụng Animations Panel (Bảng điều khiển ảnh động) để xác định vị trí của các phần tử ảnh động, nhấp vào bất kỳ phần tử nào sẽ làm nổi bật phần tử đó trong DOM.
Ví dụ: hãy chọn hình tam giác và xem cách hộp của phần tử biến đổi trong hành trình bay lên không trung, khi hộp xoay rồi quay lại vị trí bắt đầu.
Khi phần tử vẫn được chọn, hãy xem Bảng điều khiển kiểu. Tại đó, bạn có thể thấy CSS vẽ hình tam giác và ảnh động đang được sử dụng.
Cách hoạt động
Tam giác được tạo bằng cách sử dụng phần tử giả ::after để thêm nội dung được tạo, sử dụng đường viền để tạo hình dạng.
.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;
}
Ảnh động được thêm bằng dòng CSS sau,
animation: path_triangle 10s ease-in-out infinite;
Trong Công cụ dành cho nhà phát triển của Chrome, bạn có thể tìm thấy các khung hình chính bằng cách cuộn xuống Bảng điều khiển kiểu.
Tại đó, bạn sẽ thấy ảnh động được tạo bằng cách sử dụng transform để thay đổi vị trí của phần tử và xoay phần tử đó.
Thuộc tính transform là một trong các thuộc tính được mô tả trong Hướng dẫn về ảnh động. Thuộc tính này không khiến trình duyệt thực hiện các thao tác bố cục hoặc vẽ (là nguyên nhân chính khiến ảnh động bị chậm).
@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);
}
}
Mỗi phần chuyển động trong ảnh động này đều sử dụng các kỹ thuật tương tự. Kết quả là một ảnh động phức tạp chạy mượt mà.
Vòng tròn nhấp nháy
Xem Pulsating Circle trên CodePen
Loại ảnh động này đôi khi được dùng để thu hút sự chú ý đến một nội dung nào đó trên trang. Để hiểu rõ ảnh động, bạn có thể sử dụng Công cụ dành cho nhà phát triển Firefox.
Kiểm tra ảnh động bằng Công cụ của Firefox
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Firefox DevTools và ghi lại vài giây của ảnh động. Dừng ghi, trong trình tự thác nước, bạn sẽ thấy không có mục nhập nào cho Recalculate Style (Tính toán lại kiểu). Giờ đây, bạn đã biết rằng ảnh động này không gây ra việc tính toán lại kiểu, do đó, các thao tác bố cục và vẽ.
Vẫn trong Firefox DevTools, hãy kiểm tra vòng tròn để xem ảnh động này hoạt động như thế nào.
<div> có lớp pulsating-circle đánh dấu vị trí của hình tròn, tuy nhiên lớp này không tự vẽ hình tròn.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Vòng tròn và ảnh động hiển thị được tạo bằng các phần tử giả ::before và ::after.
Phần tử ::before tạo vòng mờ mở rộng bên ngoài vòng tròn màu trắng, bằng cách sử dụng ảnh động có tên pulse-ring, tạo hiệu ứng transform: scale và 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;
}
}
Một cách khác để xem thuộc tính nào đang được tạo ảnh động là chọn bảng điều khiển Animations trong Công cụ cho nhà phát triển của Firefox. Sau đó, bạn sẽ thấy hình ảnh trực quan về các ảnh động đang được sử dụng và các thuộc tính đang được tạo ảnh động.
Vòng tròn màu trắng được tạo và tạo ảnh động bằng phần tử giả ::after.
Ảnh động pulse-dot sử dụng transform: scale để tăng và giảm kích thước của dấu chấm trong ảnh động.
.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);
}
}
Bạn có thể dùng một ảnh động như thế này ở nhiều vị trí trong ứng dụng. Điều quan trọng là những chi tiết nhỏ này không ảnh hưởng đến hiệu suất tổng thể của ứng dụng.
Quả cầu 3D CSS thuần tuý
Xem hình cầu 3D CSS thuần tuý trên CodePen
Ảnh động này có vẻ rất phức tạp, tuy nhiên, ảnh động này sử dụng các kỹ thuật mà chúng ta đã thấy trong các ví dụ trước. Mức độ phức tạp đến từ việc tạo ảnh động cho một số lượng lớn phần tử.
Mở Công cụ của Chrome cho nhà phát triển rồi chọn một trong các phần tử có lớp plane.
Hình cầu được tạo thành từ một tập hợp các mặt phẳng và nan hoa xoay.
Các mặt phẳng và nan hoa này nằm bên trong một trình bao bọc <div>, và chính phần tử này đang xoay bằng 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);
}
}
Bạn có thể tìm thấy các dấu chấm được lồng bên trong các phần tử plane và spoke, các dấu chấm này sử dụng ảnh động để chuyển đổi theo tỷ lệ và dịch các dấu chấm đó.
Điều này tạo ra hiệu ứng nhấp nháy.
.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);
}
}
Công việc liên quan đến việc tạo ảnh động này là phải căn chỉnh thời gian chính xác để tạo hiệu ứng xoay và nhấp nháy. Bản thân ảnh động khá đơn giản và sử dụng các phương thức hoạt động rất tốt.
Bạn có thể xem hiệu suất của ảnh động này bằng cách mở Công cụ cho nhà phát triển Chrome và ghi lại Hiệu suất trong khi ảnh động đang chạy. Sau lần tải đầu tiên, ảnh động không kích hoạt Layout hoặc Paint và chạy trơn tru.
Kết luận
Từ những ví dụ này, bạn có thể thấy việc tạo ảnh động cho một vài thuộc tính bằng các phương thức có hiệu suất cao có thể tạo ra một số ảnh động rất thú vị như thế nào. Theo mặc định, các phương thức có hiệu suất cao được mô tả trong Hướng dẫn về ảnh động, bạn có thể dành thời gian tạo hiệu ứng mong muốn mà không phải lo lắng về việc làm trang chậm.