使用 SVG 的旋转动画
Rotation Animation with SVG
我是 svg 的初学者,我有一个 svg,我正在尝试将旋转设置为 -45 度。我正在使用 Snap.js 来处理动画。动画的表现不像我期望的那样,我不确定如何修复它。动画在正确的位置结束,但当它旋转时,它似乎向右移动,然后在旋转到结束位置时向左移动。
抱歉,如果该解释令人困惑,我提供了指向我制作的一些 JS fiddle 的链接,以便提供帮助的任何人都可以比较两者。 CSS fiddle 只是为了演示我希望使用 Snap 执行的动作:平滑旋转到新位置,而不是左右移动。以下是我使用的代码:
<svg height="200" width="500" id="semaphore">
<g transform="rotate(-45,200,100)">
<circle id="light" cx="200" cy="130" r="10" fill="red"></circle>
</g>
<g id="signal" >
<path d="M200 142
L320 142
L320 125
L250 127
Q235 125, 233 116
T218 108
Q211 110,206 114
Q198 118, 189 111
Q178 105, 169 111
Q155 135, 200 142" fill="none" stroke="black"></path>
<path d="M176 108
L176 106
Q188 106, 187 100
A1 1 0 0 1 213 100
Q212 106,224 106
L224 108" fill="none" stroke="black"></path>
<circle cx="200" cy="100" r="8" fill="none" stroke="black"></circle>
<line x1="200" y1="92" x2="200" y2="108" stroke="black"></line>
<line x1="192" y1="100" x2="208" y2="100" stroke="black"></line>
<g transform="rotate(-45,200,100)">
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
<g>
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
<g transform="rotate(45,200,100)">
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
</g>
</svg>
<input type="button" value="Click" id="testButton">
//JQuery-Snap.js
$(document).ready(function(){
$("#testButton").on("click", function(){
clickMe();
});
});
function clickMe(){
var signal = Snap("#semaphore");
signal.select("#light").attr({fill:"yellow"});
signal.select("#signal").animate({transform:"r- 45,200,100"},3000,mina.linear);
}
//CSS For Other Rotation Animation
#semaphore{
transform-origin:200px 100px;
-webkit-animation-name: approach;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: approach;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: approach;
animation-duration: 3s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes approach{
0% {transform:rotate(0deg);}
100%{transform:rotate(-45deg);}
}
如果您需要更多信息,请告诉我。预先感谢您的帮助,
肖恩
因为那个版本的Snap有一个错误我认为已经修复了(如果没有可能需要检查dev分支,或者回到0.4.1)
以不同的 Snap 版本为例..从下面加载
https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js
我是 svg 的初学者,我有一个 svg,我正在尝试将旋转设置为 -45 度。我正在使用 Snap.js 来处理动画。动画的表现不像我期望的那样,我不确定如何修复它。动画在正确的位置结束,但当它旋转时,它似乎向右移动,然后在旋转到结束位置时向左移动。
抱歉,如果该解释令人困惑,我提供了指向我制作的一些 JS fiddle 的链接,以便提供帮助的任何人都可以比较两者。 CSS fiddle 只是为了演示我希望使用 Snap 执行的动作:平滑旋转到新位置,而不是左右移动。以下是我使用的代码:
<svg height="200" width="500" id="semaphore">
<g transform="rotate(-45,200,100)">
<circle id="light" cx="200" cy="130" r="10" fill="red"></circle>
</g>
<g id="signal" >
<path d="M200 142
L320 142
L320 125
L250 127
Q235 125, 233 116
T218 108
Q211 110,206 114
Q198 118, 189 111
Q178 105, 169 111
Q155 135, 200 142" fill="none" stroke="black"></path>
<path d="M176 108
L176 106
Q188 106, 187 100
A1 1 0 0 1 213 100
Q212 106,224 106
L224 108" fill="none" stroke="black"></path>
<circle cx="200" cy="100" r="8" fill="none" stroke="black"></circle>
<line x1="200" y1="92" x2="200" y2="108" stroke="black"></line>
<line x1="192" y1="100" x2="208" y2="100" stroke="black"></line>
<g transform="rotate(-45,200,100)">
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
<g>
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
<g transform="rotate(45,200,100)">
<circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
</g>
</g>
</svg>
<input type="button" value="Click" id="testButton">
//JQuery-Snap.js
$(document).ready(function(){
$("#testButton").on("click", function(){
clickMe();
});
});
function clickMe(){
var signal = Snap("#semaphore");
signal.select("#light").attr({fill:"yellow"});
signal.select("#signal").animate({transform:"r- 45,200,100"},3000,mina.linear);
}
//CSS For Other Rotation Animation
#semaphore{
transform-origin:200px 100px;
-webkit-animation-name: approach;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: approach;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: approach;
animation-duration: 3s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes approach{
0% {transform:rotate(0deg);}
100%{transform:rotate(-45deg);}
}
如果您需要更多信息,请告诉我。预先感谢您的帮助, 肖恩
因为那个版本的Snap有一个错误我认为已经修复了(如果没有可能需要检查dev分支,或者回到0.4.1)
以不同的 Snap 版本为例..从下面加载
https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js