关于绘画 App 画完一幅画后能够重新播放整个绘画的过程

[arden]

最近在 AppStore 上看到一个叫 涂手 的 App ，玩了一下感觉蛮有意思的，很想了解下这个 App 的一个技术问题，就是当自己画玩一幅画发布出去之后，这个平台可以让大家能够播放别人在画这幅画的整个流程，也就是能够自动播放这幅画的绘画流程，不知道这个技术是如何实现的，有人了解这个技术点吗？

[manhere]

十年前 Discuz 论坛就有涂鸦回复功能了，基于 flash ，
基本就是 @ibireme 说的原理。

[sablib]

刚好实现过…

[arden]

@sablib 能介绍下实现原理和方法吗？

[sablib]

@arden 手指在屏幕上移动的时候记录坐标 xy ，以及 duration 。
最后所有的数据都拿到之后用 cashapelayer 的 path 根据 duration 做动画。最后同步效果还挺好的。
当然我是 iOS 所以是说的这样。

[arden]

@sablib xy 我能理解，可是 duration 这个东西怎么记录？上一次 xy 到下一次 xy 的间隔时间？

[sablib]

@arden 对，你可以只记录一下当前时间最后再来算这个 duration 。或者在这里就把 duration 记录下来。
如果要把画的时候的速度体现出来的话，这个 duration 是必须的。
最后重现的时候是要根据这个来画的。我是用了 cakeyframeanimation 来做，当然动画的时候是一次对一笔做动画。

[arden]

@sablib 那意思就是说 xy-xy 的记录，越频繁，间隔时间越短，就越逼真了？

[stackboom]

1.贝塞尔曲线
2.把点记录成一条 Json 字符串
3.浏览器 Canvas 绘图

[sablib]

@arden 最后那个 path 肯定不能直接把那些点连起来这样，不然的话画的稍微快一些就都变成折线了。

[karnaugh]

感觉跟魔兽争霸和 Dota2 的录像机制一样.一场 40 多分钟的录像文件只需要几个 MB.

[zoezoe]

这个怎么样？
http://www.alimaku.com/spin/view/640

[codeyung]

mark

[arden]

@zoezoe 分析过他们的技术了，这个不是通过录制来实现的。应该是通过 @sablib 提的方案。

[arden]

@sablib 我刚抓了一下涂手 App 在 iphone 和 android 上的数据包，他们在重放的时候调用了
http://resource.toshow.com/work/json/1457424788!9qaILd1wlE5XI6x2ANNsf6oVb1ItWot5.txt
这个地址获得数据，然后根据这个内容再重放的，可是这个文件打开的全都是一些看不懂的字符串。

[sablib]

@arden 对数据做了加密吧。

[arden]

@sablib 有这种可能，可是为什么 ios/android 请求的时候已经加密了，但是手机浏览器请求的时候得到的还是用的 json 明文数据。