Press "Enter" to skip to content

月度归档: 2015年8月

SVG 中的平滑动画

HTML5 中对于 SVG 的引入极大的丰富了 Web 页面的表现力,而且,SVG 本身就支持动画。通过使用 <animate/> 或者 <animateTransform/> 元素可以让 SVG 元素产生动画,还有更加高端的 <animateMotion/> 可以产生沿着路径移动的动画。 但是在实际的使用中发现,SVG 的动画帧率比较低,甚至存在直观上能够感受到的卡顿现象,尤其是在移动设备上查看的时候。如何能够让 SVG 的动画也达到丝般…

2 Comments

让 MySQL 支持表情字符 Emoji

随着智能手机的普及,大家对于各种即时通信工具也是越来越依赖了。那么 Emoji 这个东西也被越来越广泛的采用。Emoji 是日本人发明的,表示 “picture(e)” + “character(moji)”。在 2010 年 Unicode 6.0 版本发布的时候,已经纳入了几百个 Emoji 字符。Emoji 字符在 UTF-8 编码体系中,是使用 4 个字节来编码的。所以,对于编码设定为 UTF-8 的 MySQL 数据库…

1 Comment

移动 Web 页面的流畅动画

如果是准们为移动设备编写的 Web 页面,可以充分利用 CSS3 来完成页面动画效果,非常流畅。 比如说,我要在页面上以动画效果让一个元素向右移动 300 像素,那么可以使用两种不同的方式来实现: 1. 让元素是绝对定位的,然后修改元素的 left 属性从当前位置到加 300 像素 2. 修改元素的 transform 属性,设置为 translateX(300px) 那么这两种方式在实际的运行效果上,是有差异的。 我们使用一台中兴 X9180 + Android 4.4.2…

1 Comment

模拟 iOS 日期时间选择器的拨轮

模拟 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 中的 Canvas arcTo vs SVG ArcTo

在 HTML5 中,要搞出来一段弧线,有 2 中方式:使用 Canvas 的 arcTo 或者使用 SVG 的 path 元素。这两者都有 ArcTo 的概念,但是他们之中的 ArcTo 的差异还是很大的。 Canvas arcTo 函数 在 Canvas 中,arcTo 是最容易引起误解的一个函数,因为他的名字、参数以及输出完全不符合常规逻辑。但是一旦你理解了,就能够很准确的使用这个函数了。 下面是一个交互演示,让我们来认识一下 Canvas 中的 arcTo 函数是如何工…

4 Comments