CSS3 timing

2021-01-28 07:38

steps() 第一个主要参数 number 为特定的间距数，即把动漫分成 n 步环节性展现，第二个主要参数默认设置为 end，设定最终一步的情况，start 为完毕时的情况，end 为刚开始时的情况。

又如：

steps 有2个主要参数

第一个毫无疑问是分两步实行完

第二个有2个值

start 第一帧是第一步动漫完毕

end 第一帧是第一步动漫刚开始

青春年少愚昧的我随便就坚信了大伙儿的叫法，每一次运用 steps() 涵数时必须先考虑到一番：嗯，start 相匹配末态，end 相匹配初态，末态是 OOOO，初态是 XXXX 卧槽!跑起來错误!

 

二、一研究竟

被坑得团团转以后，只能向机构寻求帮助。因此查出了那样的 要求 ：

steps

Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value start or end , and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end .

粗略地汉语翻译以下： steps 涵数特定了一个阶跃涵数，第一个主要参数特定了時间涵数中的间距总数(务必是正整数金额);第二个主要参数可选择，接纳 start 和 end 2个值，特定在每一个间距的起始点或者终点站产生阶跃转变，默认设置为 end。

那样了解起來将会還是有点儿抽象性，大家再来一个案例：

#demo {
 animation-iteration-count: 2;
 animation-duration: 3s;

它是一个 3s * 2 的动漫，大家各自对它运用 steps(3, start) 和 steps(3, end) ，作出阶跃涵数曲线图以下：

1. steps(3, start)

 

steps() 第一个主要参数将动漫切分成三段。当特定跃点为 start 时，动漫在每一个记时周期时间的起始点产生阶跃(即图上 中空圆 实心圆 )。 因为第一次阶跃产生在第一个记时周期时间的起始点处(0s)，因此大家见到的第一步动漫(初态)就为 1/3 的情况，因而在视觉效果上动漫的全过程为 1/3 2/3 1 。假如汉语翻译成 JavaScript，大概以下：

var animateAtStart = function (steps, duration) {
 var current = 0;
 var interval = duration / steps;
 var timer = function () {
 current++;
 applyStylesAtStep(current);
 if (current steps) {
 setTimeout(timer, interval);
 timer();

2. steps(3， end)

 

当特定跃点为 end，动漫则在每一个记时周期时间的终点站产生阶跃(即图上 中空圆 实心圆 )。 因为第一次阶跃产生在第一个记时周期时间完毕时(1s)，因此大家见到的初态为 0% 的情况;而在全部动漫周期时间进行处(3s)，尽管产生阶跃跳至了 100% 的情况，但同时动漫完毕，因此 100% 的情况不能视。因而在视觉效果上动漫的全过程为 0 1/3 2/3 (追忆一下数电里的多线程清零，当全部輸出端都为高电平的情况下开启清零，因此全为高电平是暂态过程)。一样汉语翻译成 JavaScript 以下：

var animateAtEnd = function (steps, duration) {
 var current = 0;
 var interval = duration / steps;
 var timer = function () {
 applyStylesAtStep(current);
 current++;
 if (current steps) {
 setTimeout(timer, interval);
 timer();

假如那样的表述還是给你感觉云里雾里，能够参照这一互动 DEMO
 

三、具体运用

尽管写了那么多，但還是不可不用说一句 timing-function: steps() 在具体设计方案中的运用少之又少，可是相互配合一些奇淫方法還是能作出一些非常好的实际效果：

1. 定时执行蒙版

在CSS3 环状进展条本文里，大家曾采用 timing-function 来使半圆环定时执行显示信息/掩藏：

$precent: 5; // 进展百分数
$duration: 2s; // 动漫时间
@keyframes toggle {
 0% {
 opacity: 0;
 100% {
 opacity: 1;
.progress-right {
 // 初态为 opacity: 0; 动漫周期时间完毕后为 opacity: 1;
 opacity: 1;
 animation: toggle ($duration * 50 / $precent) step-end; // step-end = steps(1, end)
.progress-cover {
 // 初态为 opacity: 1; 动漫周期时间完毕后为 opacity: 0;
 opacity: 0;
 animation: toggle ($duration * 50 / $precent) step-start; // step-start = steps(1, start)

这儿的重要是应用了 step-start 与 step-end 操纵动漫，由于动漫仅有2个重要帧，参照前文能够得到：

step-start：动漫一刚开始就跳至 100% 直至周期时间完毕

step-end：维持 0% 的款式直至周期时间完毕

要留意的是， timing-function 是 功效于每2个重要帧中间，而并不是全部动漫 ( the animation-timing-function applies between keyframes, not over the entire animation )，因此就会有了张鑫旭教师在 小tip: CSS3 animation渐近完成点点点等候提醒实际效果 一原文中得到的结果：

step-start, 顾名思意， 一步一步刚开始 ，主要表现在动漫中便是一帧一帧播发、一顿一顿界面

2. Sprite 小精灵动漫

在CSS3 完成飞奔动漫本文里，大家应用 CSS3 Animation 来完成手机游戏开发设计中的小精灵动漫：

$spriteWidth: 140px; // 小精灵总宽 
@keyframes run {
 0% {
 background-position: 0 0;
 100% {
 background-position: -($spriteWidth * 12) 0; // 12帧
#sprite {
 width: $spriteWidth;
 height: 144px;
 background: url( ../images/sprite.png ) 0 0 no-repeat;
 animation: run 0.6s steps(12) infinite;
}

其基本原理是：应用一张带有多帧静态数据界面的照片，根据转换 background-position 使其变成持续的动漫。