Posts tagged with Animation


一、不堪回首的过往

在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外,还有个让人比较困惑的 steps() 函数。在许多相关文章里,关于这个函数的解释都比较含糊其辞,比如:

steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。

又如:

steps 有两个参数

  1. 第一个肯定是分几步执行完
  2. 第二个有两个值
    1. start 第一帧是第一步动画结束
    2. end 第一帧是第一步动画开始

年少无知的我轻易就相信了大家的说法,每次应用 steps() 函数时都要先考虑一番:嗯,start 对应末态,end 对应初态,末态是 OOOO,初态是 XXXX……卧槽!跑起来不对!

...

最近在考虑用 DOM 实现 2D 游戏基本动作,其中需要实现精灵(sprite)的行走,跳跃等动作,因为 Canvas 才刚开始学习,于是便想用 CSS3 来实现这个动作。

首先从 dribbble 上找来某位大师的作品:

作为 2D 游戏,要响应键盘的动作就肯定不能直接使用 Gif 图了,于是在 Photoshop 中打开这张图,提取出所有帧:

...