gpt4 book ai didi

javascript - 使用填充时动态更改 SVG 动画值 ="freeze"

转载 作者:搜寻专家 更新时间:2023-11-01 04:33:48 24 4
gpt4 key购买 nike

我在 AJAX 网络应用程序中将 SVG 用于图表。收到初始数据后,我想将图表元素(例如条形图)从默认 0 值设置为新数据值的动画。如果用户选择了一个新数据集,我会从服务器请求新数据,然后将条形图从以前的值设置为新值。

<rect x="0" y="0" width="1px" height="20px" fill="red">
<animate id="anim" attributeName="width" attributeType="XML"
begin="indefinite" from="0" to="100px" dur="0.8s" fill="remove"/>
</rect>

每次收到数据时,我都会设置 fromto 属性并调用 beginElement()

如果我在 SVG 动画中设置 fill="remove",则每次加载新数据集时条形图都会正确设置动画,但是,当然,在动画之间条形图会返回到其默认宽度。

在调用 beginElement() 之前或之后设置 width.baseVal.value 以建立新的基值会导致非常讨厌的闪烁。

所以我尝试使用 fill="freeze" 让栏在每个动画结束时保持其宽度。问题在于第一个动画有效,但随后每次调用 beginElement() 都会立即将栏返回到其默认宽度并且动画停止工作。

我正在 Chrome 12.0 中进行测试。这是一个示例,用于查看使用卡住时动画如何中断。

http://jsfiddle.net/4ws9W/

<!DOCTYPE html>
<html>
<head><title>Test SVG animation</title></head>

<body>
<svg width="200px" height="20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="10px" width="200px" height="2px"/>

<rect x="0" y="0" width="1px" height="20px" fill="red">
<animate id="anim" attributeName="width" attributeType="XML" begin="indefinite" from="0" to="100px" dur="1.3s" fill="freeze"/>
</rect>

parent.anim = document.getElementById('anim');

</svg>

<br/>
<a href="javascript:anim.beginElement();">anim.beginElement();</a>
<br/>
<a href="javascript:anim.endElement();">anim.endElement();</a>
<br/>

<br/>
<a href="javascript:anim.setAttribute('to', '50px');">anim.setAttribute('to', '50px');</a>
<br/>
<a href="javascript:anim.setAttribute('to', '150px');">anim.setAttribute('to', '150px');</a>
<br/>

<br/>
<a href="javascript:anim.setAttribute('fill', 'remove');">anim.setAttribute('fill', 'remove');</a>
<br/>
<a href="javascript:anim.setAttribute('fill', 'freeze');">anim.setAttribute('fill', 'freeze');</a>
<br/>

</body>
</html>

如何设置条形宽度的动画,让它保持新的宽度,然后在新值到达时重复设置它的动画?

最佳答案

您可以在必要的元素上调用 suspendRedraw 方法来避免闪烁。

关于javascript - 使用填充时动态更改 SVG 动画值 ="freeze",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6507009/

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