CSS3逐帧动漫,深远精晓CSS3
分类:前端技术

深深精通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 规定动漫的速度曲线

图片 1

上述w3school网址上给的采纳方法,可是漏掉二个非常重大的steps

回顾的来讲,大家一贯利用animation基本都以兑现线性渐变的动漫片

  • 岗位在稳住的时光从源点到终点
  • 尺寸在一定的年月线性别变化化
  • 颜色的线性别变化更等等

看效果线性动漫

截取CSS如下

CSS

.test1 { width: 90px; height: 60px; -webkit-animation-name: skyset; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; /*Infiniti循环*/ -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% 四成 二分一四分三 100% 分成5个区间等分

何以会师世这种精通错误,大家看八个例子

keyframes的关键帧是唯有2个法则的时候,要是大家有一张400px长度的百事可乐图

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的职业体制图

图片 2

总结:

steps函数,它能够流传四个参数,第二个是八个大于0的卡尺头,他是将间距动漫等分成钦定数量的小间距动漫,然后依据第2个参数来调控突显效果。

第二个参数设置后实在和step-start,step-end同义,在分成的小间隔动漫中判别显示效果。能够看来:steps(1, start卡塔尔 等于step-start,steps(1,end卡塔尔等于step-end

最大旨的一点正是:timing-function 成效于每五个关键帧之间,并不是整个动漫

1 赞 3 收藏 评论

图片 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卡塔尔(英语:State of Qatar)来兑现逐帧动画的三番五次播发的。

里面1-7几近都有介绍,可是animation-timing-function是调整时间的习性

在移动端,CSS3 Animation 包容性优越,相对于 JS,CSS3 逐帧动画使用简易,且效用越来越高,因为众多优化都在浏览器底层实现。

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

逐帧动漫有例外的卡通片帧,我们得以通过校勘background-image的值达成帧的切换,但多张图纸会带给多个HTTP 央浼,且不便民文件的管住。

animation私下认可以ease方式连接,它会在每一个关键帧之间插入补间动漫,所以动漫效果是连贯性的

正如方便的做法,是将全体的动漫帧归总成一张图,通过改动background-position的值来兑现动漫帧切换。因而,逐帧动画也被叫做“Smart动漫(sprite animation)”。

除了那几个之外ease,linear、cubic-bezier之类的衔接函数都会为其插入补间。但有个别功力不必要补间,只须求关键帧之间的跃进,那个时候应该运用steps过渡形式

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

 

以此动漫二个有三帧,将3个动漫帧归总,并放到.p8 .page_key的背景中:

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

图片 4

图片 5

图片 6

上述w3school网址上给的行使形式,不过漏掉二个很要紧的 steps

(2)使用 steps 实现动漫播放

简轻易单的来说,大家一向使用animation基本都以贯彻线性渐变的动漫

steps 钦命了三个台阶函数,包括多个参数:

1. 首先个参数钦赐了函数中的间距数量(必得是正整数);

  • 职位在固定的时刻从起点到极点
  • 尺寸在一贯的时光线性别变化化
  • 颜色的线性改造等等

2. 次之个参数可选,钦定在各种间距的起源或是终点发生阶跃变化,采用 start 和 end 七个值,默认为end。(参谋自W3C)

看效果 线性动漫

通过W3C中的那张图纸来领悟steps 的做事体制:

截取CSS如下

图片 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 中定义好种种动漫帧:

 

图片 8

 

然后,给她增添animation:

timing-function:linear 定义的是叁个匀速变化的动漫片,便是在2秒内,从棕红过度到桃红到色情,是叁个很线性的水彩变化

图片 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 函数钦赐了一个阶跃函数

更是便捷的写法?

第三个参数内定了时光函数中的间距数量(必需是正整数)

既然如此说 steps 首个参数是指函数的区间数量,那么大家就能够把 keyframes 的计算直接付出 steps 来造成。

其次个参数可选,选择 start 和 end 八个值,钦定在各类间距的起源或是终点发生阶跃变化,默感觉 end。

图片 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第2个参数的失实的掌握:

1. step-start等同于steps(1,start卡塔尔(英语:State of Qatar):动画执行时以开端端点为起先;

steps(5,start)

2. step-end等同于steps(1,end卡塔尔(قطر‎:动漫实行时以最后端点为始发。

steps(卡塔尔(英语:State of Qatar) 第一个参数 number 为内定的间距数,即把动画分为 n 步阶段性体现,臆想大超级多人知晓正是keyframes写的变通次数

(2)动漫帧的乘除:

例如:

图片 11

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

(3)适配方案:rem scale

 

大家知晓,rem 的计量会设有固有误差,因此使用七喜图时大家并不推荐用 rem。假使是逐帧动漫的话,由于总结的测量误差,会情不自禁颠簸的状态。

 

那正是说在触屏页中,怎么样兑现页面包车型客车适配?

我后边也一直以为steps(5,start)中的5 正是指的keyframes中的0% 百分之二十 50%百分之三十 百分之百 分成5个区间等分

此处作者提供四个思路:

何以会现身这种精晓错误,大家看二个例子

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

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

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

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

 

那时安装steps(5,start)那么会发觉5张图会现身帧动漫的功效,因为steps中的5把 0% – 100%的平整,内部分成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的干活机制图

图片 12

总结:

steps函数,它能够流传多个参数,第二个是三个大于0的整数,他是将间隔动画等分成钦定数量的小间距动漫,然后依照第3个参数来决定显示效果。

其次个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中剖断彰显效果。能够看来:steps(1, start卡塔尔 等于step-start,steps(1,end卡塔尔(قطر‎等于step-end

最核心的一些正是:timing-function 成效于每七个关键帧之间,并非任何动漫

 

by Aaron:

 

本文由pc28.am发布于前端技术,转载请注明出处:CSS3逐帧动漫,深远精晓CSS3

上一篇:模块化的法规,ES二零一四核心内容 下一篇:没有了
猜你喜欢
热门排行
精彩图文