1.5kb 代码让图片抖起来

提醒:本文最后更新于 3517 天前,文中所描述的信息可能已发生改变,请谨慎使用。

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

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

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

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

整个代码 gzip 后不超过 1.5kb,而且不依赖于任何 js 库(Chrome、Firefox、最新的 IE 都可以运行)。

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

关于这个 demo,我想多说几句:

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

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

编辑
取消
添加
删除
玩耍

本文链接:https://mailseason.com/post/shake-photo-in-little-js.html参与评论 »

--EOF--

提醒:本文最后更新于 3517 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「好玩的 HTML5」的其他文章 »

Comments