最近笔者在项目中遇到了 emoji 表情的处理,期间发现 js 处理多字节字符时会有较多坑,记录一下与各位分享。
本文涉及知识点:
Unicode (BMP/SP)
UTF-8 UTF-16 UTF-32 UCS-2
javascript 字符处理
如上图所见,本文就是要实现上面那种效果。
由于最近 AlloyTouch 要写一个下拉刷新的酷炫 loading 效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用 Canvas 绘制矢量图和图片素材合成出波浪特效。
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch 可以把惯性运动打开或者关闭,并且设置 min 和 max 为运动区域,超出会自动回弹。
除了一般的竖向滚动,AlloyTouch 也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以 AlloyTouch 制作各种各样的轮播组件还是得心应手。
Github 地址:https://github.com/AlloyTeam/AlloyTouch
AlloyTouch 的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景。如王者荣耀里,旋转用户角色,抽奖程序滚动转盘、页面滚动、局部滚动等。
最近笔者在项目中遇到了 emoji 表情的处理,期间发现 js 处理多字节字符时会有较多坑,记录一下与各位分享。
本文涉及知识点:
Unicode (BMP/SP)
UTF-8 UTF-16 UTF-32 UCS-2
javascript 字符处理
最近在 Alloyteam Conf 2016 分享了《使用 RxJS 构建流式前端应用》,会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类: 有用过的都表达了 RxJS 带来的优雅编码体验,未用过的则反馈太难入门。所以,这里将结合自己对 RxJS 理解,通过 RxJS 的实现原理、基础实现及实例来一步步分析,提供 RxJS 较为全面的指引,感受下使用 RxJS 编码是怎样的体验。
记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示:
facebook 当时使用的是 createjs 下的子项目 easeljs 和 tweenjs 去制作,基于 Canvas 的动画。基本的原理主要是:循环运动 Canvas 抽象的 DisplayObject 的 skewX 和 scaleY 来实现软体摇摆。
目前来看 transformjs 也能做到,因为 transformjs 也能运动 skewX 和 scaleY。先来看看 facebook 的方式。
在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动 web 开发的时候,都使用了 transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然 transformjs 不仅仅支持移动设备,支持 CSS3 3D Transforms 的浏览器都能正常使用 transformjs)
官方网站:http://alloyteam.github.io/AlloyTouch/transformjs/
Github 地址:https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
裁剪图片的应用场景有头像编辑、图像编辑,在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。AlloyCrop 就是专注于裁剪图像的组件,目前服务于 QQ 相关的 Web 业务,今日正式对外开源。
Github 地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop