Анимация линии SVG

JavaScript/jQuery, SVG

Для того, чтобы написать своё имя, я использовал этот online редактор - он автоматически выравнивает линии, нарисованные от руки при помощи мышки. Убрать внутренний отступ на холсте можно с помощью программы Inkscape.


jQuery:

$(document).ready(function() {
jQuery.extend(jQuery.easing, {
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1)
            return c / 2 * t * t + b;
        return -c / 2 * (--t * (t - 2) - 1) + b;
    }
});
function SVG(tag) {
    return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function drawSVGPaths(_Element, _timeMin, _timeMax, _timeDelay) {
    var paths = $(_Element).find('path');
    $.each(paths, function (i) {
        var totalLength = this.getTotalLength();
        $(this).css({
            'stroke-dashoffset': totalLength,
            'stroke-dasharray': totalLength + ' ' + totalLength
        });
        $(this).delay(_timeDelay * i).animate({ 'stroke-dashoffset': 0 }, {
            duration: Math.floor(Math.random() * _timeMax) + _timeMin,
            easing: 'easeInOutQuad'
        });
    });
}
function startSVGAnimation(Element) {
    drawSVGPaths(Element, 10000, 2000, 50);
}
startSVGAnimation($('svg'));	
});

HTML:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="550px" height="400px" viewBox="0 0 550 400" enable-background="new 0 0 550 400" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="код svg"/>
</svg>

Если jQuery Easing Plugin уже подключен, то верхнюю часть кода нужно удалить. Можно не использовать Easing.
Группа анимированных объектов

Анимация на CSS (не поддерживается некоторыми браузерами)

Текст постепенно пишется, а потом постепенно стирается:

.path {
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Только пишется:

.path {
  stroke-dasharray: 2500;
  stroke-dashoffset: 0;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Articoli correlati