[Animation SVG] : Tìm hiểu và tạo hiệu ứng Animation SVG

Thời gian đọc: 3 phút

Chào mọi người, như các bạn đã biết một logo bình thường, hình ảnh,… muốn chúng đẹp hơn thì có rất nhiều hiệu ứng khác nhau, một trong những số đó là tạo Animation SVG với HTML, CSS và JS. Vậy ở bài viết này chúng ta sẽ cùng nhau tìm hiểu nhé!

Tạo logo SVG

Đầu tiên chúng ta sẽ đi tạo SVG(file.svg), bạn nào có thể tự tạo hình SVG được thì có thể làm để thử nhé, còn không các bạn có thể download example tại đây, sau đó chúng ta sẽ chèn đoạn code SVG vào phần HTML.
Để SVG của chúng ta có thể chạy được thì sẽ phải có thuộc tính path. Nếu các bạn đang tạo SVG bình thường thì cần chuyển nó về path(Nếu down example của mình về thì sẽ không cần chuyển nữa). Ví dụ về path:

 <path class="st5" d="M685.5 184.5l-192 190M877.06 378.15l-192 190M493.5 374.5l192 194M685.5 184.5l192 194"/>

Thuộc tính stroke cơ bản

Ở phần này mình mình sẽ sử dụng 3 thuộc tình đó là: stroke, stroke-dasharray, stroke-dashoffset.
stroke là khai báo màu sắc cho path :

 stroke : #fff;

stroke-dasharray được sử dụng để tạo những nét đứt:

 stroke-dasharray: 50;

stroke-dashoffset để di chuyển nét đứt, bù đắp gạch ngang bằng các giá trị mà chúng ta tạo cho nó:

 stroke-dashoffset: -50;

Chúng ta sẽ chỉnh stroke-dasharray và stroke-dashoffset bằng nhau để cách nét gạch ngang biến mất. Sau đó sẽ tạo animation cho nó.

Một vài thuộc tính animation

Mình sẽ giới thiệu với các bạn một số thuộc tính animation dưới đây:

 .st5{
    stroke-dasharray: 1086;
    stroke-dashoffset: -1086;
    animation-name: draw-st-vuo;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

animation-name là tên animation chúng ta tạo bằng keyframe ví dụ:

 @keyframes draw-st-vuo{
    from{
        stroke-dashoffset: -1100;
    }
    to{
       stroke-dashoffset: 0; 
    }
}

animation-duration là thời gian animation thực thi.
animation-iteration-count dùng để thiết lập số lần thực hiện một animation.
animation-direction dùng để xác định chiều chạy của animation.
animation-timing-function dùng để xác định tốc độ thay đổi hiệu ứng khi di chuyển.
animation-fill-mode dùng để thay đổi trạng thái của phần tử trước khi bắt đầu và sau khi kết thúc animation.

Ví dụ về Animation SVG

Đây là phần code HTML:

<section class="svg-test">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1366 768" xml:space="preserve">
    <style>
        .st0{fill:#0071bc}.st1{fill:#fff}.st2{font-family:&apos;Algerian&apos;}.st5{fill:none;stroke:#0071bc;stroke-width:2;stroke-miterlimit:10}
    </style>
    <circle class="st0 st-circle" cx="685" cy="375" r="135.5"/>
    <path class="st0 bd-circle" d="M685 240c36.06 0 69.96 14.04 95.46 39.54S820 338.94 820 375s-14.04 69.96-39.54 95.46S721.06 510 685 510s-69.96-14.04-95.46-39.54S550 411.06 550 375s14.04-69.96 39.54-95.46S648.94 240 685 240m0-1c-75.11 0-136 60.89-136 136s60.89 136 136 136 136-60.89 136-136-60.89-136-136-136z"/>
    <text transform="matrix(.7931 0 0 1 557.445 391.132)">
        <tspan x="0" y="0" class="st1 st2 text-bg" font-size="61.201">WOLF</tspan><tspan x="153.78" y="0" class="text-sm st1 st2" font-size="47.601"> Active</tspan>
    </text>
    <path class="st5" d="M685.5 184.5l-192 190M877.06 378.15l-192 190M493.5 374.5l192 194M685.5 184.5l192 194"/>
    <g>
        <path class="st-vuo" d="M819 241v268H551V241h268m2-2H549v272h272V239z"/>
    </g>
    </svg>

</section>

Đây là code CSS :

.st-circle{
    fill: #0071bc;
}
.bd-circle{
    stroke: #0071bc;
}
.st-vuo{
    stroke: #0071bc;
    fill: #0071bc00;
    stroke-dasharray: 1100;
    stroke-dashoffset: -1100;
    animation: draw-st-vuo 3s infinite;
}
.st5{
    stroke-dasharray: 1086;
    stroke-dashoffset: -1086;
    /* animation: draw-st-vuo 2s infinite; */
    animation-name: draw-st-vuo;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
.text-bg{
    stroke: #ffffff;
    stroke-dasharray: 450;
    stroke-dashoffset: -450;
    animation: draw-text-big 3s infinite;
}
.text-sm{
    stroke: #ffffff;
    stroke-dasharray: 300;
    stroke-dashoffset: -300;
    animation: draw-text-big 3s infinite;
}
@keyframes draw-st-vuo{
    from{
        stroke-dashoffset: -1100;
    }
    to{
       stroke-dashoffset: 0; 
    }
}
@keyframes draw-st5{
    from{
        stroke-dashoffset: -1086;
    }
    to{
       stroke-dashoffset: 0; 
    }
}
@keyframes draw-text-big{
    0{
        stroke-dashoffset: -450;
        fill: #0071bc;
    }
    50%{
        stroke-dashoffset: 0;
        fill: #0071bc;
    }
    100%{
       fill: #fff;
    }
}
@keyframes draw-text-sm{
    0{
        stroke-dashoffset: -300;
        fill: #0071bc;
    }
    50%{
        stroke-dashoffset: 0;
        fill: #0071bc;
    }
    100%{
       fill: #fff;
    }
}

Còn đây là code JS . Ở đây mình dùng JS, getTotalLength() để xác định giá trị cho stroke-dasharray :

var stVuo = document.querySelector(".st5");
var stVuoLength = stVuo.getTotalLength();
console.log(stVuoLength);

Và đây là sản phẩm

Tổng kết

Như vậy là ở bài viết này chúng ta đã tìm hiểu về Animation SVG. Hẹn gặp lại các bạn ở bài tiếp theo . Hãy theo dõi Wolfactive nhé.
Cảm ơn các bạn đã đón đọc. Các bạn có thắc mắc hay có vấn đề cần giải đáp thì hay inbox vào fanpage Wolfactive.

[Animation SVG] : Tạo Animation SVG