1.5kb 代码让图片抖起来

  • Post author:
  • Post category:IT
  • Post comments:0评论

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

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

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

今天给大家分享的是最近做的一个小东西的局部:利用少量 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--

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

发表评论