Svg 动画跳过到所需结果的结尾
钢笔： 我正在尝试将播放按钮动画化为暂停按钮，并将播放按钮转换为人造线，以用作暂停按钮的元素Svg 动画跳过到所需结果的结尾,svg,svg-animate,Svg,Svg Animate,钢笔： 我正在尝试将播放按钮动画化为暂停按钮，并将播放按钮转换为人造线，以用作暂停按钮的元素 我不知道为什么动画，不管是否使用CSS制作动画，都会跳到动画的末尾而不实际制作动画。有人能帮我弄清楚发生了什么事吗？我将详细介绍罗伯特的评论 委员会： 对于动画，两个d特性值只能平滑插值 当路径数据字符串包含相同的结构时，即。 与中的路径数据命令的数量和类型完全相同 同样的顺序。如果指定了动画，则路径列表 数据命令不具有相同的结构，则值必须为 使用离散动画类型进行插值 但是，这两条路径的结构不同。第一条
我不知道为什么动画，不管是否使用CSS制作动画，都会跳到动画的末尾而不实际制作动画。有人能帮我弄清楚发生了什么事吗？我将详细介绍罗伯特的评论 委员会： 对于动画，两个d特性值只能平滑插值 当路径数据字符串包含相同的结构时，即。 与中的路径数据命令的数量和类型完全相同 同样的顺序。如果指定了动画，则路径列表 数据命令不具有相同的结构，则值必须为 使用离散动画类型进行插值 但是，这两条路径的结构不同。第一条路径是： M 20.55119.08 a 11.89,11.89,0,0,1-20.3-8.35 L 0,61.29.25,11.85 a 11.89,11.89,0,0,1,20.3-8.34 l 45,45 a 18.11,18.11,0,0,1,0,25.62 Z 第二个是： M 20.55109.49 c0,15-20.3,15-20.3-.06L0,60,25,10.55 c0-14.06,20.3-14.06,20.3-.06l0,36.69 c.31,7.31.31,16.31,0,25.62 Z 如果要在两条路径之间插值，则它们需要具有相同数量和类型的路径命令
换句话说，您需要编辑其中一个或两个，以便它们匹配。我将详细介绍Robert的评论 委员会： 对于动画，两个d特性值只能平滑插值 当路径数据字符串包含相同的结构时，即。 与中的路径数据命令的数量和类型完全相同 同样的顺序。如果指定了动画，则路径列表 数据命令不具有相同的结构，则值必须为 使用离散动画类型进行插值 但是，这两条路径的结构不同。第一条路径是： M 20.55119.08 a 11.89,11.89,0,0,1-20.3-8.35 L 0,61.29.25,11.85 a 11.89,11.89,0,0,1,20.3-8.34 l 45,45 a 18.11,18.11,0,0,1,0,25.62 Z 第二个是： M 20.55109.49 c0,15-20.3,15-20.3-.06L0,60,25,10.55 c0-14.06,20.3-14.06,20.3-.06l0,36.69 c.31,7.31.31,16.31,0,25.62 Z 如果要在两条路径之间插值，则它们需要具有相同数量和类型的路径命令 换句话说，您需要编辑一个或两个，以便它们匹配 我不知道为什么动画是，用CSS动画与否， 跳过到动画的结尾，而不实际设置动画。 有人能帮我弄清楚发生了什么事吗 正如@Robert Longson的评论和@Paul LeBeau的回答所示，动画不流畅的原因是缺乏要求： 初始路径和最终路径中的节点点数必须相同。这项要求已得到满足。 两条路径中相同位置的节点类型必须相同 这一要求没有得到满足 要满足开始和结束路径的这些要求，可以在向量编辑器中使用编辑技术 起始路径 最后的道路 仍然需要从矢量编辑器复制这些补丁并将它们添加到代码中 我已替换了您脚本的代码。您可能可以使用任何执行触发器功能的脚本 var svg_1=document.getElementByIdsvg1， pause=document.getElementByIdpause， play=document.getElementByIdplay； 让flag=true； svg_1.addEventListener'click'函数{ 如果标志==true{ 暂停，开始； flag=false； }否则{ 游戏开始； flag=true； } }; html，正文{ 宽度：100%； 身高：100%； 边际：0px； 填充：0px； 背景颜色：紫色； } svg{ 高度：50px； } .播放按钮{ 宽度：100px； 高度：100px； 背景色：白色； 显示：内联flex； 位置：固定； 最高：50%； 左：50%； 左边距：-50px； 利润上限：-50px； 边界半径：200px； 溢出：隐藏； } .playButton.poscont{ 位置：绝对位置； 宽度：100px； 高度：100px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } .playButton.playGlyph{ 不透明度：1； 右边距：-5px； 指针事件：全部； } 我不知道为什么动画是，用CSS动画与否， 跳过到动画的结尾，而不实际设置动画。 有人能帮我弄清楚发生了什么事吗 正如@Robert Longson的评论和@Paul LeBeau的回答所示，动画不流畅的原因是缺乏要求： 初始路径和最终路径中的节点点数必须相同。这个要求 已经满足了这一要求。 两条路径中相同位置的节点类型必须相同 这一要求没有得到满足 要满足开始和结束路径的这些要求，可以在向量编辑器中使用编辑技术 起始路径 最后的道路 仍然需要从矢量编辑器复制这些补丁并将它们添加到代码中 我已替换了您脚本的代码。您可能可以使用任何执行触发器功能的脚本 var svg_1=document.getElementByIdsvg1， pause=document.getElementByIdpause， play=document.getElementByIdplay； 让flag=true； svg_1.addEventListener'click'函数{ 如果标志==true{ 暂停，开始； flag=false； }否则{ 游戏开始； flag=true； } }; html，正文{ 宽度：100%； 身高：100%； 边际：0px； 填充：0px； 背景颜色：紫色； } svg{ 高度：50px； } .播放按钮{ 宽度：100px； 高度：100px； 背景色：白色； 显示：内联flex； 位置：固定； 最高：50%； 左：50%； 左边距：-50px； 利润上限：-50px； 边界半径：200px； 溢出：隐藏； } .playButton.poscont{ 位置：绝对位置； 宽度：100px； 高度：100px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } .playButton.playGlyph{ 不透明度：1； 右边距：-5px； 指针事件：全部； }
如果希望动画平滑，“自”和“到”路径必须包含相同的命令。你的没有。在其中一个命令中，第二个命令是a，而在另一个命令中，它是C。对于那些想知道结果的人来说，这是一个成品：如果你想让动画平滑，那么“从”和“到”路径必须包含相同的命令。你的没有。在其中一个命令中，第二个命令是a，在另一个命令中是c。对于那些想知道结果的人来说，这是一个成品：为了进一步解决问题，通过简单地编辑每个点的起始变量来改变路径结构以匹配，可以解决问题吗？如果你指的是命令字母M、a、L、c等，那就不是了。这些命令意味着不同的东西。M表示移动，L表示直线，a表示圆弧。您需要在矢量编辑器（如Inkscape）中编辑这些路径。计算出哪些段类型可能需要M、L和C的组合，以及需要多少。从一个形状开始。然后调整点，形成第二个形状，无需添加或删除任何，谢谢！我能够达到预期的效果，并继续制作动画。谢谢你的帮助。这对检测我所处理的点有很大帮助：在能够在更理想的位置匹配命令后，我最终将动画类型更改为“样条线”，以获得更可控的轻松效果。再次感谢！为了进一步解决这个问题，通过简单地编辑每个点的起始变量来更改路径结构以匹配是否可以解决这个问题？如果您指的是命令字母M、a、L、c等，则不是。这些命令的含义不同。M表示移动，L表示直线，a表示圆弧。您需要在矢量编辑器（如Inkscape）中编辑这些路径。计算出哪些段类型可能需要M、L和C的组合，以及需要多少。从一个形状开始。然后调整点，形成第二个形状，无需添加或删除任何，谢谢！我能够达到预期的效果，并继续制作动画。谢谢你的帮助。这对检测我所处理的点有很大帮助：在能够在更理想的位置匹配命令后，我最终将动画类型更改为“样条线”，以获得更可控的轻松效果。再次感谢！
<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>