animation - 使用 Dart 为 SVG 元素设置动画

Question

我想使用 Dart 为 SVG 元素设置动画。那是慢慢地将“dart:svg”包的 RectElement 从一个 y 坐标移动到另一个。不幸的是，我找不到一个例子。我也尝试使用此处找到的动画包，但它似乎不适用于 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

我意识到这个问题很老，但是，几天前我在我的博客中写了一个关于它的例子。

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

• 为您尝试制作动画的任何 svg 元素创建访问器
• 创建一个TweenManager
• 在你的 window.animation.then() 调用补间管理器的更新。

我也为它创建了一个要点。