博客

使用阅读器的同学请点击此处查看本文！

又有很长一段时间没更新博客。倒不是因为没啥可写，而是最近做的一些研究要么跟公司项目密切相关；要么不是三言两语能说清楚，所以更多时候直接就内部分享了。

后续我会尽量找一些跟业务没直接关系的内容更新上来。当然你也可以选择加入我所在的团队，一起做一些有意义的东西^_^

今天给大家分享的是最近做的一个小东西的局部：利用少量 js 代码让图片抖动起来。原理很简单：利用 Canvas Context 的 getImageData 和 putImageData 两个方法来获取/更新画布上每一个像素；抖动是利用椭圆圆心偏移和映射实现的。你可以想象先把椭圆的圆心挪个位置，再把椭圆原来每条半径上每一个点都映射到新半径上就可以了。

整个代码 gzip 后不超过 1.5kb，而且不依赖于任何 js 库（请使用 webkit 来浏览本页面
，我没管兼容性，其他浏览器应该什么都看不到）。

如果小猫不动了就刷新下页面。这个 demo 加了运动衰减系数，过会儿就停了~

关于这个 demo，我想多说几句：

1. Canvas 在移动设备上的性能真是弱爆了。一开始这个 demo 在大部分手机上 FPS 超不过 10，后来@月影大牛把核心算法由代数运算改成了向量运算，才能在大部分手机上流畅运行；
2. 学好数学很重要，原因见 1；
3. Web Worker 和 WebGL 两者在移动端上的糟糕支持度，暂时是想都不用想了；
4. 在 iOS 的 webview 中，这个 demo 非常卡。这是因为 Apple 之前不把比较好的 JS 引擎给第三方用，当然 iOS8 开始就没这个问题了。换句话说，对于 iOS8-，任何第三方浏览器都不如系统自带 Safari；

最后，放一个支持编辑的版本供大家娱乐下（左右两位是我现任老大，中间是大牛前辈），手机用户请点开这个链接。（附送福利）

本文链接：https://www.imququ.com/post/shake_photo_in_little_js.html

--EOF--

推荐：领略前端技术 阅读奇舞周刊

0

   


0

由 udpwork.com 聚合
|
评论: 0
|
要! 要! 即刻! Now!