Question

我有这个很酷的暂停/恢复变形动画，我从新的YouTube嵌入式播放器中获得灵感。无论如何，如果您加载页面，您可以看到SVG变形工作完全正常...您可以通过更改＆＃34;来自＆＃34;来改变变形。和＆＃34;到＆＃34;标签中的属性。但是我想要做的就是在＃34; .ytp-play-button＆＃34;时使用jQuery编辑这些属性。点击了，但由于某种原因它没有用，有什么帮助吗？

代码演示： 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"
   });
});

Answer 1

您拥有的动画定义为在页面加载时仅运行一次。在different answer中，它解释了如何在需要时运行SVG动画。

使用<animation>创建begin="indefinite"，以便它不会将动画视为从文档加载开始。您可以通过JavaScript或原始SVG源来执行此操作。

当您准备好启动动画时，请在SVGAnimationElement实例（<animate>元素）上调用beginElement()。对于您的用例，使用标准的addEventListener()回调来在您准备好时调用此方法

将此逻辑应用于您的代码，这是一个有效的解决方案，利用额外的变量在两种形状之间切换：

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

单击SVG时反向动画效果？

1 个答案: