Hướng dẫn cho người mới bắt đầu về hoạt ảnh SVG với CSS
Đồ họa Vectơ có thể mở rộng (SVG) không chỉ là các tệp hình ảnh. Là một ứng dụng XML, SVG có chứa đánh dấu trông và hoạt động giống như HTML. Bạn cũng có thể sử dụng chúng kết hợp với mã CSS và JavaScript. Điều này giúp bạn có thể tạo hoạt ảnh cho các tệp SVG, tạo ra các hình ảnh phức tạp hoạt động tốt cho thiết kế web và các môi trường động khác.
Nhưng làm thế nào để bạn tạo hoạt ảnh SVG? Bắt đầu với hình dạng SVG, tạo hoạt ảnh bằng CSS và xây dựng dựa trên các nguyên tắc này để sử dụng hoạt ảnh trong tác phẩm của riêng bạn.
Mục Lục
Tạo hoạt ảnh SVG với HTML và CSS
Mặc dù bạn có thể sử dụng JavaScript để tạo hoạt ảnh theo chương trình SVG, CSS hiện cũng hỗ trợ tốt cho hoạt ảnh. Bạn có thể tìm thấy tất cả mã mẫu trên CodePen cho dự án này.
Xây dựng hình ảnh SVG bên trong HTML
Bước đầu tiên trong quá trình này là xây dựng hình ảnh SVG mà bạn sẽ làm việc. Bạn có thể tìm thấy đánh dấu SVG trong bảng HTML trên CodePen.
Cấu trúc SVG
Mặc dù SVG chia sẻ định dạng tương tự như HTML, nhưng các thẻ bạn sử dụng để tạo chúng là khác nhau. SVG có thẻ mở và thẻ đóng () có thể chứa nhiều thuộc tính khác nhau. Trong trường hợp của chúng tôi, chúng tôi đang sử dụng Tôi và viewBox đặc tính. Thuộc tính id hoạt động giống như bất kỳ ID HTML nào khác, cung cấp cho bạn một số nhận dạng duy nhất để sử dụng trong CSS / JS của bạn. Thuộc tính viewBox đặt kích thước của SVG của chúng tôi.
<!-- SVG with a responsive size --><svg id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG content -->
</svg>
Thay vào đó, bạn có thể sử dụng thuộc tính chiều rộng và chiều cao, như ví dụ sau minh họa. Tuy nhiên, viewBox tạo SVG đáp ứng sẽ phù hợp với kích thước của khung nhìn mà không phá vỡ tỷ lệ khung hình của nó.
<!-- SVG with a static size --><svg id="MUOSVGAnimation" width="800" height="600">
<!-- SVG content -->
</svg>
SVG Shapes
Bạn có thể tạo hình ảnh chi tiết với SVG, với một loạt các công cụ hình dạng khác nhau theo ý của bạn. Ví dụ SVG này sử dụng ba trong số các hình có sẵn, nhưng có nhiều hình khác. Mỗi hình dạng trong ví dụ này có một ID duy nhất mà các hoạt ảnh CSS có thể sử dụng sau này.
- SVG Ellipse: Đây là một công cụ hình tròn / hình bầu dục. Nó chỉ định các thuộc tính cho bán kính trục y / x (rx / ry), màu tô và chiều rộng nét vẽ. Điều quan trọng cần nhớ là bán kính bạn chọn với công cụ này sẽ bằng một nửa đường kính của hình dạng.
<ellipse id="circle" rx="100" ry="100" fill="#ffed00" stroke-width="0"/>- SVG Rect: Công cụ trực tràng SVG tạo ra một hình vuông hoặc hình chữ nhật. Cái này có các thuộc tính cho chiều rộng / chiều cao, một phép biến đổi, màu tô và chiều rộng nét vẽ.
<rect id="square" width="200" height="200" transform="translate(300 200)" fill="#05f"
stroke-width="0"/>- Đa giác SVG: Sử dụng đa giác SVG để đặt một số điểm cụ thể và tạo các hình dạng tùy ý có kích thước khác nhau. Đa giác trong ví dụ có ba cạnh, làm cho nó trở thành một hình tam giác và bạn có thể thấy vị trí của mỗi điểm được vẽ trong các thuộc tính của nó. Cùng với điều này, chúng ta có các thuộc tính cho vị trí, màu tô và chiều rộng nét của hình tam giác.
<polygon id="triangle" points="15,-97 115,102 -84,102 15,-97"
transform="translate(0,0)" fill="#f00" stroke-width="0"/>
Khi hoạt ảnh đã sẵn sàng, các hình dạng sẽ xếp hàng bên cạnh nhau.
Ba hình dạng SVG này là một số hình dạng phổ biến nhất, nhưng có nhiều hình dạng khác cho bạn lựa chọn. Bạn có thể sử dụng các hình dạng sau khi làm việc với hoạt ảnh SVG:
- Vòng tròn SVG: Hình dạng này tương tự như một hình elip, nhưng nó luôn có các bức xạ X và Y bằng nhau.
- Đường SVG: Đường SVG là một đoạn thẳng có hai điểm, mỗi điểm ở mỗi đầu.
- SVG Polyline: Polylines giống như các đường cơ bản, chỉ khác là chúng có thể có nhiều hơn hai điểm.
- Đa giác SVG: Đa giác SVG giống như hình chữ nhật, chỉ có điều chúng có thể có nhiều hơn bốn điểm, tạo nên những hình dạng phức tạp.
- Đường dẫn SVG: Đường dẫn SVG hoạt động tương tự như công cụ bút trong Adobe Photoshop. Các đường có thể kết nối giống như một đa giác / đa giác, nhưng chúng cũng có thể có các đường cong được áp dụng cho chúng.
Cách tạo hoạt ảnh SVG bằng CSS
Bây giờ bạn đã có một số hình dạng bên trong SVG của mình, đã đến lúc chuyển sang hoạt ảnh CSS. Mỗi hình dạng có một hoạt ảnh khác nhau để thể hiện một số tùy chọn bạn có, nhưng có rất nhiều thứ khác để khám phá với thiết kế của riêng bạn. Hình tròn di chuyển trên màn hình, các góc của hình vuông trở thành tròn và hình tam giác quay. Tất cả những thứ này đều sử dụng khung hình chính CSS để tạo ra các hình ảnh động mượt mà.
Di chuyển vòng kết nối bằng cách sử dụng biến đổi và dịch
Vòng tròn trong ví dụ SVG di chuyển từ dưới lên trên cùng của màn hình trong chu kỳ hoạt ảnh của nó. Bạn cần gán một hoạt ảnh cho vòng kết nối trước khi nó có thể di chuyển, thông qua thuộc tính CSS:
animation: circle_anim 2000ms linear infinite normal forwards
}Từ đầu tiên trong giá trị, circle_anim, là một tên cho hoạt ảnh. Nó chạy trong hai giây (2000ms). Nó có một tuyến tính đường cong giữ cho tốc độ của nó nhất quán và được thiết lập để chạy một vô hạn số lần trong tiền đạo hướng đi. Bạn có thể sử dụng các khung hình chính để xác định các giai đoạn riêng lẻ của hoạt ảnh:
@keyframes circle_anim {
0% { transform: translate(155px, 305px) }
45% { transform: translate(155px, -123px) }
50% { transform: translate(-123px, -123px) }
55% { transform: translate(-123px, 728px) }
60% { transform: translate(155px, 728px) }
100% { transform: translate(155px, 305px) }
}
Có sáu khung hình chính trong hoạt ảnh này, vì vậy vòng tròn sẽ di chuyển đến sáu vị trí khác nhau trong mỗi chu kỳ. Các biến đổi: dịch thuộc tính đặt vị trí của vòng tròn ở mỗi giai đoạn. Ở mức 0%, vòng tròn ở giữa màn hình và di chuyển lên và ra khỏi tầm nhìn 45%. Đến 50%, nó đã di chuyển sang trái màn hình trước khi di chuyển xuống bên dưới chế độ xem ở mức 55%. Hình tròn di chuyển trở lại vị trí ngang của nó 60% và hoạt ảnh hoàn tất ở 100% với hình tròn quay lại giữa màn hình.
Tạo hiệu ứng cho Thuộc tính Bán kính Đường viền của Hình vuông
Hình vuông trong ví dụ này cung cấp một tham chiếu tốt cho các hoạt ảnh thuộc tính chung. Miễn là bạn biết cú pháp chính xác để sử dụng, bạn có thể tạo hoạt ảnh cho bất kỳ thuộc tính CSS nào. Thuộc tính bán kính biên giới là một minh chứng tốt về điều này. Hình vuông có các góc nhọn biến thành góc tròn rồi lại thành góc vuông.
#square { animation: square_anim 2000ms ease-in-out infinite normal forwards }Hoạt ảnh vuông được gọi là square_anim và nó có thời gian chạy là hai giây. Các dễ vào đường cong làm cho hoạt ảnh chậm hơn ở đầu và cuối, tạo hiệu ứng mượt mà.
@keyframes square_anim {
0% { rx: 0px; ry: 0px }
45% { rx: 40px; ry: 40px }
55% { rx: 40px; ry: 40px }
100% { rx: 0px; ry: 0px }
}
Như bạn có thể thấy, hoạt ảnh này có bốn khung hình chính. Bán kính đường viền X và Y thay đổi từ 0px thành 40px trong khoảng từ 0% đến 45%, tạm dừng ở 40px cho đến 55%. Sau đó, nó quay trở lại 0px cho mỗi bán kính vào thời điểm hoạt ảnh đạt 100%.
Xoay Tam giác SVG với Biến đổi
Hoạt ảnh SVG cuối cùng trong ví dụ này là đơn giản nhất, với hình tam giác quay xung quanh điểm chính giữa của nó. Hình dạng hoàn thành một vòng quay đầy đủ sau mỗi hai giây và tiếp tục chạy vô hạn. Nó có một đường cong dễ nhìn khiến hoạt ảnh bị chậm lại ở phần cuối. Hoạt ảnh được gọi là tam giác_anim.
#triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }Hoạt ảnh này có hai khung hình chính, một khung hình ở mức 0% và khung hình còn lại ở mức 100%. Thuộc tính xoay chuyển đổi biến hình tam giác từ 0deg ở 0% thành 360deg ở 100%, tạo ra một vòng quay đầy đủ.
@keyframes triangle_anim {
0% { transform: translate(644px, 297px) rotate(0deg) }
100% { transform: translate(644px, 297px) rotate(360deg) }
}
Cách tạo hoạt ảnh cho các thuộc tính khác
Ba hoạt ảnh được đề cập ở trên là một điểm khởi đầu tốt khi bạn đang làm việc với SVG, nhưng bạn có thể sẽ muốn đẩy mạnh điều này hơn nữa. Bạn có thể sử dụng quy tắc hoạt ảnh CSS để điều chỉnh hầu hết mọi giá trị thuộc tính mà bạn có thể gán cho SVG của mình. Điều này bao gồm các giá trị cơ bản, như định cỡ và định vị, cũng như các giá trị nâng cao hơn, như đường viền, bóng đổ và chế độ hòa trộn.
Trong một số trường hợp hiếm hoi khi CSS không thể thực hiện công việc, bạn có thể sử dụng mã JavaScript để tạo hoạt ảnh SVG. Bạn có thể tìm thấy vô số hướng dẫn để giúp bạn điều này khi bạn cảm thấy sẵn sàng thực hiện bước tiếp theo với SVG của mình.
Tạo ảnh động SVG của riêng bạn
Cho dù bạn là nhà thiết kế web, nhà phát triển phần mềm hay đơn giản là một người sáng tạo, hoạt ảnh SVG có thể rất thú vị và khiến bạn hài lòng. Bạn có thể tìm thấy nhiều tài nguyên trên web có thể giúp bạn tạo hoạt ảnh dựa trên web, khi bạn đã hiểu rõ về kiến thức cơ bản.
Đọc tiếp
Thông tin về các Tác giả
