CSS3 timing

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

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

又如:

steps 有2个主要参数

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

第二个有2个值

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

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

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

shit  

二、一研究竟

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

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(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)

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 使其变成持续的动漫。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503