你的位置:首页 > 网页设计

[网页设计]定格动画


定格动画

用你的鼠标摸他,他就不可能不动!!

 

这就是定格动画,只播放关键帧。就像以前的老电影一样,只有一张张底片,然后灯光打在底片上,移动底片,动画的感觉就会出来。

别问我排版为什么这么丑

其中用到的关键词是steps()和精灵

比如:

element{
  background: url() no-repeat; //the-source-of-picture
  animation: spirit-animation 4s steps(9);
}
@keyframes{
  from{
    background-position: ;//the-start-of-picture
  }
  to{
    background-position: ;//the-end-of-picture
  }
}

这个动画会在4秒种播放第一个关键帧和后面的9个关键帧。

下面说一下关键帧。当你在玩LOL(league of legends)的时候,你电脑显卡配置又脱离了年代,你可能会抱怨说,他妈的在放幻灯片。这一张张的幻灯片就是关键帧了。当一定的时间内数量够大的时候,你就感觉不出是在放幻灯片(人眼中光停留的时间是xx秒,当下一个光在上一束停留时进入眼中,你就不会感觉到卡顿)。

我们平时用的animation默认是补间动画。

那问题来了,什么又是补间动画呢。这就得抱怨下取名词的专家了,一大堆简写的名词,完全抠不动。

补间动画,英文tween animation、shape animation,上一个画面平滑过渡到下一个画面,在其间我可以截任意时刻的画面。关键帧就办不到了,他只有设定的那么多画面。

那么精灵呢?

一个对象一组动作的集合。

that`s all.