Question

我多次发现我需要一个软件来创建简单的教育动画。在那些动画中，我想逐个绘制一系列简单的动画。

例如，我想展示一个n-queens问题的回溯算法是如何工作的。在那种情况下，我想画一个棋盘，在左上方的广场上画一个女王，在它旁边的广场上画另一个，然后第二个女王下来直到它不受第一个女王的威胁，然后，添加第三位女王等。请参阅this page，例如java applet。

我试图在网上找到的休闲免费可视化框架中编写这类程序，例如： processing.org和各种HTML-canvas包装器，但我遗漏的主要是一个根据我的命令显示/指导动画的对象。

例如，在处理过程中，如果我创建了一个名为“queen”的对象，该对象应该被绘制到屏幕上并像女王一样移动。我必须自己照顾：

将事件调度到queen对象（例如，如果我希望在用户将鼠标悬停在其上时更改其颜色）。
将女王物体画到屏幕上。

所以我必须在主循环中编写一个表单代码：

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动画库可以让这种事情变得非常简单。

例如 - 假设您定义了一个扩展内置Sprite类的Queen类。使用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});

用于创建教育动画的框架

1 个答案: