TheBestXT.cc

Appearance

0%

CSS 动画 第三部分：动画状态、时间曲线 ​

实在是太费劲了，从这开始就记录代码和翻译了。

目录 ​

动画的播放和停止 ​

另外一个很重要的动画属性是 animation-play-state。你可以用它来暂停动画，并且可以稍后在相同位置继续播放。

这个属性有两个属性值：running 和 paused。顾名思义，paused 可以暂停一个动画，running 可以让动画开始或恢复播放。这个属性的默认值是 running。

我们来创建一个动画，并控制它的播放状态吧。

目标 ​

  • 创建一个动画 move，to 关键帧：left: 400px;

  • 将动画分配给 .robot

  • 创建一个 .robot-paused，可以用来暂停动画。

类 robot-paused 会在点击机器人的时候添加到对应元素上。尝试点击正在动的机器人。

代码 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Stopping and starting an animation: animation-play-state</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch4.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="technologic">
    <div class="belt">
      <span class="robot warrior"></span>
    </div>
    <div class="belt">
      <span class="robot constructor"></span>
    </div>
  </body>
</html>
css
.robot {
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-name: move;
}

@keyframes move {
  to {
    left: 400px;  
  }
}

.robot-paused {
  animation-play-state: paused;  
}

动画时间曲线，其一 ​

最重要的动画属性是 animation-timing-function，它定义了动画的速度和加速度。

在之前的例子中，动画都是匀速播放，我们只改变了他们的持续时间，没有改变它们的 形式。默认情况下，动画形式会先显示动画的第一个画面，动画缓慢开始，然后加速，接近结束的时候再减速。

上面描述的就是默认值 ease 规定的动画形式的播放方式。

alt text

另外一个值是 linear。我们可以使用 linear 来让动画匀速播放，没有加速或减速。它的运动曲线是

alt text

目标 ​

给两个机器人 .robot 设置 linear。

代码 ​

css
animation-timing-function: linear;

动画时间曲线，其二 ​

还有另外三个动画形式：ease-in、ease-out、ease-in-out。

ease-in alt text

ease-out alt text

ease-in-out alt text

目标 ​

依次给第二个机器人 .constructor 分配动画形式：

  • ease-in

  • ease-out

  • ease-in-out

代码 ​

css
.constructor {
  animation-timing-function: ease-in;  
  animation-timing-function: ease-out;  
  animation-timing-function: ease-in-out;  
}

动画时间曲线，其三 ​

那么，linear、ease 和其它时间曲线的名字背后隐藏着什么呢？那就是三次贝塞尔曲线。

本质上，ease-in、ease-out 都是通用曲线描述的别名，例如：

cubic-bezier(0, 0, 1, 1)    // 这是 `linear`
cubic-bezier(0.42, 0, 1, 1) // 这是 ease

在三次贝塞尔曲线 cubic-bezier(x1, y1, x2, y2) 中，x 和 y 的值是图表上曲线点的坐标。有效的 x 值在 0 到 1 的范围内。

你可以用 这个工具 来学习贝塞尔曲线，不需要任何数学的书籍。

点此链接，您将找到基于贝塞尔曲线的各种缓动函数的完整集合。

我们可以通过贝塞尔曲线创建任何形式的动画！

目标 ​

  • 为机器人 .robot 添加一个动画 cubic-bezier(0, 0, 1, 1)

  • 只给 .constructor 添加 cubic-bezier(0.785, 0.135, 0.15, 0.86)

  • 替换成 cubic-bezier(0.175, 0.885, 0.32, 1)

代码 ​

css
.robot {
  animation-name: move;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 0, 1, 1);
}

.constructor {
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}

动画的时间曲线，其四 ​

animation-timing-function 还有个值：steps。

你可以设定动画的 步数。它的语法是：

css
animation-timing-function: steps(steps_number, direction);

很简单，步数是一个整数，表示动画到达终点所需的步数；direction 是 start 或 end。

如果使用 start，第一步与动画同时开始；如果使用 end，最后一步和动画同时结束。也就是说 start 让动画稍微向前，end 让动画稍微向后。

代码 ​

css
.constructor {
  animation-timing-function: steps(5, start);
  animation-timing-function: steps(5, end);
}

火箭发射，第一步 ​

好吧，现在您对动画的了解已经足够了，可以大胆地进入太空了。

但首先，让我们打开点火开关！

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Rocket to the launch pad, step 1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch5.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="cosmic">
    <div class="earth">
      <div class="rocket departure">
        <span class="fuel"></span>
      </div>
    </div>
  </body>
</html>
css
@keyframes fire {
  to {
    opacity: 1;
  }  
}

.fuel {
  animation-name: fire;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

火箭发射，第二步 ​

火焰从火箭喷嘴喷出，我们准备起飞。地球很快就会变成天空中的一个点。 我们走吧！

css
@keyframes fly {
  to {
    transform: rotate(40deg) translate(0px, -500px);
  }  
}

.rocket {
  animation-name: fly;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

示例 ​

着陆，第一步 ​

我们的太空之旅转眼间就过去了。哇，月球就在我们面前：我们正准备着陆！

css
@keyframes fly {
  to {
    transform: translate(240px, 260px) rotate(-45deg);
  }
}

.rocket {
  animation-name: fly;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

着陆，第二步 ​

着陆成功，我们的宇航员无人受伤。关闭发动机，我们到达！

css

.rocket {
  animation-name: fly;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fly {
  to {
    transform: translate(240px, 260px) rotate(-45deg);
  }
}

@keyframes fire {
  to {
    opacity: 0;  
  }  
}

.fuel {
  animation-name: fire;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;  
}

着陆，第三步 ​

让我们登上月球表面，举起旗帜！向月球探险者和 CSS 动画致敬！

css
.rocket {
  animation-name: fly;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.fuel {
  animation-name: fire;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes fly {
  to {
    transform: translate(240px, 260px) rotate(-45deg);
  }
}

@keyframes fire {
  to {
    opacity: 0;
  }
}

@keyframes hoist {
  to {
    top: -25px;  
  }  
}

.flag {
  animation-name: hoist;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

持续探索！ ​

现在您已经探索了 CSS 动画甚至深空，只剩下一件事要做……继续进一步探索 HTML、CSS 和 JavaScript！这就是为什么我们为您设置了最后一个挑战：如果您想在我们推出另一门课程时第一时间知道，请订阅，我们会通知您。

评论区
评论区空空如也
发送评论
名字
0 / 20
邮箱
0 / 100
评论内容
0 / 140
由于是非实名评论，所以不提供删除功能。如果你需要删除你发送的评论，或者是其他人的评论对你造成了困扰，请 发邮件给我 。同时评论区会使用 AI + 人工的方式进行审核，以达到合规要求。

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有，转载请注明出处

Copyright © 2019-present xt