animation - Dart で SVG 要素をアニメーション化する

Question

Dart を使用して SVG 要素をアニメーション化したいと思います。これは、「dart:svg」パッケージの RectElement をある y 座標から別の 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() で tweenmanager の更新を呼び出します。

そのための要点も作成しました。