CSS3 Animation Step实现逐帧动画原理及应用

CSS动画(Animations)如果要实现帧动画效果而不是线性的变化就需要引入step这个值了。animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。

引言
理解Step
@keyframes

引言

animation包含很多子属性,如下八个属性,在上篇中有详细的介绍初识CSS3 Animation动画,这里就不一一介绍了。


animation-name
animation-duration
animation-delay
animation-direction
animation-play-state
animation-iteration-count
animation-fill-mode
animation-timing-function


我们使用animation基本都是实现线性渐变的动画,如:

  1. 尺寸在固定的时间线性变化
  2. 位置在固定的时间从起点到终点
  3. 颜色的线性改变
.showtest1 {
    width: 200px;
    height: 100px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 3500ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;/*线性动画*/
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: green}
    100% {background: blue;}
}

timing-function:linear 定义的是一个匀速变化的动画,就是在3.5秒内,从红色过度到绿色到蓝色,是一个线性的颜色变化。

如果要实现帧动画效果而不是线性的变化就需要引入step这个值了,换句话就是没有过渡的效果,而是一帧帧的变化,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。

cubic-bezier指三次贝塞尔曲线。 steps(n,x)指逐步运动,下面进一步深入介绍steps。

理解steps

steps 函数定义了一个阶梯跳跃函数。

第一个参数n指定了时间函数中的阶梯数量(必须是正整数)。

第二个m参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

steps(3,start):动画分成3步,动画执行时为起始左侧端点的部分为开始。

steps(5,end):动画分成5步,动画执行时以结尾端点为开始,默认值为end。

steps第一个参数的理解:

steps(3,start)

timing-function 作用于每两个关键帧之间,而不是整个动画

那么第一个参数很好理解了,steps的设置都是针对两个关键帧之间的,而非是整个keyframes,所以第一个参数对应了每次steps的变化,

换句话说也是 0-25 之间变化3次,  25-50之间 变化3次 ,50-75 之间变化3次,以此类推。

第二个参数可选,接受="" start="" 和="" end="" 两个值,指定在每个间隔的起点或是终点发生阶跃变化。

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

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

step-start : 绿色与蓝色相互切换
step-end  : 红色与绿色相互切换
2个参数都会选择性的跳过前后部分,start跳过0%,end跳过100%
step-start在变化过程中,都是以下一帧的显示效果来填充间隔动画,所以0% 到 50%  直接就显示了绿色
step-end与上面相反,都是以上一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了红色
引用w3c的step的工作原理图

step工作机制

@keyrames

@keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的,而在animation中用@keyframes可以细致地指定第一帧要干什么,第二帧要干什么。

语法:@keyframes开头,后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%,to等于100%。

@keyframes mymove {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:green;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:blue;}
    100% {top:0px; left:0px; background:red;} 
}

提醒一下@keyframes只是定义了一个动画效果,但要使动画有作用,必须用animate属性将动画绑定到具体DOM元素上才可以。

另外也可以同时指定多个动画效果,例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;


网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » CSS3 Animation Step实现逐帧动画原理及应用
本文标题:CSS3 Animation Step实现逐帧动画原理及应用
本文地址:http://www.hocode.com/OrgTec/UI/0012.html

相关文章: 初识CSS3 Animation动画

电话
电话 18718672256

扫一扫
二维码