HTML5 中对于 SVG 的引入极大的丰富了 Web 页面的表现力，而且，SVG 本身就支持动画。通过使用 <animate/> 或者 <animateTransform/> 元素可以让 SVG 元素产生动画，还有更加高端的 <animateMotion/> 可以产生沿着路径移动的动画。 但是在实际的使用中发现，SVG 的动画帧率比较低，甚至存在直观上能够感受到的卡顿现象，尤其是在移动设备上查看的时候。如何能够让 SVG 的动画也达到丝般…
2 Comments月度归档： 2015年8月
随着智能手机的普及，大家对于各种即时通信工具也是越来越依赖了。那么 Emoji 这个东西也被越来越广泛的采用。Emoji 是日本人发明的，表示 “picture(e)” + “character(moji)”。在 2010 年 Unicode 6.0 版本发布的时候，已经纳入了几百个 Emoji 字符。Emoji 字符在 UTF-8 编码体系中，是使用 4 个字节来编码的。所以，对于编码设定为 UTF-8 的 MySQL 数据库…
1 Comment如果是准们为移动设备编写的 Web 页面，可以充分利用 CSS3 来完成页面动画效果，非常流畅。 比如说，我要在页面上以动画效果让一个元素向右移动 300 像素，那么可以使用两种不同的方式来实现： 1. 让元素是绝对定位的，然后修改元素的 left 属性从当前位置到加 300 像素 2. 修改元素的 transform 属性，设置为 translateX(300px) 那么这两种方式在实际的运行效果上，是有差异的。 我们使用一台中兴 X9180 + Android 4.4.2…
1 Comment模拟 iOS 日期时间选择器的拨轮效果图： 在线Demo： http://demo.ijuer.com/spinner.html，可用手机浏览器或者 PC 上得 Chrome 浏览器模拟查看。 点击下载源码 JS 代码： /** * 模拟 iOS 日期时间选择器的拨轮。但是没有 3D 卷曲效果 * @param {DOMElement} spinnerLayerElement 具有 .spinner-layer 类的一个 DIV 元素 * @param {Array} slo…
Leave a Comment在 HTML5 中，要搞出来一段弧线，有 2 中方式：使用 Canvas 的 arcTo 或者使用 SVG 的 path 元素。这两者都有 ArcTo 的概念，但是他们之中的 ArcTo 的差异还是很大的。 Canvas arcTo 函数 在 Canvas 中，arcTo 是最容易引起误解的一个函数，因为他的名字、参数以及输出完全不符合常规逻辑。但是一旦你理解了，就能够很准确的使用这个函数了。 下面是一个交互演示，让我们来认识一下 Canvas 中的 arcTo 函数是如何工…
4 Comments