<th id="v9g6b"><track id="v9g6b"></track></th>

  • <em id="v9g6b"><acronym id="v9g6b"></acronym></em>
    <progress id="v9g6b"><pre id="v9g6b"></pre></progress>
    <tbody id="v9g6b"></tbody>
    <button id="v9g6b"><acronym id="v9g6b"></acronym></button>
    <rp id="v9g6b"><ruby id="v9g6b"></ruby></rp>

        <dd id="v9g6b"></dd>

        <em id="v9g6b"></em>

          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.sajuice.com/OrgTec/UI/0012.html

          相关文章: 初识CSS3 Animation动画

          电话
          电话 18718672256

          扫一扫
          二维码
          本港台开奖 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>