CSS 动画的 steps

2015/09/28 · CSS ·
动画

正文笔者: 伯乐在线 –
risker
。未经我许可,禁绝转发!
款待加入伯乐在线 专栏撰稿者。

animation默认以ease主意接入,会以在各种关键帧之间插入补间动漫,所以动漫效果是连贯性的。easelinear等等等的交接函数都会为其插入补间。但有一点点作用无需补间,只须求关键帧之间的踊跃,这个时候应该利用steps连接格局。本文后边有案例。

深入领会CSS3 Animation 帧动漫

永利开户送38元体验金,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 规定动漫的速度曲线

永利开户送38元体验金 1

上述w3school网址上给的使用方法,但是漏掉二个很关键的steps

轻便易行的来讲,大家直接利用animation基本都是贯彻线性渐变的卡通

  • 职分在坚持住的时日从源点到终端
  • 尺寸在牢固的时光线性别变化化
  • 颜色的线性改换等等

看效果线性动漫

截取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 函数钦点了二个阶跃函数

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

其次个参数可选,接纳 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% 六成 50%75% 百分之百 分成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% – 百分百的法规,内部分成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跳过100%

step-start在调换历程中,都以以下大器晚成帧的来得效果来填充间距动漫,所以0% 到
四分之二? 直接就彰显了暗黄yellow

step-end与地方相反,都是上述生龙活虎帧的展示效果来填充间距动漫,所以0% 到 百分之七十间接就展现了白灰red

引用w3c的一张step的职业体制图

永利开户送38元体验金 2

总结:

steps函数,它能够流传三个参数,第二个是叁个大于0的板寸,他是将间隔动漫等分成钦点数量的小间距动漫,然后依据第二个参数来调控彰显效果。

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

最大旨的某个就是:timing-function
效用于每八个关键帧之间,而不是全部动漫

1 赞 3 收藏
评论

永利开户送38元体验金 3

steps用法

归纳地说,正是原先叁个动静向另二个动静的连结是平缓的,steps能够兑现布满过渡。steps用法
:

CSS

steps(n,[start | end])

1
steps(n,[start | end])

n是二个自然数,steps函数把动漫分成n等份。

  • step-start 等同于 steps(1,start) ,动漫分成 1
    步,动漫推行时以左臂端点为发端
  • step-end 等同于 steps(1,end) ,动漫分成 1
    步,动画施行时以最后端点为早前

没懂对不对?小编也没懂,上边是法定的传教。接着往下看呢

辨析steps

可以在demo中查看step的区别:狠狠地戳下去

steps(4,start)steps(1,start)
的最大区别正是历次动漫”跳跃”的时候,即从 0% -> 30% 的时候,steps(1)
间接一步到位,须臾间从0%的情状跳到十分之六的境况,而steps(4)会渐渐走4步,即从
0% -> 四分之一 要跳 4 步 !

日益心得一下,应该就通晓steps的效果与利益了吗

案例 – 调整台功能

先戳 demo

这里正是steps(1,start) ,动漫又是只有 0%(百分之百) 、 四分之二七个状态,所以直接一步跳跃,直接走完。

您能够改成steps(4),就更能领悟steps的效应了

案例 – 人人网首页效果

先看看人人网首页的成效:

永利开户送38元体验金 4

再戳demo

一步一步解析:

  • 首先,我们不加动漫,就疑似s1
  • 然后,加animation可是还未有steps,像s2那么。那样很离奇是否,正是因为从没steps,动漫是贯通的,所以大家看看了跑马灯似的效果:永利开户送38元体验金 5
  • 最终,当然是大家的极限效果s3,因为设计员把我们看出的相近 Flash
    的动漫逐帧导出成一张大图,再增进少量的steps和卡通片时间,就见到了大家网首页的那样顺滑的动漫片效果!
    注意,为了维持最后截至的图景,还要加一个 forwards
    ,这里不是本文注重,就不细说了。

再考考你有未有搞精通steps:为啥图片是20帧,不过设置成steps(12)呢?

因为steps是安装的每一步动画的弹跳步数,并不是全方位动画的弹跳步数。比如:

CSS

@-webkit-keyframes ani{ 0%{…} 50%{…} 100%{…} } .xxx:hover{
-webkit-animation:ani 2s steps(10) ; }

1
2
3
4
5
6
7
8
@-webkit-keyframes ani{
   0%{…}
   50%{…}
   100%{…}
}
.xxx:hover{
   -webkit-animation:ani 2s steps(10) ;
}

 

下边包车型客车代码指的是0%~50%之间有10个跳跃,50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。

萧萧,终于理清了steps的功效。认为那几个历程正是稳中求进巩固的心得,风姿罗曼蒂克开头客户只可以体验s1,后来有了css3,能够体会玄妙的动漫了,就如s3。但愿今后我们能够不负众望让每三个客户都满意。

参考

  • 使用css3-animation来创造逐帧动漫

    1 赞 1 收藏
    评论

有关小编:risker

永利开户送38元体验金 6

二〇一五年高校结束学业,以后在京都某网络公司从事前端开采的办事,近五个月重要做运动web开采。腾讯网客官太少,求粉。

个人主页 ·
小编的作品 ·
7 ·
  

永利开户送38元体验金 3

相关文章