适合初学者学习的CSS3实现招人喜欢的动物

发布时间：09/01 来源：未知浏览：关键词：

给动物增加动画特效

CSS关键帧不克不及为我们供给一种利便的排序和组合动画的办法。解决这个问题的最好办法是将动画方案（故事板）作为时间轴，并使用预处置器，如Sass，生成关键帧。

例如狐狸，在概述每个动画应发生的故事板之后，转换和绝对时间偏移（秒）被用于对每个身体部分停止动画处置。以下是SCSS中对狐狸鼻子停止概述的一个例子：

$animations: (
  // ...
  'nose': (
    // resting position
    (4s, 5s, 7s): rotateY(-4deg),
    // nose down
    4.5s: rotateY(-4deg) rotateX(-3deg),
    // fox looks left
    (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg),
    // fox looks right
    (9.5s, 12s): rotateY(7deg),
    // fox looks straight ahead
    13s: rotateY(0),
  ),
  // ...
);

在这里，$animations是一类Sass map，其中键是动画的名称（例如“nose”）。每个动画名称的值是另一个map，其中键是以秒为单位的偏移或偏移列表（例如(7.5s,9s)），并且值是每个偏移键的transform属性。

那么，我们如何把这个map变成@keyframe动画呢？第一，设定全局的$duration: 17s变量——这将是每个动画的总连续时间。然后，使用嵌套的Sass @each ... in ... 轮回，我们可以通过对$animations map轮回为每个动画生成预测的CSS @keyframe声明：

@each $animation-name, $animation in $animations {
  // keyframe declaration
  @keyframes #{$animation-name} {
    @each $offsets, $transform in $animation {
      @each $offset in $offsets {
        // offset declaration block    
        #{percentage($offset / $duration)} {
          // transform property
          transform: #{$transform};
        }
      }
    }
  }
}

这将生成如下所示的关键帧：

@keyframes nose {
  14.70588% {
    transform: rotateY(-4deg); }
  23.52941% {
    transform: rotateY(-4deg); }
  29.41176% {
    transform: rotateY(-4deg); }
  41.17647% {
    transform: rotateY(-4deg); }
  26.47059% {
    transform: rotateY(-4deg) rotateX(-3deg); }
  44.11765% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  52.94118% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  55.88235% {
    transform: rotateY(7deg); }
  70.58824% {
    transform: rotateY(7deg); }
  76.47059% {
    transform: rotateY(0); } }

在不使用SCSS的状况下，这些百分比的运算大概非常繁琐。它们代表动画的每个步骤中每个所需时间值相关于总$duration的百分比偏移量。

然后可以将动画利用于它们各自的身体部位，例如animation: nose $duration none infinite;。每个动画的连续时间都得是一样的，这样它们可以无缝轮回。

逼真的Easing Curves

制作动画的另一个重要组成部分是看上去要逼真，所以要为动画的每个部分细心选中（或创立）Easing Curves。最为生动的Easing Curves是“正弦曲线”——换句话说，是平滑起伏的Easing Curves。这样一来，天然动作就不会生硬地起动或休止，animation-timing-function应当能反映出来。

关于狐狸和哈士奇，我使用cubic-bezier(0.645, 0.045, 0.355, 1)（在这里预览）。此曲线（见下文）开端略快，然后平稳地停住。当然，最好试验曲线以寻到最适合动画的那种。