gpt4 book ai didi

javascript - 使用 SMIL 的 SVG 动画

转载 作者:行者123 更新时间:2023-11-28 07:38:49 25 4
gpt4 key购买 nike

我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。

这是我已经尝试过的:

HTML/XML:

        <svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">

<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>

<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>

</svg>

JS/jQuery:

在本例中的按键事件上执行以下操作:

document.getElementById( 'story_1_1_1' ).attributes[ 5 ].value = '';

document.getElementById( 'story_1_1_1' ).attributes[ 6 ].value ='story_1_1_1.end';

document.getElementById( 'story_1_2_1' ).attributes[ 6 ].value ='story_1_2_1.end';

document.getElementById( 'story_2_1_1' ).attributes[ 5 ].value= 'story_1_1_2.end;story_2_1_1.end';

令人钦佩的结果:

我想实现:

  • 有一个不断运行的动画循环
  • 在事件触发时(例如单击、按键等)在当前迭代结束时结束当前运行的动画
  • 在第一个动画结束时开始第二个动画(- 重复更多动画)(- 理想情况下,反向执行相同的操作:从动画 2 到 1)

实际结果:

到目前为止发生了什么:

  • 动画 1 循环工作正常
  • 按键时:
  • 情况 1(您在顶线下降时按下):
    • 有效
  • 情况 2(您在顶线上升时按下):
    • 静止动画再迭代一次,然后停止

我对如何做到这一点的不同方法和/或想法持开放态度。 SMIL 至少在一开始看起来是一种快速而简单的方法,而且在移动设备上的性能也很好。也许在这种情况下 css3 动画更好?

我该如何解决这个问题?

最佳答案

这很难……我在这里搞砸了:

$(window).keypress(function(e) {//spacebar trigger
if (e.keyCode === 0 || e.keyCode === 32) {
$('#story_1_1_1, #story_1_1_2, #story_1_2_1, #story_1_2_2').attr('end', 'story_2_1_1.begin');
$('#story_2_1_1').attr('begin', '0s;story_2_1_2.end');
}
});

https://jsfiddle.net/kt7gax2a/2/

关于javascript - 使用 SMIL 的 SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28294933/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com