动画跳到所需结果的末尾
Animation Skipping to End of Desired Result
笔数：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>
我正在尝试将播放按钮设置为暂停按钮的动画，并将播放按钮转换为人造线条以用作暂停按钮的元素。
我不知道为什么动画是，用 CSS 或不用 CSS 动画，跳到动画的结尾而没有真正“动画”。有人可以帮我弄清楚这是怎么回事吗？
我将详细阐述罗伯特的评论。
For animation, two d property values can only be interpolated smoothly
when the path data strings contain have the same structure, (i.e.
exactly the same number and types of path data commands which are in
the same order). If an animation is specified and the lists of path
data commands do not have the same structure, then the values must be
interpolated using the discrete animation type.
但是你的两个路径没有相同的结构。第一条路径是：
M 20.55,119.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.55,109.49
c 0,15-20.3,15-20.3-.06L0,60,.25,10.55
c 0-14.06,20.3-14.06,20.3-.06l0,36.69
c .31,7.31.31,16.31,0,25.62
Z
如果要在两条路径之间进行插值，它们需要具有相同数量和类型的路径命令。
换句话说，您需要编辑一个（或两个）以使它们匹配。
I have no idea why the animation is, animating with CSS or not,
skipping to the end of the animation without actually "animating".
Could someone please help me figure out what's going on?
正如 @Robert Longson 评论和 @Paul LeBeau 的 回答中所示，动画不流畅的原因是由于不足的要求：
- 初始
path和最终 path的节点数必须相同。已满足此要求。
- 两条路径中相同位置的节点类型必须相同
不满足此要求
要满足对开始和结束路径的这些要求，您可以在矢量编辑器中使用编辑技术。
起始路径
最终路径
仍然需要从矢量编辑器中复制这些补丁并将它们添加到您的代码中。
我已经替换了你脚本的代码。您可以使用任何执行触发器功能的脚本。
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>
笔数：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>
我正在尝试将播放按钮设置为暂停按钮的动画，并将播放按钮转换为人造线条以用作暂停按钮的元素。
我不知道为什么动画是，用 CSS 或不用 CSS 动画，跳到动画的结尾而没有真正“动画”。有人可以帮我弄清楚这是怎么回事吗？
我将详细阐述罗伯特的评论。
For animation, two d property values can only be interpolated smoothly when the path data strings contain have the same structure, (i.e. exactly the same number and types of path data commands which are in the same order). If an animation is specified and the lists of path data commands do not have the same structure, then the values must be interpolated using the discrete animation type.
但是你的两个路径没有相同的结构。第一条路径是：
M 20.55,119.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.55,109.49
c 0,15-20.3,15-20.3-.06L0,60,.25,10.55
c 0-14.06,20.3-14.06,20.3-.06l0,36.69
c .31,7.31.31,16.31,0,25.62
Z
如果要在两条路径之间进行插值，它们需要具有相同数量和类型的路径命令。
换句话说，您需要编辑一个（或两个）以使它们匹配。
I have no idea why the animation is, animating with CSS or not, skipping to the end of the animation without actually "animating". Could someone please help me figure out what's going on?
正如 @Robert Longson 评论和 @Paul LeBeau 的 回答中所示，动画不流畅的原因是由于不足的要求：
- 初始
path和最终path的节点数必须相同。已满足此要求。 - 两条路径中相同位置的节点类型必须相同
不满足此要求
要满足对开始和结束路径的这些要求，您可以在矢量编辑器中使用编辑技术。
起始路径
最终路径
仍然需要从矢量编辑器中复制这些补丁并将它们添加到您的代码中。
我已经替换了你脚本的代码。您可以使用任何执行触发器功能的脚本。
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>