最近准备把博客迁移到香港的主机, 设计到数据迁移、域名变更等, 可能会有一段时间访问不了, 请各位过几天再访问, ^_^

———————————————————–

@2011-1-11 迁移完成, 撒花~~ 哈哈

话说上三回, 我们用css3的animation让png图片动起来了.

但是美中不足的是, 还要画一张图片. 如果要求做几个不同大小的菊花, 或者要换个颜色, 又或者要不同的地方用不同的颜色和大小的菊花, 得找到原图(psd之类的)再导出一个不同的size, 个人感觉蛋疼死了.

这次咱们用css3来画那几个点, 让它能大能小能色, 嘿嘿~~(邪恶了).

先看看效果吧, 用鼠标左键狠狠的砸这里.

菊花上有12个点, 我们用12个span标签来做, 宽高使用百分比, 用来自适应外层容器的变化, 圆角设置为100%,就可以保证显示成一个圆了.

接下来的事情就比较痛苦, 需要一个个摆到正确的位置. 但是为了以后的幸福生活哇, 咱也得硬着头皮的上是吧.

好在有了css3的选择器,我们也不用一个个给这些span起名字了,span:nth-child(1)就表示第一个span, nth-child的值是从1开始的,感觉有点怪异.

定位的话用绝对定位, 然后用负的margin把圆心偏移回去, 位置要自己算好, 具体可以看 demo.

css代码我就不贴全了,避免凑字数的嫌疑, 关键代码如下:

.loading{
    width: 50px;
    height: 50px;
}
.loading div{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-animation: auto-circle 1s linear infinite ;
    -moz-animation: auto-circle 1s linear infinite ;
}
.loading div span{
    display: block;
    background: #04AED9;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
}
.loading div span:nth-child(1){
    width: 18%;
    height: 18%;
    left: 50%;
    top: 0%;
    margin-left: -9%;
}
/* ... */

除了loading的外框, 全部值都是用百分比, 这样12个小点的大小和位置都能随着外框的大小改变而改变了, 连颜色都能随便改, 爽了吧.

后传:

某产品: 这个菊花改成16px的, 那个换成红色的.

苦逼代码男: 32px改成16px是吧, 蓝色换成红色是吧,  嗯, 改完了, 吃饭~~

某产品: …… 

上回说到用png图片来做帧动画, 总的来说也没什么大问题, 但是画个菊花, 按固定角度旋转N次做图实在是蛋疼.

既然怎么样都要画个菊花, 那不如就用canvas来画算了. 对于不支持canvas的浏览器, 可以用svg, 原理都差不多.

这个canvas动画的原理跟帧动画也类似, 先绘制第一帧的画面, 然后擦掉, 接着绘制第二帧, 以此循环. 时间间隔短的话看上去就变成动画了.

具体解释请看代码, 有足够的注释, 或者也可以点这里看看结果. canvas的api说明可以在这里找到.

window.onload = function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    if(!ctx){
        return;
    }
    ctx.clearRect(0,0,128,128);//擦除画布
    ctx.fillStyle = 'transparent';
    ctx.fillRect(0,0,128,128);
    ctx.fillStyle = 'black'; //定义点的颜色
    var base = 0;
    var update = function(){
        ctx.save(); //把当前的绘图状态保存起来(如旋转角度的初始位置, 填充颜色, 坐标原点等)
        ctx.clearRect(0,0,128,128);//擦除画布
        ctx.translate(64, 64);//把坐标原点移动到画布中央
        base = (++base === 13) ? (base - 12) : base;//使用base来指示最大的圆点所在的位置, 实现旋转动画的效果
        var angle = Math.PI / 6;//画12个点, 所以每个点之间的角度是 1/6 PI
        var beginAngle = angle * base ;
        for(var i = 1; i <= 12; i ++){
            ctx.beginPath();//开始一个路径
            if(i === 1){
                ctx.rotate(beginAngle);
            }else{
                ctx.rotate(angle);//每次调用rotate之后, 其旋转角度并不会还原, 而是接着上一次的位置
            }
            ctx.arc(0, -48, i * 0.8 + 1, 0, 2 * Math.PI, true);//绘制一个圆点
            ctx.closePath();//闭合路径
            //如果不是用beginPath和closePath, 在调用fill方法时, 会导致画布上的所有圆都重叠在一起了
            ctx.fill();//填充(使用上面最后定义的fillStyle)
        }
        ctx.restore();//还原绘图状态, 如果不还原, 则下一次调用rotate时会接着这次的位置旋转, 而不是初始位置
    }
    update();
    setInterval(update, 50);
};

菊花系列暂时就到这里了, 有时间再去用svg整个.

话说上回说到使用css3的animation来制止png格式的菊花, 但是目前之后新版的firefox和webkit核心浏览器才支持该动画, 那其他浏览器也想用png动画怎么办呢?

这就要提到帧动画的概念了, 会flash的都知道, adobe flash软件里有个时间轴和帧的概念, 具体解释我就不说了, 可以自己google.其原理是事先把一个动画的所有动作的话出来, 然后在不同的时间点显示不同的动作, 切换的快的话看上去就动起来了.

制作菊花, 要先准备一张包含所有菊花状态的图,就像下面这张:

用一个固定大小的窗口显示这张图, 定时移动图片的位置, 就能让它动起来了. 简单的代码如下:

setInterval(function(){
    var left = parseInt(imgEl.style.left || 0) - 128;
    if(left <= -1280){
        left = 0;
    }
    imgEl.style.left = left + 'px';
}, 50);

活生生血淋淋的实例在这里.

PS: 画这10帧的菊花帧蛋疼~~

Loading图, 也就是俗称的菊花, 大部分网站都会用到, 而一般情况用的都是gif动画, 但是gif能保存的颜色太少, 导致有渐变的图导出来后有毛边, 很不美观.

不过随着html5和css3的出炉, 我们终于可以把loading做的更加美观啦.

之前用png制作loading动画并不是没有, 但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样), 咱不熟ps, 画起来相当吃力.

而在html5/css3的带领下, 我们又有了两个新的方法: canvas和css动画.

但是我是相当讨厌用js代替css本身就可以实现的功能, 而且本人觉得在cavas上画图太累( 这不就是把ps搬到网页么…), 所以就把魔爪伸向了css3, 嘿嘿~~

Read More »

我们知道, css margin是会合并的, 有时会导致一些布局问题.

事实上margin还有存在一个溢出的问题: 当其父节点没设置宽高的时候, 子节点的margin超出父节点而存在, 会导致父节点的left/top产生了偏移, 导致position:absolute的节点定位不准确.

我们先看下面这个例子:
Read More »

周五在ubuntu上测了一下重构后的富文本, 发现依然存在一个bug: 开启了中文输入法的话, 输入框就监听不到按钮事件了.

这个问题在webqq的聊天框一直存在着, 也有很多用户投诉, 具体表现为: 切换到中文输入法(ibus or other), 输入一段内容后, 第一次按下回车键可以发送消息, 之后的回车键都变成输入框的换行了.

花了一个中午排查了下, 总算找到原因了:

在ubuntu上面, 切换到中文输入法的时候, 只有第一次按下的keydown/keyup事件会被抛出, 之后都keydown和keyup事件都会被输入法接收且不会冒泡, 因此输入框没办法对按钮作出响应. 这个行为跟用什么浏览器无关, 我在firefox和chrome都发现有这个问题. 如果你的系统是ubuntu, 可以点击这里测试.

幸运的是, 经过测试, 发现keypress能响应回车键(以及其他ctrl+v等没触发出中文输入法的键盘行为), 因此可以把监听回车事件的代码转移到keypress中, 解决掉这个存留已久的bug.

注意: opera的keypress事件是没有charCode的, 且keyCode与keydown/keyup事件的keyCode一致, 无语…

2011-6-6 更新: Read More »

一个游戏群里的同事提到一个Bug, 在他的页面里, 实际内容是超过了6000px的, 而且给包含内容的容器加了个border: 1px dotted #fff, 这时在chrome中就发现左右边框消失了!!!

如果你的是chrome, 点击这里查看demo. 这个问题相当诡异, 如下:

1. 改成2px, border出来了!

2. 改成solid, 又出来了!

3. 高度低于4096, 呃, 又出来了…不过还是少了一些点, 改成4095就很正常了…

暂时还没有找到解决办法, chrome处理超过2的40次方之后的数字溢出了, chromium的项目里已经看到有人提了bug, 但是到目前为止(chrome 12.0.733.0)依然如此. 也许某天google大神心情好了, 会fix它吧. ╮(╯_╰)╭