随着时间的推移,我正在尝试让对象旋转越来越快,每次动画重复时我都无法触发事件。 SVG / SMIL的repeatEvent似乎就是我所需要的,但是在下面的代码中,似乎根本没有调用onSpinEnd()。我做错了什么?
<path id='coloredPart' d='…'>
<animateTransform
id='spin'
attributeName='transform'
begin='0s'
dur='5s'
type='rotate'
from='0 0 0'
to='-360 0 0'
repeatCount='indefinite'
/>
</path>
<script> <![CDATA[
var spin = document.getElementById('spin');
var onSpinEnd = function() {
var intPart = 0;
intPart = parseInt(spin.getAttribute('dur')[0].slice(0, -1));
console.log(intPart);
if (intPart > 1) --intPart;
spin.setAttribute('dur', intPart.toString() + 's');
};
spin.addEventListener('repeatEvent', onSpinEnd, false)
]]>
</script>
事实证明,[0].slice(0, -1))
不会从“16”中给我“16”; .slice(0, -1))
会。该行应为:
intPart = parseInt(spin.getAttribute('dur').slice(0, -1));
答案 0 :(得分:0)
我不确定切片的用途。这似乎适用于Firefox。
var onSpinEnd = function() {
var spin = document.getElementById('spin');
var intPart = 0;
intPart = parseInt(spin.getAttribute('dur')[0]);
console.log(intPart);
if (intPart > 1) --intPart;
spin.setAttribute('dur', intPart.toString() + 's');
};
此外,据我所知,只有Opera和Firefox目前正在发布SMIL事件。