Question

我想使用Dart为SVG元素设置动画。这是慢慢地将“dart：svg”包的RectElement从一个y坐标移动到另一个y坐标。不幸的是我找不到一个例子。我也尝试使用here中找到的动画包，但它似乎不适用于SVG元素。

Answer 1

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

import 'dart:html';
import 'dart:svg';
import 'dart:async';

RectElement rect;
int pos = 0;
int dest = 300;

void main() {
  // Get a reference to the element
  rect = query("#rect");
  // Start the animation
  window.animationFrame.then(animate);      
}

void animate(num delta) {
  // Keep moving the element down until we reach the destination
  if(pos < dest) {
    pos += 2;
    rect.attributes['y'] = pos.toString();
    // Continue the animation
    window.animationFrame.then(animate);
  } 
}

编辑：按照Greg Lowe的建议从定时器切换到动画帧

Answer 2

我知道这个问题已经过时了，但是，几天前我在我的博客中提到了wrote an example。

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

为您尝试制作动画的任何svg元素创建一个访问器
创建TweenManager
调用了tweenmanager的更新。

我也为它创建了gist。

使用Dart为SVG元素设置动画

2 个答案: