话说上回说到使用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 »