SVG.js：通過morph（）方法對矩陣進行動畫處理

Question

我想使用SVG.js為轉換矩陣制作動畫。 列出了一個方法matrix.morph（） ，旨在實現此目的。 我無法做到這一點。

下面是一個嘗試應用此方法的示例，但它沒有執行任何操作。 有人可以告訴我如何使用SVG.js制作轉換矩陣動畫。 謝謝。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SVG.js - Rect Animate Matrix Morph</title> <script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body style='padding:10px;font-family:arial;'> <center> <h4>SVG.js - Rect Animate Animate Matrix Morph</h4> <table> <tr> <td> <div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div> </td> </tr></table> <script> var mySVG = SVG('svgDiv').size(400, 400); var myRect = mySVG.rect(100,100).attr({x:150,y:150,id:'myRect',fill: '#f00','stroke-width':3,stroke:'black'}); var myRectMatrix = new SVG.Matrix var myRectMatrixMorph=myRectMatrix.morph(1,2,3,4,5,6) console.log(myRectMatrixMorph.toString()) </script> </body> </html>

Answer 1

要為元素的轉換設置動畫，可以使用與對元素設置轉換相同的方法-使用transform()方法。 設置動畫時，您不需要自己觸摸morph方法。

嘗試：

el.animate().transform({rotation:25})
// or with matrix
el.animate().transform({a:1, b:0, c:0 .... })
// or with SVG.Matrix
el.animate().transform(new SVG.Matrix(1,0,0 ....))

變形方法僅適用於您想要在特定位置放置矩陣的情況。 喜歡：

var m1 = new SVG.Matrix(1,0,0,1,0,0)
var m2 = new SVG.Matrix(2,0,0,2,0,0)
m1.morph(m2)
m1.at(0.5) // returns matrix (1.5,0,0,1.5,0,0)

SVG.js：通過morph（）方法對矩陣進行動畫處理

問題描述

1 個解決方案

解決方案1
0 2017-05-19 15:08:15

SVG.js：通過morph（）方法對矩陣進行動畫處理

問題描述

1 個解決方案

解決方案1 0 2017-05-19 15:08:15

解決方案1
0 2017-05-19 15:08:15