Animation 使用Dart设置SVG元素的动画

我想使用Dart设置SVG元素的动画。这就是慢慢地将“dart:svg”包的矩形元素从一个y坐标移动到另一个y坐标。不幸的是，我找不到一个例子。我还尝试使用此处找到的动画包，但它似乎不适用于SVG元素。

您可以通过使用动画帧和更新y属性来实现这一点（请记住它是一个字符串）：

导入'dart:html'；
导入“dart:svg”；
导入“dart:async”；
直肠元素；
int pos=0；
int dest=300；
void main（）{
//获取对元素的引用
rect=查询（“#rect”）；
//启动动画
window.animationFrame.then（动画）；
}
无效动画（数值增量）{
//继续向下移动元素，直到到达目的地
如果（位置<目的地）{
pos+=2；
rect.attributes['y']=pos.toString（）；
//继续动画
window.animationFrame.then（动画）；
} 
}

---

编辑：根据Greg Lowe的建议，从计时器切换到动画帧

我意识到这个问题已经很老了，但是，几天前我在我的博客中提到了这个问题

这是使用pub包 这些步骤基本上是：

• 为要设置动画的svg元素创建访问器
• 创建一个

  TweenManager

• 然后（）调用tweenmanager的更新

---

我也为它创建了一个动画框架。

我建议将其更改为使用document.animationFrame。这允许平滑动画。根据您想要达到的效果，您可能也可以使用css动画。在chrome中，这允许动画脱离主线程渲染。@GregLowe感谢您的建议。回调需要num而取消需要int是否有任何原因？请尝试改用window.animationFrame。您需要在每个循环中显式地重新注册它，所以不需要取消，只需在完成后不重新注册即可。赛斯在这里有一个例子