这是一个创建于 880 天前的主题，其中的信息可能已经有所发展或是发生改变。
从阮一峰的周刊( https://www.ruanyifeng.com/blog/2022/02/weekly-issue-195.html )中，发现了这个帖子：GPS 工作原理 ( https://pages.longtian.info/gps/ )
这个帖子就是一个教程，但与一般科普文不同的是，它是交互式的。用户可以操作里面的元素，观察效果。
之前也看到过这样的交互式课程，( https://www.v2ex.com/t/796494 )，尤其是「信任的进化」，虽然内容忘得差不多了，但它的交互形式让我印象深刻。
感觉这种形式的教程，表达能力非常强，不仅相对于图文，甚至相对于视频都更进了一步。在教学、科普、演讲方面应该是比较有优势的。
除开纯编程的形式，有其他合适的工具来制作这种教程吗？毕竟这种教程里面的交互，并没有复杂到应用程序那种程度，用户的交互形式也基本比较简单(点击、拖拽)，夹杂在图文里面。从形式上来说，其实与 App 的原型比较类似。
我是没有发现太合适的工具来制作它们，感觉最接近的也就是「 Origami Studio 」这款 App 原型工具了，它的理念非常棒，但感觉它自身的定位就是做 UI 原型，而扩展性很差。另一个「 cables.gl 」，偏重 3D 渲染，在交互和状态管理方面与 Origami Studio 相比差很多。
关于这个问题，我的思考是，
- 应该用制作 App/Web 原型的思路，即 state-driven ，来制作这样的教程的主体部分，包括各个页面，页面内的各种状态；
- 同时允许类似于 Origami Studio 这样的 data-driven 的方式，为教程的局部，提供响应式的交互，data-driven 的各个模块，应该支持用户编程实现。
但符合这 2 点要求的工具好像还没有。大家有这方面的经验或思路可以分享一下吗？
 |
1
delectate 2022-06-28 13:26:44 +08:00  1
这个是抄的，原作是这个：
https://ciechanow.ski/archives/ https://ciechanow.ski/gps/ 建议科学上网打开。 我记得 v 站有人分析过，就是纯手撸的，没有用工具…… |
 |
3
SingeeKing 2022-06-28 13:48:32 +08:00
相信我真的是纯手撸
|
 |
4
zhixiao 2022-06-28 14:04:25 +08:00 1
|
 |
5
xiyuesaves 2022-06-28 14:06:44 +08:00
回形针这个团队我不说什么，但是他们这个项目应该符合你这个想法
https://jibencaozuo.com/zh-Hans/ |
 |
6
sillydaddy OP @zhixiao #4
感谢，通过你发的链接又发现了一个「机械手表原理」的教程( https://ciechanow.ski/mechanical-watch/ )。 exactly 我想要的效果！！ @delectate @SingeeKing @Zoopen 纯手工制作是可以，不过我总感觉用工具来比较好一些。 |
|
7
sillydaddy OP @xiyuesaves
嗯，他们团队给这种形式的课程起的名字叫「交互式视频」，他们制作课程的交互复杂度更高。 |
|
8
sillydaddy OP @delectate #1
感谢，原来这个作者写了这么多教程，看起来应该积累了一套代码模版，也就不需要啥工具了😂 |
 |
9
codermagefox 2022-06-28 20:04:13 +08:00
之前也想做一套这种东西,后来发现成本实在太高了...特别是信任的进化那个,可以看看,工作量其实很大.
就一个交互式视频来说,确实比较难搞了. |
 |
10
thetbw 2022-06-29 17:50:59 +08:00
主要是展示本身，应该就类似一个小游戏吧
|
|
11
sillydaddy OP @codermagefox
可以看下楼上提到的 Ciechanowski 讲 GPS 的教程，看了下源码大概 10000 行。感觉像是纯手写的，看不太出来有用工具的痕迹——说是呕心沥血之作也不为过。 😂 所以有一个称手的工具还是必须的。 |
|
12
codermagefox 2022-06-30 16:24:21 +08:00
@sillydaddy 嗯.其实用 GSAP/PIXI 来做可以大幅减少工作量的,但是也不轻松,工作量还是很大.只能说是真爱了
|
Select Language