Question

尝试为项目制作一个简单的svg动画。我需要一条线，旋转它，然后在屏幕上移动它。我试过用变换和平移来做这个，但是线总是旋转回原来的位置。如何在不旋转的情况下移动线路？

这是我的codepen和我的代码：https://codepen.io/anon/pen/rwBXaY

window.onload = function(){

var s = Snap("#svg");


var square = s.select('#square');
var line = s.select('#divide');
var diagonal = s.select('#diagonal');


square.animate({
	opacity:1}, 500);


setTimeout(function() {
  line.animate({
   opacity:1}, 250);
}, 2000);

setTimeout(function() {
  line.animate({
	transform: 'r-90, 249.25, 506.458'}, 500);
}, 3000);

setTimeout(function() {
  diagonal.animate({
	opacity:1}, 250);
}, 4000);

setTimeout(function() {
  diagonal.animate({
	transform: 'r64, 225.25, 506.458'}, 500);
}, 5000);

setTimeout(function() {
  diagonal.animate({
  	transform: 'r-64, 225.25, 506.458',
	transform: 'translate(49, 0)'}, 500);
}, 6000);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id ="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
	 height="1000px" viewBox="0 0 500 1000" enable-background="new 0 0 500 1000" xml:space="preserve">
  
<rect id="square" class="step1" opacity="0" x="201.25" y="457.458" fill="none" stroke="red" stroke-width="2" width="98" height="98"/>
  
<line id="divide" class="step2" opacity="0" fill="none" stroke="red" stroke-width="2" x1="201.25" y1="506.458" x2="299.25" y2="506.458"/>
  
<line id="diagonal" opacity="0" fill="none" stroke="red" stroke-width="2" x1="201.25" y1="555.458" x2="249.25" y2="457.458"/>
</svg>

我希望旋转的水平线在正方形中间移动，但保持水平。

Answer 1

我不完全确定你的效果是因为线条的大小不同，如果你想在矩形的中心做一个十字架，但是你可能想要使用intial变换（）你已经应用了，所以当我们构建transfor

时，它将如下所示

diagonal.animate({
    transform: 'r-64, 225.25, 506.458',
    transform: 't25,0' + diagonal.transform() +'s0.9'}, 
500);

https://codepen.io/anon/pen/NgWgWe

当我在snap.svg中变换一条线时，它会旋转回原来的位置？

1 个答案: