Анимировать элемент SVG с помощью дротика

Question

Я хотел бы анимировать элемент SVG с помощью Dart. Это медленно перемещает RectElement пакета «dart: svg» из одной координаты y в другую. К сожалению, я не смог найти пример. Я также попытался использовать пакет анимации, найденный здесь here, но, похоже, он не работает с элементами SVG.

Answer 1

Вы можете добиться этого с помощью кадров анимации и обновления атрибутов у (имея в виду, что это строка):

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 из таймеров кадров анимации согласно предложению Грега Лоу

Answer 2

Я понимаю, что этот вопрос старый, однако, несколько дней назад я wrote an example об этом в своем блоге.

Это использует пакет паб tweenengine шаги в основном:

• Создание аксессора для любого элемента SVG вы пытаетесь оживить
• создать TweenManager
• на вашем window.animation. затем() вызовите обновление tweenmanager.

Я также создал для него gist.