创建教育动画的框架答案

【问题标题】：A framework for creating educational animations创建教育动画的框架
【发布时间】：2010-11-10 03:41:00
【问题描述】：

很多时候我发现我需要一个软件来创建简单的教育动画。在这些动画中，我想一个一个地绘制一系列简单的动画。

例如，我想展示一个回溯算法如何解决 n 皇后问题。在这种情况下，我想画一个棋盘，在左上角的方格上画一个皇后，在它旁边的方格上再画一个，然后第二个皇后向下直到它没有受到第一个皇后的威胁，然后，添加第三皇后等。参见this page，例如 java 小程序。

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

例如，在处理过程中，如果我创建了一个名为“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()

在为皇后制作动画时，我将简单地创建一个新的皇后并使用移动功能来移动它，而不必过多担心何时何地进行blit。框架应该为我解决这个问题。那就是：

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。而且它是免费的。

是否存在这种（或类似的）框架？

【问题讨论】：

并不是您真正需要的框架，但也许像带有 JavaScript 的 SVG 动画之类的东西可以为 UI 解决问题。

标签： javascript flash animation frameworks canvas

【解决方案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});

【讨论】：