Question

我试图通过使用其他svg内的点作为目标，将大量svg多边形变形为其他svg多边形。我读到了速度，你可以设置坐标的动画并看到例子，但是当我尝试在多边形中使用它时，没有任何事情发生。

我尝试将所有要点改为同一个点作为例子来确认我的逻辑。如果我的逻辑正确地为我服务，那么所有的多边形应该动画到一点！但没有任何反应。

我做错了什么？这是我的代码：

<script>
    function fetchXML(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function (evt) {
    //Do not explicitly handle errors, those should be
    //visible via console output in the browser.
    if (xhr.readyState === 4) {
        callback(xhr.responseXML);
    }
    };
    xhr.send(null);
};

/*var list = ["test3.svg","test.2svg"];*/
//fetch the document
fetchXML("test3.svg",function(newSVGDoc){
    //import it into the current DOM
    var n = document.importNode(newSVGDoc.documentElement,true);
    document.getElementById("avengers").appendChild(n);

    var ironman = document.getElementsByTagName("polygon");

    var ironmanlist = Array.prototype.slice.call(ironman);
        /*alert(ironmanlist.length);*/
        ironmanlist.forEach(function(elem,i)
        {   
            for (var index = 0; index < elem.points.length; ++index){
                console.log(elem.points[index]);
                $.Velocity(elem.points[index],{x:100,y:100},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");
                console.log(elem.points[index]);
            }

            /*console.log(elem.points[0].x);
            $.Velocity(elem,{translateX:-200},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");*/
            /*console.log(elem.points[0].x);*/
        }
        );
        console.log(ironmanlist);


}); 
</script>

velocity.js可以为多边形标记内的点设置动画

0 个答案: