Question

我的代码向左移动一个形状，并在2秒内消失，并在1秒后重复所有内容

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="636px" height="155px" version="1.1">
	<g id="canvas" transform="translate(0.5,0.5)">		
	</g>
</svg>

<script language="javascript">

	var svgNS = "http://www.w3.org/2000/svg";  
	var canvas = document.querySelector('#canvas');
	function svgElement(name, attributes) {
		var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
		for (key in attributes)
			element.setAttribute(key, attributes[key]);
		return canvas.appendChild(element);
	}
	function render() {
		while (canvas.firstChild) canvas.removeChild(canvas.firstChild);
		svgElement('rect', {x:x, y:"20", width:"100",height:"100",style:"fill:blue"})
	}
	var x = 100
	render()
	var wait = 0
	function clock() {
		if (wait > 0) {
			wait -= 1
			if (wait == 0)
				x = 100
		} else {
			x -= 10
			if (x < 1) {
				svgElement('animate', {attributeType:"CSS", attributeName:"opacity", from:1, to:0, dur:"2s", fill:"freeze"})
				wait = 30
			} else
				render()
		}
		
	}
	
	setInterval(clock, 100)
</script>

问题是不透明度衰减在第二次迭代时是立即的。广场立即消失。

Answer 1

有一个动画时间轴在添加第一个动画然后继续时开始运行。所以你的第一个动画在时间0运行。

对于后续动画，时间轴已经超过0，因此它们在时间0开始（没有指定开始），它们会立即发生。

一个解决方案（如下所示）是重置动画时间轴。
另一种是计算动画的正确开始值 - 你可以通过调用canvas.parentNode.getCurrentTime来获得它。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="636px" height="155px" version="1.1">
	<g id="canvas" transform="translate(0.5,0.5)">		
	</g>
</svg>

<script language="javascript">

	var svgNS = "http://www.w3.org/2000/svg";  
	var canvas = document.querySelector('#canvas');
	function svgElement(name, attributes) {
		var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
		for (key in attributes)
			element.setAttribute(key, attributes[key]);
		return canvas.appendChild(element);
	}
	function render() {
		while (canvas.firstChild) canvas.removeChild(canvas.firstChild);
		svgElement('rect', {x:x, y:"20", width:"100",height:"100",style:"fill:blue"})
	}
	var x = 100
    var begin = 0
	render()
	var wait = 0
	function clock() {
		if (wait > 0) {
			wait -= 1
			if (wait == 0)
				x = 100
		} else {
			x -= 10
			if (x < 1) {
				svgElement('animate', {attributeType:"CSS", attributeName:"opacity", from:1, to:0, dur:"2s", fill:"freeze", begin:begin})
				wait = 30
				canvas.parentNode.setCurrentTime(0);
			} else
				render()
		}
		
	}
	
	setInterval(clock, 100)
</script>

更新SVG动画

1 个答案: