时间戳

首页 > 解决方案 > 动画跳到所需结果的结尾

svg - 动画跳到所需结果的结尾

问题描述

笔：https ://codepen.io/jkmg/pen/zYKqvLq

<html>
<head>
    <title></title>
    <style type="text/css">
    html,body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-color: purple;
    }
    svg {
        height: 50px;
    }
    .playButton {
        width: 100px;
        height: 100px;
        background-color: white;
        display: inline-flex;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        border-radius: 200px;
        overflow: hidden;
    }
    .playButton .poscont {
        position: absolute;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .playButton .playGlyph {
        opacity: 1;
        margin-right: -5px;
    }
    </style>
</head>
<body>
    
    <span></span>
    <div class="playButton currentlyPaused">
      <div class="playGlyphPosition poscont">
      <svg class="playGlyph One" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.83 122.58">
        
        <path id="playPath" d="M20.55,119.08a11.89,11.89,0,0,1-20.3-8.35L0,61.29.25,11.85a11.89,11.89,0,0,1,20.3-8.34l45,45a18.11,18.11,0,0,1,0,25.62Z"> 
        <animate xlink:href="#playPath"
                 begin="indefinite"
                 id="pauseAni"
                 attributeName="d"
                 dur="1s"
                 fill="freeze"
                 attributeType="XML"
                 from="M20.55,119.08a11.89,11.89,0,0,1-20.3-8.35L0,61.29.25,11.85a11.89,11.89,0,0,1,20.3-8.34l45,45a18.11,18.11,0,0,1,0,25.62Z"
                 to="M20.55,109.49c0,15-20.3,15-20.3-.06L0,60,.25,10.55c0-14.06,20.3-14.06,20.3-.06l0,36.69c.31,7.31.31,16.31,0,25.62Z"
                 />
        </path>
      </svg>
        </div>
      
    </div>

    <script type="text/javascript">
        document.querySelector(".playButton").addEventListener("click", function () {
          if (this.classList.contains("currentlyPaused")) {
            this.classList.remove("currentlyPaused"); 
            this.classList.add("currentlyPlaying");
            document.querySelector("#pauseAni").beginElement();
            document.querySelector("span").innerText += "\nAttempted to play, ani to pause.";
          }
          else { 
            this.classList.remove("currentlyPlaying");
            this.classList.add("currentlyPaused");
            // document.querySelector("#playAni").beginElement();
            // this.querySelector(".playGlyph").classList.add("playing");
            document.querySelector("span").innerText += "\nAttempted to pause, ani to play.";
          }
        
        });
            </script>

</body>
</html>

gif供参考

我正在尝试将播放按钮设置为暂停按钮并将播放按钮转换为人造线以用作暂停按钮的元素。

我不知道为什么动画是用 CSS 制作动画与否，在没有真正“制作动画”的情况下跳到动画的结尾。有人可以帮我弄清楚发生了什么吗？

标签： svgsvg-animate

解决方案

我不知道为什么动画是用 CSS 制作动画与否，在没有真正“制作动画”的情况下跳到动画的结尾。有人可以帮我弄清楚发生了什么吗？

正如@Robert Longson评论和@Paul LeBeau 的回答中所说明的那样，动画不流畅的原因是由于缺乏要求：

  1. path初始和最终的节点点数 path必须相同。这个要求已经满足了。
  2. 两个路径中相同位置的节点类型必须相同

不满足这个要求

为了满足开始和结束路径的这些要求，您可以使用矢量编辑器中的编辑技术。

起始路径

在此处输入图像描述

最后的路径

在此处输入图像描述

仍然需要从矢量编辑器中复制这些补丁并将它们添加到您的代码中。

我已经替换了你脚本的代码。您可能可以使用任何执行触发功能的脚本。

var svg_1 = document.getElementById("svg1"),
  pause = document.getElementById("pause"),
  play = document.getElementById("play");

let flag = true;

svg_1.addEventListener('click', function() {
  if (flag == true) {
    pause.beginElement();
    flag = false;
  } else {
    play.beginElement();
    flag = true;
  }
});
<html>
<head>
    <title></title>
    <style type="text/css">
    html,body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-color: purple;
    }
    svg {
        height: 50px;
    }
    .playButton {
        width: 100px;
        height: 100px;
        background-color: white;
        display: inline-flex;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        border-radius: 200px;
        overflow: hidden;
    }
    .playButton .poscont {
        position: absolute;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .playButton .playGlyph {
        opacity: 1;
        margin-right: -5px;
        pointer-events:all;
    }
</style>
<div class="playButton currentlyPaused">
      <div class="playGlyphPosition poscont">
      <svg id="svg1" class="playGlyph One" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.83 122.58">
            
  <path d="m20.6 119.1c-5 5.3-20.3 2.2-20.3-8.3L0 61.3 0.3 11.9C0.3 1.3 15.4-1.2 20.6 3.5 26.3 8.8 29.4 12.3 35.8 18.9 43.7 26.9 50.8 35.1 58.7 42.7 73.9 57.3 74.6 64.7 59.1 80.7 52.6 87.5 46.5 92.5 36.1 103 29.2 110.1 27.5 111.8 20.6 119.1Z" style="fill:black;stroke:#000">
   
   <animate id="play" attributeName="d" dur="0.2s" begin="indefinite" fill="freeze" attributeType="XML"
    to="m20.6 119.1c-5 5.3-20.3 2.2-20.3-8.3L0 61.3 0.3 11.9C0.3 1.3 15.4-1.2 20.6 3.5 26.3 8.8 29.4 12.3 35.8 18.9 43.7 26.9 50.8 35.1 58.7 42.7 73.9 57.3 74.6 64.7 59.1 80.7 52.6 87.5 46.5 92.5 36.1 103 29.2 110.1 27.5 111.8 20.6 119.1Z" />
 
 <animate id="pause" attributeName="d" dur="0.2s" begin="indefinite" fill="freeze" attributeType="XML"
    to="M20.6 111C20.5 125.5 0.3 125.7 0.3 110.7L0 61.3 0.3 17c0-21.4 20.2-20.6 20.2-0.1 0 6.4 0 10 0 12.8 0 11.8 0.2 7.5 0.2 13-0.2 21.6-0.2 15.4 0 38.1 0.1 9.3 0.1 18.9 0 22.6-0.1 4.3-0.1 3.3-0.1 7.5z"/>
  </path>
</svg>
  </div>
      
    </div>

推荐阅读