Question

这个问题是关于SVG.js

我在两个SVG对象的动画上使用了两个move命令来交换它们的位置。然后，我使用afterAll中的回调将这些对象之一进一步移动。我发现我需要指定相对于之前更改的新位置，即从对象开始时的位置开始。要跟踪旧的坐标变化（增量），这是一件令人头疼的事情。

所以：

在继续前进之前，我是否需要“提交”（或完成）动画以永久更改对象位置？怎么样？
我通过在代码中不同部分的同一对象上再次调用animation()来意外地重新使用FX对象吗？

感谢您的帮助...

Answer 1

如果只想交换SVG图像，则可能不需要库（A和B选项）

A）为此，您可以依靠基本的CSS过渡。

div {
  position: absolute;
  width: 100px;
  height: 100px;
}

#one {
  background-color: #39464e; 
  left: 0;
}

#two {
  background-color: #ff4f68;
  right: 0;
}

body.swap #one {
  left: calc(100% - 100px);
  transition: 5s;
}

body.swap #two {
  right: calc(100% - 100px);
  transition: 5s;
}

示例：https://jsfiddle.net/gengns/et9dbpur/

您可以使用svg标记代替div，也可以在div背景图像中设置SVG。

B）如果您不想设置动画，只需简单地交换它们，就可以使用CSS Grid以声明的方式进行。

body {
  display: grid;
  grid-template-areas: 'one two';
}

body.swap {
  grid-template-areas: 'two one';
}

div {
  width: 100px;
  height: 100px;
}

#one {
  background-color: #39464e; 
  grid-area: one;
}

#two {
  background-color: #ff4f68;
  grid-area: two;
}

示例：https://jsfiddle.net/gengns/bsacypd8/

C）使用svg.js 2.7.1

SVG.on(document, 'DOMContentLoaded', function() {
  const draw = SVG('drawing')

  // Rectangles
  const rect_one = draw.rect(100, 100).attr({fill: '#39464e'})
  const rect_two = draw.rect(100, 100).attr({fill: '#ff4f68'}).move(500, 0)

  // Swap
  rect_one.animate().move(500, 0)
  rect_two.animate().move(0, 0).after(() => {
    // Swap again
    rect_one.animate().move(0, 0)
    rect_two.animate().move(500, 0)
  })
})

示例：https://jsfiddle.net/gengns/497j1z0a/

希望获得帮助：）

位置未通过动画更改

1 个答案: