Обратен анимационен ефект при щракване върху SVG?

Имам тази страхотна анимация за преобразуване на пауза/възобновяване, за която се вдъхнових да направя от новия плейър за вграждане на YouTube. Както и да е, ако заредите страницата, можете да видите, че 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(), за да извикате този метод, когато сте готови

Прилагайки тази логика към вашия код, ето работещо решение, което използва допълнителна променлива за превключване между 2 форми:

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="/bg#ytp-12" class="ytp-svg-shadow"></use>
      <use xlink:href="/bg#ytp-12" class="ytp-svg-fill"></use>
   </svg>
</button>

person SeinopSys    schedule 04.08.2015