Рамка для создания образовательной анимации

Question

Много раз я узнал, что мне нужно программное обеспечение для создания простых обучающих анимаций. В этих анимациях я хочу нарисовать последовательность простых анимаций один за другим.

Например, я хотел бы показать, как работает алгоритм обратного отслеживания для проблемы n-queens. В этом случае я хочу нарисовать шахматную доску, нарисую королеву на верхнем левом квадрате, нарисую еще одну на квадрате рядом с ней, а затем вторую королеву, пока ей не грозит первая королева, затем добавьте третьей королевы и т. д. См. this page, например java-апплет.

Я попытался написать такие программы в случайных формах свободной визуализации, которые я нашел в Интернете, например. processing.org и различные обложки HTML-canvas, но главное, что я отсутствовал, - это объект, который показывал бы/направлял анимацию в соответствии с моими командами.

При обработке, например, если я создал объект с именем «королева», который должен быть нарисован на экране и двигаться, как это делает королева. Мне пришлось позаботиться о себе:

1. Отправка событий объекту королевы (если я хотел изменить его цвет, когда пользователь на него нависал, например).
2. Рисование объекта королевы на экране.

Так что я должен написать сам в основном цикле кода вида:

def mainloop(): 
    for obj in DrawableObjects: obj.draw() 
def onclick(e): 
    for obj in ResponsiveObjects: obj.handleClick(e) 

Это некрасиво и повторяющимся!

Я ожидаю, что рамки анимации позволят мне использовать объекты, которые автоматически нарисовались бы на экране (допустим, я определю для них ось z, чтобы разрешить пересечения), и автоматически, если бы я хотел, реагировать на взаимодействие пользователя. Пример кода для моей воображаемой рамки будет:

class queen(DrawableObject): 
    def __init__(self,boardX,boardY): 
     self.boardX,self.boardY = boardX,boardY 
     self.x = square_width*x+square_width/2 
     self.y = square_height*y+square_height/2 
    def draw(self): 
     circle(x,y,radius) 
    def move(self,direction_x,direction_y,squares): 
     if direction_x 
     #this would move the queen slowly to the desired direction 
     self.boardX += direction_x*squares 
     if self.boardX < 0: 
      self.boardX = 0 
      return 
     #ditto for y 
     ... 
     #Let's pretend this function is blocking 
     self.animated_transpose(
      direction_x*squares*square_width, 
      direction_y*squares*squre_height 
      ) 
    def delete(self): 
     self.fadeOut() 

Когда анимировать маток, я просто создать новую королеву и использовать функцию перемещения, чтобы переместить его вокруг, не слишком заботясь о том, когда и где блитирования Это. Эта структура должна позаботиться об этом для меня. То есть:

def main(): 
    queens = [] 
    for i in range(8): queens.append(Queen(0,i)) 
    # find a solution by stupid random walk 
    steps = 0 
    while queens_threats_one_another(queens): 
     queens[rand(8)].move(choose([-1,1],0,1) 
     step += 1 
    write_to_screen("did it with %d steps"%steps) 

Другие удобные функции от этой структуры, что было бы удобно для веб-поиска. То есть, javascript или flash или Java. И это было бы бесплатным.

Существует ли такая (или аналогичная) структура?

Answer 1

Поскольку архитектура дисплея Flash основана на объектах, похоже, что она очень хорошо подходит для такого рода вещей. Существует также множество анимационных библиотек для Flash, которые делают эту вещь очень простой.

Например, предположим, вы определили класс Queen, который расширил встроенный класс Sprite. Использование библиотеки TweenLite, код для создания и перемещения ферзя в течение 2-секундного периода времени будет выглядеть следующим образом:

var queen:Queen = new Queen(); 
queen.x = 100; // based on pixels, but you could easily create a square-to-pixel conversion 
queen.y = 100; 
addChild(queen); // assuming this code is in another DisplayObject, such as the stage 

TweenLite.to(queen, 2, {x:200, y:300});