Эффект обратной анимации при нажатии SVG?

У меня есть классная анимация паузы/возобновления преобразования, на создание которой меня вдохновил новый YouTube Embed Player. В любом случае, если вы загрузите страницу, вы увидите, что преобразование SVG работает отлично... и вы можете изменить преобразование, изменив атрибуты «от» и «до» в теге. Но то, что я пытаюсь сделать, это отредактировать эти атрибуты с помощью jQuery, когда нажата кнопка «.ytp-play-button», но по какой-то причине это не работает, любая помощь?

ДЕМО-ПРОГРАММА КОДА: http://codepen.io/mistkaes/pen/jPdWMe

ДЕМО-СТРАНИЦА ПОЛНОЙ СТРАНИЦЫ: http://s.codepen.io/mistkaes/debug/jPdWMe

jQuery:

$(".ytp-play-button").click(function() {
   $("#ytp-12").attr({
    "from": "M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28",
    "to": "M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26"
   });
});

svg html jquery css attr
person mistkaes    schedule 04.08.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Анимация, которая у вас есть, предназначена для запуска только один раз при загрузке страницы. В другом ответе объясняется, как запустить анимацию SVG при необходимости.

  1. Создайте <animation> с begin="indefinite", чтобы анимация не рассматривалась как запуск при загрузке документа. Вы можете сделать это либо с помощью JavaScript, либо с помощью исходного кода SVG.
  2. Вызовите beginElement() для экземпляра SVGAnimationElement (элемент <animate>), когда вы готов к запуску анимации. В вашем случае используйте стандартный обратный вызов addEventListener(), чтобы вызвать этот метод, когда вы будете готовы

Применяя эту логику к вашему коду, вот рабочее решение, в котором используется дополнительная переменная для переключения между двумя фигурами:

var flip = true,
    pause = "M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28",
    play = "M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26",
    $animation = $('#animation');

$(".ytp-play-button").on('click', function(){
    flip = !flip;
    $animation.attr({
        "from": flip ? pause : play,
        "to": flip ? play : pause
    // .get(0) is used to get the native DOM element
    // [0] would also work
    }).get(0).beginElement();
});
html {
    background-color: #1c1c1f;
}

button {
    outline: none;
    border: 0px solid;
    background: transparent;
}

.ytp-play-button {
    fill: #fff;
    opacity: 0.85;
    height: 175px;
}

.ytp-play-button:hover {
    cursor: pointer;
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause">
   <svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
         <path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26">
            <animate id="animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="1.1s" keySplines=".4 0 1 1" repeatCount="1"></animate>
         </path>
      </defs>
      <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use>
      <use xlink:href="#ytp-12" class="ytp-svg-fill"></use>
   </svg>
</button>

person SeinopSys    schedule 04.08.2015