Animate a SVG Element with Dart

Question

I'd like to animate a SVG Element using Dart. That is slowly moving a RectElement of the "dart:svg" package from one y-coordinate to another. Unfortunately I couldn't find an example. I also tried to use the animation package found here here but it seems not to work with SVG elements.

Pixel Elephant · Accepted Answer · 2013-05-26T17:48:02.870

3

You can achieve this by using animation frames and updating the y attribute (keeping in mind that it is a string):

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);
  } 
}

Edit: Switched from timers to animation frames as per Greg Lowe's suggestion

edited May 26 '13 at 17:48

answered May 23 '13 at 20:52

Pixel Elephant

20,649
9
66
83

3

I recommend changing this to use document.animationFrame http://api.dartlang.org/docs/releases/latest/dart_html/Window.html#animationFrame. This allows for smooth animation. Depending on the effect you want to achieve you can probably use css animations too. In chrome this allows the animation to be rendered off the main thread. – Greg Lowe May 23 '13 at 22:48
@GregLowe Thanks for the suggestion. Is there any reason that the callback requires a num while canceling requires an int? – Pixel Elephant May 23 '13 at 23:50
2

Try using window.animationFrame instead. You need to explicitly re-register it on each loop, so no need to cancel, just don't re-register when you're done. Seth has an example here http://stackoverflow.com/questions/15753170/how-do-i-drive-an-animation-loop-at-60fps-with-dart – Greg Lowe May 24 '13 at 02:12

score 1 · Answer 2 · answered Aug 12 '14 at 20:14

I realize this question is old, however, some days ago I wrote an example about it in my blog.

This is using the pub package tweenengine The steps are basically:

Creating an accessor for whatever svg element you are trying to animate
create a TweenManager
on your window.animation.then() call the tweenmanager's update.

I did create a gist for it as well.

Animate a SVG Element with Dart

2 Answers2