CSS3 animation – steps 涵数详解

日期:2021-02-28 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

这几日在看1些 css3 动漫的源代码完成时,发现 css 编码的 animation 之中有1个较为生疏的单词 steps ,在源代码中是这么写的:

animation: thunder 2s steps(1, end) infinite;

查阅有关材料后发现 steps 涵数是 animation-timing-function 特性的1个值,那这个涵数相较于别的值例如 ease , linear 的差别在哪儿里呢。

steps

在查阅有关材料后才发现自身以前对 animation-timing-function 掌握不足充足,具体上 animation-timing-function 的 function 指的是 steps() 和  cubic-bezier( ) 即贝塞尔曲线图涵数这两个涵数,像 linear , ease 这些值实际上是   cubic-bezier() 涵数的独特值, steps() 涵数一样也是有两个独特值: step-start step-end 。在掌握这些前提条件后,下面来实际剖析 steps 涵数的功效。

具体上 steps 涵数和   cubic-bezier 涵数各自对应动漫的两种方式:弹跳式和连贯性式。回望平时大家是如何应用  cubic-bezier 涵数的:

div {
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  30% {
    margin-left: 50px;
  }
  100% {
    margin-left: 100px;
  }
}

大家只必须在 @keyframes 中界定重要帧, cubic-bezier 涵数会协助大家在重要帧之间补帧使其变成顺畅的动漫,但有时大家不期待动漫连贯性的播发,而是弹跳式的播发,那大家就必须依靠 steps 涵数了。

steps涵数接受两个主要参数: number 和 position 。 number 是正整数金额, position 有两个值: start 和 end 。前面大家提到 steps 的两个独特值: step-start 和 step-end ,具体上它们各自意味着 steps(1, start) 和 steps(1, end) 。那这两个主要参数各自意味着甚么含意呢?

number: number 表明动漫被分为了是多少段,例如上述事例表明 div 从 0px 挪动到 100px 的这1整段全过程1共被分为 4 段。

position: position 主要参数可选,默认设置为 end 。 start 与 end 的含意是甚么呢,我的了解是: number 会将全部动漫全过程分为多段或说好几个周期, start 表明动漫的情况会在每一个周期的起止点一瞬间进行转变,而 end 则表明动漫的情况会在每一个周期的完毕点一瞬间进行转变。这里附上 W3C 官方文本文档上的1张照片:

 

上图的座标系中,x轴意味着時间,y轴意味着动漫的进度,在这张图中大家必须留意的是实心圆点,实心圆点表明的是动漫所处的情况。大家看来第1张图,它表明的是 steps(1, start) 。依据前面的解释,整段动漫可能做为1段也便是仅有1个周期,而特定了 start 主要参数使得动漫会在周期的起止点情况产生更改,因此大家能够看到第1个实心圆点的座标为 (0,1) 。针对第2张照片,因为特定了 end ,因此动漫的情况会在周期的完毕点突然变化,因而对应两个实心圆点的座标为 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是一样的道理,这里就不实际剖析了。

接下来以便更为直观的体会 steps 涵数的功效,举几个事例来加深了解:

这里先举1个连贯性动漫来做为参照,一部分编码以下:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

实际效果以下:

 

能够看到红方块是历经 2s 匀速健身运动到终点站,随后返回起止部位

接下来是 steps(1, start) 的事例:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-start;
}

实际效果以下:

 

能够看到在我点一下更新的1一瞬间方块就抵达了终点站,随后历经 2s 后返回起止部位

再看来看 steps(1, end) 的事例:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-end;
}

实际效果以下:

 

能够看到当点一下更新时方块并沒有健身运动,这是由于方块会在 2s 后一瞬间挪动到 200px 的部位,随后动漫完毕,返回起止部位,因为这个全过程非常快,肉眼是看不见的,因此看上去就仿佛方块沒有健身运动。假如要想滞留在终点站只必须给 div 再加 animation-fill-mode: forwards 便可。

大家再看来看分为多段的状况,最先 start 分为多段:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, start);
}

实际效果以下:

 

上述事例大家将 4s 动漫分为 4 个周期,方块会在每一个周期起止点也便是 0s ,1s ,2s ,3s 处产生位移,从上述实际效果图大家还可以看出,在我点一下更新一瞬间就进行了1次情况转变,随后在 3s 后做到终点站,在终点站待了 1s 到动漫完毕,返回起止部位。

再看来 end 分为多段的状况:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, end);
}

实际效果以下:

 

特定 end 会使动漫情况在每一个周期的完毕点产生转变,对应事例便是在 1s ,2s ,3s ,4s 处产生转变。从上述实际效果图大家还可以看出方块在我点一下更新的 1s 后刚开始健身运动,在 4s 方块挪动到终点站的一瞬间因为动漫完毕的缘故又挪动到起止部位,因此会造成方块仿佛沒有挪动到终点站的幻觉。

总结

以上所述是网编给大伙儿详细介绍的CSS3 animation – steps 涵数详解,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:CSS loading实际效果之 吃豆人的完成 返回下一篇:没有了