Javascript 使用Velocity.js进行变形不起作用_Javascript_Animation_Svg_Morphing

Javascript 使用Velocity.js进行变形不起作用

javascript animation svg

Javascript 使用Velocity.js进行变形不起作用,javascript,animation,svg,morphing,Javascript,Animation,Svg,Morphing,嘿我有一个小东西：测试函数fetchXML（url，回调）{ var xhr=new XMLHttpRequest（）； xhr.open（'GET'，url，true）； xhr.onreadystatechange=函数（evt）{ //不要显式地处理错误，这些错误应该是 //通过浏览器中的控制台输出可见。 if（xhr.readyState==4）{ 回调（xhr.responseXML）； } }; xhr.send（空）； }; /*var list=[“test3.svg”，

嘿

我有一个小东西：


测试
函数fetchXML（url，回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url，true）；
xhr.onreadystatechange=函数（evt）{
//不要显式地处理错误，这些错误应该是
//通过浏览器中的控制台输出可见。
if（xhr.readyState==4）{
回调（xhr.responseXML）；
}
};
xhr.send（空）；
};
/*var list=[“test3.svg”，“test.2svg”]*/
//取文件
fetchXML（“test3.svg”，函数（newSVGDoc）{
//将其导入当前DOM
var n=document.importNode（newSVGDoc.documentElement，true）；
文件.getElementById（“复仇者”）.appendChild（n）；
var ironman=document.getElementsByTagName（“多边形”）；
var ironmanlist=Array.prototype.slice.call（ironman）；
/*警报（ironmanlist.length）*/
ironmanlist.forEach（函数（elem，i）{
/*对于（var指数=0；指数


使用我的代码和一些示例。我要做的是将一个SVG图像中的每个多边形变形为另一个SVG图像中的另一个多边形。翻译工作，但我不知道如何做变形。
有人能帮忙吗，或者检查一下代码，告诉我我做错了什么？
有很多多边形，我需要它速度快，所以我用velocity.js来实现这个
我还想把它全部移到three.js，或者把它转换成一种最适合three.js使用的格式。但如果有可能将其用作svg并保持良好的性能，我会这样做。
据我所知，velocity.js不支持这一点（摘自）：
通常，Velocity可以为采用单个数值的任何特性设置动画
由于SVG路径通常（总是？）由多个值组成，因此变形远远超出了它们当前的范围
但是，我可以强烈推荐对SVG路径进行变形
    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stilovi/main.css">
  <title>Testing</title>
</head>

<body>
  <div id="avengers"></div>
</body>
<script src="snap.svg-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<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){
                    //2.test case morphing each point (not working)//
                    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");
                    //3.test case morphing each point in another way (not working)//
                    /*$(elem.points[index])
                        .velocity({x:100,y:100},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");
                    console.log(elem.points[index]);
                }*/
      //1. working test case (translation)//
      console.log(elem.points[0].x);
      $.Velocity(elem, {
        translateX: -300
      }, {
        duration: Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000
      }, "ease-in-out");
      //$.Velocity(elem,{rotateZ:"45deg"},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");
      console.log(elem.points[0].x);
      //End of 1. working test case//
    });
    console.log(ironmanlist);


  });
</script>

</html>