在重复循环结束时修改SVG animateTransform

时间:2011-12-28 03:03:26

标签: javascript javascript-events svg smil

随着时间的推移,我正在尝试让对象旋转越来越快,每次动画重复时我都无法触发事件。 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));

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事件。