svg.js中的動畫沒有相同的結果
[英]Animation in svg.js dont have same result
問題描述
我的svg.js代碼使用旋轉動作和移動動作，但是兩個結果沒有相同的中心坐標這是我的代碼
<body> <div id="drawing"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script> <script type="text/javascript"> var draw = SVG('drawing') var group_1 = draw.group() var group_2 = draw.group() var rect_1 = group_1.rect(50, 20).fill('#f06').center(50, 50) var rect_2 = group_2.rect(50, 20).fill('#f09').center(50, 50) rect_1.animate(1000).rotate(45).after(function(){ group_1.animate(1000).center(100, 100)}) group_2.animate(1000).center(100, 100) </script> </body>
1 個解決方案
解決方案1
0 2018-09-21 07:25:05
在SVG中，需要將組理解為元素的分組。 與photohop基本相同。 您可以選擇多個元素，然后一次旋轉或縮放它們。 反過來，這意味着組本身沒有幾何。 它完全取決於在屏幕上可見該組的內容（x，y）或其大小（帶有/高度）。
這就是為什么不能move組的原因。 您只能對其進行轉換。 為了使api保持簡單，svg.js為您提供了方便的移動和居中方法，該方法在后台進行了翻譯。
在您的示例中，您在旋轉組之后將其移動。 但是，您需要進行絕對轉換。 這意味着svg.js嘗試使運動不配合到已經存在的旋轉中。 有時這個數學不太順利。
要解決您的問題，您必須改用相對轉換。 這意味着運動位於旋轉的最上方。 這也意味着您必須確定要移動組的數量。
我們目前正在開發svg.js的版本3，該版本大大簡化了這種轉換業務。 所以我希望最終的解決方案會很快到來
帶有svg.js的Javascript Scrollable / Scrubbable Animation
[英]Javascript Scrollable/Scrubbable Animation w/ svg.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.