Làm việc với đồ họa vector có thể mở rộng

SVG là một định dạng tệp sử dụng các dòng, thay vì pixel, để lưu trữ và hiển thị hình ảnh. Như tên gọi của chúng cho thấy, đồ họa vector có thể mở rộng có thể mở rộng mà không làm giảm chất lượng.

Ngoài việc tuyệt vời để thay đổi kích thước, bạn cũng có thể sử dụng mã SVG trong HTML và nó sẽ hoạt động giống như bất kỳ phần tử nào khác. Điều này có nghĩa là bạn có thể sử dụng các quy tắc CSS, mã JavaScript và quan trọng nhất là các hoạt ảnh với SVG trên trang web của bạn.

Bạn có thể tạo SVG bằng phần mềm như Adobe Illustrator và các trang web như SVGator, nhưng bạn cũng có thể tạo chúng bằng tay. Định dạng SVG là một ngôn ngữ XML văn bản thuần túy và trông hơi giống HTML.

1. Các nút thay đổi màu sắc của Mariusz Dabrowski

Ví dụ này có bốn nút với các biểu tượng riêng và nền màu khối. Khi bạn chọn một nút, nút này sẽ chuyển từ hình tròn sang hình chữ nhật tròn, đồng thời chuyển màu nền của trang để phù hợp với nút.

Sự kết hợp giữa JS và CSS tạo ra những kết quả này và tất cả bắt đầu bằng một vòng lặp bổ sung trình xử lý sự kiện vào mỗi nút.

for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', buttonClick);
}

Khi một nút được nhấp, một hàm có tên buttonClick () sẽ thực hiện một số hành động. Nó bắt đầu bằng cách thay đổi màu nền của trang:

document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`;

Sau đó, nó thêm một lớp CSS vào nút đã được nhấn, kích hoạt hoạt ảnh và thay đổi màu nền của nút.

menuItemActive.classList.remove('menu__item--active');
this.classList.add('menu__item--active');
 
menuItemActive.classList.add('menu__item--animate');
this.classList.add('menu__item--animate');
 
menuItemActive = this;

Mặc dù đơn giản, nhưng ví dụ hoạt ảnh SVG này cung cấp một cách độc đáo để làm cho trang web của bạn hấp dẫn hơn. Loại tính năng thiết kế này hoàn hảo cho các trang web di động và ứng dụng dựa trên HTML.

2. Hello Stroke Animation của Toshiyuki Takahashi

Bạn có thể thêm bao nhiêu nút tùy thích vào đường dẫn SVG, làm cho chúng trở nên lý tưởng để tạo văn bản. Hoạt ảnh nét vẽ đơn giản này thể hiện kỹ thuật một cách hoàn hảo, với văn bản xuất hiện từ trái sang phải như thể nó đang được viết.

Hoạt ảnh không có khung hình chính, nó chỉ áp dụng chiều rộng nét mới cùng với thuộc tính chuyển tiếp CSS. Điều này làm cho mỗi đường tự vẽ trên màn hình mà không có hoạt ảnh phức tạp.

.path-1 {
    stroke-dasharray: 1850 2000;
    stroke-dashoffset: 1851;
    transition: 5s linear;
}

Một hàm JS thêm một lớp CSS duy nhất vào mỗi phần của văn bản bằng cách sử dụng một lớp CSS cha duy nhất để giảm mật độ của mã hơn nữa.

$(function() {
    function animationStart() {
        $('#container').addClass('fin');
    }
 
    setTimeout(animationStart, 250);
});

3. Đường viền nút chỉ CSS của Sean McCaffery

Là một ví dụ chỉ dành cho CSS, hoạt ảnh SVG này rất phù hợp cho những ai không muốn nhúng chân vào mã JavaScript. Ý tưởng rất đơn giản: một nút bắt đầu với một đường gạch dưới biến thành một đường viền đầy đủ khi bạn di chuột qua nó.

Khung chính CSS tạo ra hai trạng thái cho nút. Trạng thái đầu tiên có nét vẽ dày hơn và chỉ bao phủ phần dưới cùng của nút hình dạng SVG, bắt đầu từ 0%. Trạng thái còn lại là nút hoàn chỉnh ở mức 100% với nét vẽ mỏng hơn.

@keyframes draw {
    0% {
        stroke-dasharray: 140 540;
        stroke-dashoffset: -474;
        stroke-width: 8px;
    }
 
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
        stroke-width: 2px;
    }
}

Các khung hình chính này chỉ được áp dụng cho đường viền nút hình dạng SVG khi người dùng di chuyển con trỏ qua nút. Nó sử dụng lớp giả CSS : hover để đạt được điều này, kích hoạt quy tắc thêm khung hình ảnh động vào nút.

.svg-wrapper:hover .shape {
    -webkit-animation: 0.5s draw linear forwards;
    animation: 0.5s draw linear forwards;
}

Điều này cho thấy cách bạn có thể tạo hình ảnh động đẹp mắt mà không cần sử dụng mã phức tạp. Bạn có thể sử dụng các nguyên tắc cơ bản này và sự sáng tạo của mình để tạo ra các yếu tố tương tác phức tạp hơn cho trang web của riêng bạn.

4. Đồng hồ đơn giản của Mohamad Mohebifar

Với rất nhiều kỹ thuật thú vị được giới thiệu, thật khó để quyết định những gì cần thảo luận khi nhìn vào ví dụ về đồng hồ SVG này.

Để bắt đầu, nó sử dụng hàm Date () để thu thập ngày và giờ hiện tại. Sử dụng giá trị này, các hàm getHours (), getMinutes () và getSeconds () chia dữ liệu thành các phần có liên quan. Sau đó, mã sẽ tính toán vị trí của mỗi kim trên đồng hồ.

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Bằng cách lưu trữ mỗi tay trong một mảng, vị trí của chúng có thể được thiết lập rất dễ dàng mỗi khi mã chạy.

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
 
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
 
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

Thời gian có giới hạn ứng dụng trong lĩnh vực thiết kế web, nhưng nó rất hữu ích cho việc đếm ngược thời gian, đồng hồ và lưu trữ dấu thời gian. Ví dụ này cũng cung cấp thông tin chi tiết về cách tạo hoạt ảnh SVG động với các biến.

5. Dòng trường biểu mẫu chỉ CSS của David Khourshid

Hoạt ảnh SVG được điều khiển bởi CSS này cung cấp một cách gọn gàng để làm cho bất kỳ biểu mẫu nào trông thật lạ mắt.

Không có gì được chọn, biểu mẫu có các đường màu xám bên dưới mỗi trường. Một dòng xuất hiện khi một trường được chọn, trượt vào từ bên trái với hoạt ảnh mượt mà. Nếu người dùng chọn một trường khác, đường sẽ trượt đến vị trí mới của nó theo chuyển động trơn tru.

Cuối cùng, khi người dùng nhấn nút Đăng nhập , đường này sẽ biến thành một vòng tròn rung khi trang tải.

Ví dụ SVG này đặc biệt ấn tượng vì nó chỉ dựa vào CSS để tạo ra một kết quả phức tạp như vậy. Nó sử dụng các biến CSS để lưu trữ dữ liệu, giúp kiểm soát các phần tử như ứng dụng chính dễ dàng hơn.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
 
#app {
    width: $app-width;
    height: $app-height;
    padding: $app-padding;
    background: white;
    box-shadow: 0 0 2rem rgba(black, 0.1);
}

Bạn có thể sử dụng ví dụ này trên bất kỳ biểu mẫu web nào và thu hút người dùng của mình hơn bao giờ hết.

Tạo hoạt ảnh SVG của riêng bạn với HTML, JS và CSS

Tạo hoạt ảnh SVG từ đầu có thể là một quá trình khó khăn khi bạn mới bắt đầu. Những ví dụ này sẽ cung cấp cho bạn khởi đầu cần thiết để xây dựng các hoạt ảnh SVG giúp trang web của bạn tỏa sáng.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/svg-animation-examples-liven-web-design/