定格动画

Posted 2020-08-05

定格动画

用你的鼠标摸他，他就不可能不动！！

 

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

别问我排版为什么这么丑

其中用到的关键词是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.