[英]Morphing with Velocity.js doesnt work
Hej, 喂
i have this plunker: http://plnkr.co/edit/bKzi6rU3lIXT4Nz2wkR8?p=info 我有这个矮人: http ://plnkr.co/edit/bKzi6rU3lIXT4Nz2wkR8?p=info
<!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>
With my code, and some examples. 用我的代码和一些示例。 What I want to do is morph each polygon from one SVG image, into another polygon from another SVG image.
我要做的是将一个SVG图像中的每个多边形变形为另一个SVG图像中的另一个多边形。 The translation works, but I'm not sure how to do a morph.
翻译是可行的,但是我不确定如何进行变形。 Can anyone help, or check the code and tell me what I am doing wrong?
谁能帮忙,或者检查代码,然后告诉我我做错了什么? There are a lot of polygons, and I need it to be fast so i went with velocity.js for this.
多边形很多,我需要它很快,所以我选择了velocity.js。
I was also thinking of maybe moving it all to three.js, and maybe convert it to a format that would be best to use with three.js. 我还考虑过将其全部移动到three.js,也许将其转换为最适合与three.js一起使用的格式。 But if it is a possibilty to use it as svg and keep a great performance i would do so.
但是,如果可以将其用作svg并保持良好的性能,我会这样做。
As far as I'm aware, velocity.js doesn't support this as (taken from their website ): 据我所知,Velocity.js不支持此功能(取自他们的网站 ):
In general, Velocity can animate any property that takes a single numeric value.
通常,Velocity可以为具有单个数值的任何属性设置动画。
As SVG paths usually (always?) consist of multiple values, morphing is way beyond their current scope. 由于SVG路径通常(总是?)包含多个值,因此变形超出了它们当前的范围。
However, I can highly recommend Snap for morphing SVG paths. 但是,我强烈建议您使用Snap来变形SVG路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.