是否可以使用Velocity.js來變形SVG的路徑？

使用Velocity.js可以使SVG的路徑變形嗎？是否可以使用Velocity.js來變形SVG的路徑？

FROM "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z"

TO "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"

var path = document.querySelectorAll('svg path'); 

Velocity(path[0], { 
    tween: 1000 
}, { 
    duration: 6000, 
    easing: 'easeOutBounce', 
    progress: function (el, c, r, s, t) { 
     el[0].setAttribute('d', ??????); 
    } 
});

來源

2017-02-14 lolol

-1

編輯：請注意，我是在2016年啓用該代碼的作者，所以它是官方支持的方式做到這一點！

差不多了，應該是這樣的：

var path = document.querySelectorAll('svg path'), 
 
    from = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z", 
 
    to = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"; 
 

 
Velocity(path[0], { 
 
    tween: [to, from] 
 
}, { 
 
    duration: 6000, 
 
    easing: 'easeOutBounce', 
 
    progress: function(elements, complete, remaining, start, tweenValue) { 
 
     elements[0].setAttribute('d', tweenValue); 
 
    } 
 
});

來源

2017-02-14 14:03:29 Rycochet

請注意，負數作爲字符串的一部分被竊聽，直到速度1.4.3 – Rycochet

編輯：速度內置了一些字符串動畫的支持，請參閱下面的Rycochets回答。

如果不是，您可以自己嘗試這樣做，將路徑字符串分解爲數組。

在polyfill上，一種方法是使用路徑數據填充（因爲Chrome已棄用該功能以便於訪問數組點）。然後你可以通過路徑點類似於下面的循環並插入。

你也可以嘗試使用一些正則表達式來分割然後構建備份，一個簡單的例子可能如下所示。它可能不完整（我沒有真正測試過正則表達式，如果有一些我沒有想到的字符，可能會得到不同數量的元素）。

$velocity=$("#mypath"); 

var fromPath = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z"; 
var toPath = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"; 

var re = /(([+-]?[0-9\.]+)|[a-z]|\s+)([eE][-+]?[0-9]+)?/gi 

var fromMatch = fromPath.match(re) 
var toMatch = toPath.match(re) 

$velocity.velocity(
    { opacity: 0.5, tween: [0,1] }, 
    { progress: function(el, complete, remaining, start, tweenValue) { 
     var interpPath = ''; 
     for(c=0; c<fromMatch.length; c++) { 
     if(!isNaN(fromMatch[c])) { 
      interpPath += (toMatch[c] - fromMatch[c]) * tweenValue + +fromMatch[c] 
     } else { 
      interpPath += toMatch[c] 
     } 
     } 
     el[0].setAttribute('d', interpPath) 
    } } 
)

jsfiddle

來源

2017-02-14 14:48:02 Ian

對不起 - 不得不downvote - 我增加了速度來處理與字符串>字符串動畫幾個月的能力之前，我無法訪問文檔以將其添加到那裏。請參閱https://github.com/julianshapiro/velocity/issues/697 – Rycochet

https://github.com/julianshapiro/velocity/commit/7b196f548a27bdbd909e0d82cf89f8ed8c427edf - 儘管自那以後出現了一些修補程序。將我的示例粘貼到JSFiddle示例中（並使其登錄到控制檯）可以很好地適用於這些值：https：//jsfiddle.net/jgmxy0yc/ - 首先打開控制檯... – Rycochet

沒有'downvote' ，但由於你是速度代碼的作者，我當然尊重它:)。儘管如此，我依然認爲我的答案是「有用的」，所以按照SO的要求，找到一個有點苛刻的downvote，但是生活很短暫:)。請注意，我認爲您的示例不適用於從正面過渡到負面（但我可能是錯誤的），所以我認爲仍然有一個自定義替代方法很有用。 – Ian

是否可以使用Velocity.js來變形SVG的路徑？

回答

相關問題