frame

【疯狂的菊花系列】用CSS3帧动画实现Loading

一直以来, 本人都认为css3的animation只能实现渐变动画, 比如高度从0渐变到100px这类的. 而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果.

但是在看到天才的师姐给的例子之后, 让我愧疚得无地自容, 原来还真有css3帧动画的, T_T. 这个属性是 timing-function: step-end; 而且firefox,webkit,ie10都有支持, 详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看.

跟帧动画有关的timing-function有step-start, step-end, 就那step-end来说, 它的效果是在每一步的结束点, 进行跳变.

比如下面的代码, 这个动画有两步, 如果是用linear方式渐变, 那么在动画的执行过程中, background-position-x的值将从0一直递减到-100%, 你看到的效果就是: 背景图片一直在慢慢的向右(注意, 是向右)移动; 而如果用step-end方式, 则可以看到背景是突然变成 background-position-x: -100%处的. 继续阅读…

【疯狂的菊花系列】制作PNG帧动画Loading

话说上回说到使用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帧的菊花相当的蛋疼~~

 返回顶部