有个类似动画展示的需求。请教一下怎么实现

以前看见一个演示 IP 协议的动画。像工厂集装箱一样一层层演示了 IP 通信过程的封装接包这些。非常直观。印象深刻。

现在有类似需求演示一些 IT 模型工具。

比如基础的模拟对数组进行原地排（升）序的讲解。可以假设这样的动画场景。

场景:
桌子上有十个一次性纸杯。杯子内侧底部分别写上 0 1 2 3...9 。然后倒扣过去随机打乱后排成一排。选一端为起始端标记为绿色。

可用资源:
一个简单不带记忆功能的智能机器人。可以听得懂人说的任何话。但是只有一个红绿灯反馈。这个机器有两个功能。每个功能触发一次消耗一点能量。
1.每次翻转两个杯子。并自动识别并比较两个数字的大小。再翻回去。如果靠近绿色的端的杯子里面数字更大。那么亮红灯。否则亮绿灯。（机器自己不理解但是知道是红灯还是绿灯）
2.交换任意两个杯子的位置。

题目:
人看不到摸不着杯子。但是可以通过告诉机器来干嘛来操作杯子。并且也能看到机器的红灯绿灯。那么如何尽可能少的消耗机器的能量。使杯子按里面的数字升序排列（从有标记的绿色端开始）

这个场景的目的并不是研究人用什么语言什么算法。
而是希望用机器的操作动画演示出来每一种算法的详细执行步骤以及总能量消耗（数组长度不多的情况下）。
所以只用展示机器的动作以及杯子的情况就可以了。人跟机器的互动不用。

因为动画方面完全没概念。所以问下这种动画怎么尽量低成本制作。（都是这累动画，不考虑美观之类）
如果自己学习的话，学习什么软件，预计时间如何。
如果外包的话，上面说的这个场景要多久时间。成本多少。

必须是电脑或者手机不用装额外软件就能直接打开的。视频浏览器直接打开等。