Snap.svg Objects rotating animation problems

Snap.svg 旋轉動畫的問題

用 Snap.svg 做 element.animate() 旋轉動畫時, 若圖案的中心對準原點 (如 上篇), 則以中心點當旋轉中心, 動畫會是正常的。但若偏移中心點做旋轉, 會伴隨縮放的發生, 明明就沒有要做縮放啊 ? 問題應該是 animate() 用 Matrix 的 a, b, c, d, e, f 去做值的改變, 而造成的, 跑出來的動畫就是很白痴...


在這裡想到一個做法, 感覺和上一篇一樣是個賤招。就是把要做旋轉的物件用 group 包起來, 同時設定旋轉中心為該 group 的原點位置, 被包裹的物件要做平移 (translate) , 使得物件在畫面上的位置看起來是一樣的 (不變的)。然後對 group 做旋轉, 就不會伴隨奇怪的縮放發生, 動畫完成之後再把 group 拆掉。

這個功能由一對 functions 完成, TGroup 和 unTGroup

function TGroup(paper, pivot) {
 if(! pivot || pivot.x===undefined || pivot.y===undefined) {
  return false;
 }
 var i, el, outer, m, n;
 outer = paper.g();
 outer.transform( new Snap.Matrix().translate(pivot.x, pivot.y).toTransformString());
 m = new Snap.Matrix();
 m.translate(-pivot.x, -pivot.y);

 for(i=2; i<arguments.length; i++) {
  el = arguments[i];
  n = m.clone();
  n.add( el.transform().localMatrix );
  el.transform( n.toTransformString() );
  outer.add( el );
 }
 return outer;
}

function unTGroup(outer) {
 var i, el, pa, m, n;
 pa = outer.parent();
 m = outer.transform().localMatrix;

 while( el=outer.select('*') ) {
  n = m.clone();
  n.add( el.transform().localMatrix );
  el.transform( n.toTransformString() );
  pa.add(el);
 }
 outer.remove();
}

範例在 http://dl.dropboxusercontent.com/u/9545926/2013/xmas_svg/tgroup.htm , 請自行查看 JS source