逐帧动画使用简单,这里就写下关于帧动画step

作者: 前端  发布:2019-11-20

深深精通CSS3 Animation 帧动画

2015/07/13 · CSS · Animation

原来的书文出处: Aaron 的博客   

CSS3本人在5年以前就有用了,包罗集团项目都直接在很前沿的技巧。

近来在写慕课网的七巧节大旨,用了大量的CSS3卡通,但是真正沉淀下来细心的去浓重CSS3动漫的逐个属性发掘依旧很深的,这里就写下关于帧动漫steps属性的掌握

大家精通CSS3的Animation有四个属性

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

在那之中1-7大致都有介绍,不过animation-timing-function是决定时期的品质

在取值中除了常用到的 一遍贝塞尔曲线 以外,还会有个让人可比纠结的?steps() 函数

animation默许以ease情势接入,它会在各样关键帧之间插入补间动漫,所以动漫效果是连贯性的

除了ease,linear、cubic-bezier之类的接入函数都会为其插入补间。但稍事效果与利益无需补间,只要求关键帧之间的跳跃,这时候应该利用steps过渡情势

animation-timing-function 规定动漫的进程曲线

9159.com 1

如上w3school网址上给的使用情势,不过漏掉八个很关键的steps

简短的来讲,大家直接使用animation基本都以贯彻线性渐变的卡通

  • 9159.com ,任务在稳住的时间从源点到终点
  • 尺寸在牢固的日子线性别变化化
  • 水彩的线性改造等等

看效果线性动画

截取CSS如下

CSS

.test1 { width: 90px; height: 60px; -webkit-animation-name: skyset; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; /*极端循环*/ -webkit-animation-timing-function: linear; } @-webkit-keyframes skyset { 0% { background: red;} 50%{ background: blue} 100% {background: yellow;} }

1
2
3
4
5
6
7
8
9
10
11
12
13
.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

timing-function:linear 定义的是一个匀速变化的动漫片,就是在2秒内,从丙子革命过度到金棕到色情,是一个很线性的颜料变化

比如要促成帧动漫功能并非线性的变化就必要引进step这么些值了,换句话正是未有连通的效益,而是大器晚成帧帧的转换

同样能够看测量检验帧动画

 

理解steps

steps 函数内定了四个阶跃函数

首先个参数钦命了时间函数中的间距数量(必需是正整数卡塔尔

第4个参数可选,选拔 start 和 end 三个值,钦命在每种间距的源点或是终点产生阶跃变化,默感到 end。

step-start等同于steps(1,start),动漫分成1步,动漫试行时为开端左侧端点的一些为发端;

step-end等同于steps(1,end):动漫分成一步,动漫执行时以最终端点为发端,私下认可值为end。

看看W3C的规范transition-timing-function

 

steps第二个参数的荒谬的明白:

steps(5,start)

steps() 第叁个参数 number 为钦赐的间距数,即把动漫分为 n 步阶段性展示,推断大大多人知晓正是keyframes写的转移次数

例如:

CSS

@-webkit-keyframes circle { 0% {} 25%{} 50%{} 75%{} 100%{} }

1
2
3
4
5
6
7
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
}

本身在此以前也直接认为steps(5,start卡塔尔国中的5 就是指的keyframes中的0% 十分之三 四分之二四分三五 百分百 分成5个区间等分

干什么会产出这种领会错误,大家看一个例证

keyframes的关键帧是唯有2个法则的时候,若是我们有一张400px长度的Sprite图

CSS

@-webkit-keyframes circle { 0% {<code>background-position-x: </code><code>0</code><code>;</code>} 100%{<code>background-position-x: -400px;} }

1
2
3
4
@-webkit-keyframes circle {
        0% {<code>background-position-x: </code><code>0</code><code>;</code>}
        100%{<code>background-position-x: -400px;}
}

此刻安装steps(5,start卡塔 尔(阿拉伯语:قطر‎那么会发掘5张图会现身帧动漫的功效,因为steps中的5把 0% – 100%的准则,内部分成5个等分

实质上内部会执行这样一个关键帧效果

CSS

@-webkit-keyframes circle { 0% {background-position-x: 0;} 25% {background-position-x: -100px;} 50% {background-position-x:-200px;} 75%{background-position-x: -300px;} 100%{background-position-x: -400px;} }

1
2
3
4
5
6
7
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
}

将这一个法规有一点点改过下,参加三个二分之一的意况

CSS

@-webkit-keyframes circle { 0% {background-position-x: 0;} 50% {background-position-x: -200px;} 100%{background-position-x: -400px;} }

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
}

那么雷同用steps(5,start卡塔尔国效果就可以乱套

此时您会很吸引,所以首要要精通第二个参数的针对点,首先引进八个大旨点:

timing-function 功用于每七个关键帧之间,而不是全方位动漫

那正是说首先个参数很好驾驭了,steps的安装都以指向三个关键帧之间的,而非是整整keyframes,所以率先个参数对 – 次数对应了每便steps的改造

换句话说也是 0-25 之间变化5次,? 25-50中间 变化5次 ,50-75 之间浮动5次,依此类推

 

其次个参数可选,选择 start 和 end 三个值,钦定在种种间距的起源或是终点产生阶跃变化,私下认可为 end

经过案例看下step-start,step-end的区别

CSS

@-webkit-keyframes circle { 0% {background: red} 50%{background: yellow} 100% {background: blue} }

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start: 原野绿与木色互相切换

step-end : 鲜青与色情相互切换

2个参数都会选择性的跳过前后部分,start跳过0%,end跳过百分百

step-start在扭转历程中,都以以下生机勃勃帧的来得效果来填充间距动漫,所以0% 到 50%? 直接就体现了水晶绿yellow

step-end与地点相反,都是上述生龙活虎帧的呈现效果来填充间距动漫,所以0% 到 一半直接就呈现了日光黄red

引用w3c的一张step的行事体制图

9159.com 2

总结:

steps函数,它能够流传三个参数,第叁个是三个大于0的子弹头,他是将间距动画等分成钦命数量的小间距动漫,然后依据第二个参数来支配呈现效果。

第叁个参数设置后实际和step-start,step-end同义,在分成的小间距动漫中判定突显效果。能够看见:steps(1, start) 等于step-start,steps(1,end)等于step-end

最中央的某个正是:timing-function 功能于每七个关键帧之间,实际不是意气风发体动漫

1 赞 3 收藏 评论

9159.com 3

大家了然CSS3的Animation有多个属性

故事情节节选自“

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

CSS3 实际上是利用animation-timing-function的阶梯函数steps(number_of_steps, direction)来实现逐帧动漫的连年播发的。

中间1-7差不离都有介绍,然则animation-timing-function是调整时间的质量

在移动端,CSS3 Animation 包容性杰出,相对于 JS,CSS3 逐帧动漫使用简便,且功能更加高,因为大多优化都在浏览器底层达成。

在取值中除去常用到的 三回贝塞尔曲线 以外,还应该有个令人可比纠葛的 steps() 函数

逐帧动漫有两样的卡通帧,大家能够透过校正background-image的值完毕帧的切换,但多张图纸会带给多少个HTTP 央求,且不便利文件的保管。

animation暗中认可以ease形式接入,它会在各类关键帧之间插入补间动漫,所以动漫效果是连贯性的

比较确切的做法,是将具备的动画帧归拢成一张图,通过转移background-position的值来完结动画帧切换。因而,逐帧动漫也被喻为“精灵动漫(sprite animation卡塔 尔(阿拉伯语:قطر‎”。

除此之外ease,linear、cubic-bezier之类的连结函数都会为其插入补间。但稍事效果与利益不须求补间,只须要关键帧之间的跳跃,那个时候应该使用steps过渡方式

以京东到家的触屏页面《年货送到家》为例:

 

那个动画四个有三帧,将3个动漫帧合并,并放到.p8 .page_key的背景中:

animation-timing-function 规定动漫的进程曲线

9159.com 4

9159.com 5

9159.com 6

如上w3school网址上给的施用格局,可是漏掉二个很首要的 steps

(2卡塔尔使用 steps 落成动漫播放

简短的来讲,大家一向选择animation基本都以落到实处线性渐变的动漫片

steps 钦定了叁个台阶函数,包蕴四个参数:

1. 第三个参数钦赐了函数中的间距数量(必需是正整数卡塔尔国;

  • 岗位在定位的光阴从源点到终端
  • 尺寸在固定的大运线性别变化化
  • 水彩的线性改善等等

2. 次之个参数可选,钦赐在每个间隔的起源或是终点爆发阶跃变化,选拔 start 和 end 三个值,私下认可为end。(参谋自W3C)

看效果 线性动画

通过W3C中的那张图纸来精通steps 的行事体制:

截取CSS如下

9159.com 7

.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

重返上述的例证,我们在 keyframes 中定义好种种动漫帧:

 

9159.com 8

 

然后,给她增多animation:

timing-function:linear 定义的是二个匀速变化的动漫片,正是在2秒内,从水绿过度到铁锈红到色情,是一个很线性的水彩变化

9159.com 9

只要要促成帧动画功效并不是线性的变化就供给引入step这一个值了,换句话就是未有连通的功能,而是意气风发帧帧的调换

缘何第二个参数是1?

无差距于能够看测量检验 帧动画

前文中涉及,steps 是animation-timing-function的贰个属性值,在W3C中宛如下表明:

 

For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.

理解steps

也正是说,animation-timing-function应该于多个 keyframes 之间,而非整个动漫。在下边包车型的士 keyframes 中,大家曾经把各类帧都写出来了,所以四个 keyframes 之间的间隔是1。

steps 函数钦赐了叁个阶跃函数

更是简便易行的写法?

第一个参数钦赐了时光函数中的间距数量(必得是正整数卡塔 尔(英语:State of Qatar)

既然如此说 steps 第三个参数是指函数的区间数量,那么大家即可把 keyframes 的推断间接付出 steps 来产生。

其次个参数可选,选择 start 和 end 八个值,钦命在各种间距的源点或是终点产生阶跃变化,默感到 end。

9159.com 10

step-start等同于steps(1,start),动漫分成1步,动画实行时为始发侧面端点的片段为起初;

如上三种写法效果是平等的。

step-end等同于steps(1,end):动漫分成一步,动漫施行时以最后端点为早先,暗许值为end。

CSS3 逐帧动漫使用技巧

看看W3C的规范 transition-timing-function

(1)step-start 与 step-end

 

而外steps函数,animation-timing-function还会有多少个与逐帧动漫相关的属性值step-start与step-end:

steps第三个参数的不当的驾驭:

1. step-start等同于steps(1,start):动漫奉行时以起始端点为带头;

steps(5,start)

2. step-end等同于steps(1,end):动漫施行时以最终端点为发端。

steps() 第一个参数 number 为钦赐的间距数,即把动漫分为 n 步阶段性体现,预计大许多人理解就是keyframes写的成形次数

(2卡塔尔国动画帧的测算:

例如:

9159.com 11

@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }

(3卡塔 尔(阿拉伯语:قطر‎适配方案:rem+scale

 

大家领略,rem 的精兵简政会设有相对误差,因而使用Coca Cola图时大家并不推荐用 rem。即便是逐帧动画的话,由于计算的绝对误差,会现身震荡的情景。

 

那正是说在触屏页中,如何得以已毕页面包车型客车适配?

自家后边也平昔以为steps(5,start卡塔 尔(阿拉伯语:قطر‎中的5 就是指的keyframes中的0% 百分之二十五 四分之二十分之四 百分之百 分成5个区间等分

那边小编提供贰个思路:

何以会冒出这种精通错误,大家看贰个例子

1. 非逐帧动漫部分,使用rem做单位;

keyframes的关键帧是唯有2个准绳的时候,假若大家有一张400px长度的Coca Cola图

2. 逐帧动漫部分,使用px做单位,再组成js对动漫部分使用scale实行缩放。

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        100%{background-position-x: -400px;}
 }

 

这个时候设置steps(5,start卡塔尔那么会意识5张图会现身帧动漫的效果,因为steps中的5把 0% – 百分之百的平整,内部分成5个等分

实质上内部会实行这样贰个关键帧效果

 

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
 }

 

 

将这个规则稍微修改下,加入一个50%的状态

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
 }

这正是说等同用steps(5,start卡塔尔效果就能乱套

那时候你会很吸引,所以最首要要清楚第八个参数的针对点,首先引进三个大旨点:

timing-function 功能于每三个关键帧之间,实际不是一切动漫

那便是说首先个参数很好掌握了,steps的安装都以针对性四个关键帧之间的,而非是整套keyframes,所以率先个参数对

  • 次数对应了每便steps的变通

换句话说也是 0-25 之间转换5次,  25-50之内 变化5次 ,50-75 之间浮动5次,依此类推

 

其次个参数可选,选取 start 和 end 五个值,钦命在各种间距的源点或是终点发生阶跃变化,默以为 end

由此案例看下 step-start,step-end 的区别

 

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start : 粉土灰与暗灰相互切换

step-end  : 蛋黄与色情互相切换

2个参数都会选取性的跳过前后部分,start跳过0%,end跳过百分百

step-start在变幻莫测历程中,都以以下大器晚成帧的展现效果来填充间距动漫,所以0% 到 二分之一  直接就显得了浅中绿yellow

step-end与地方相反,都以上述风度翩翩帧的来得效果来填充间距动漫,所以0% 到 二分一直接就显得了棕色red

引用w3c的一张step的劳作体制图

9159.com 12

总结:

steps函数,它能够流传多少个参数,第多少个是五个大于0的平头,他是将间距动漫等分成钦点数量的小间隔动画,然后依据第一个参数来调控显示效果。

第一个参数设置后实在和step-start,step-end同义,在分成的小间距动漫中判别展现效果。能够看来:steps(1, start) 等于step-start,steps(1,end)等于step-end

最大旨的少数就是:timing-function 作用于每多少个关键帧之间,并不是任何动画

 

by Aaron:

 

本文由9159.com发布于前端,转载请注明出处:逐帧动画使用简单,这里就写下关于帧动画step

关键词: