13.动画样式

在学习动画样式前,我们先来了解下关于动画的定义

动画:   是指由许多帧静止的画而, 以一定的速度连续播放时,肉眼因视觉残像产生错觉,而误以为画面活动的作品;

           为了得到活动的画面,则每一帧上的画面都会有细微的差别; 

从以上的定义来看,动画具备如下特性;

a. 短时间内播放多张静态的画面帧;

b. 每一帧画面中的内容,具备一样的差别;

----------------------------------------------------------------------------------------------------

关于动画在CSS中的应用, 对动画按照触发的情况的不同,分为: 触发式动画和主动式动画;

A. 触发式动画;

    一般以元素默认的样式为第一帧, 在元素的状态类选择器(伪类选择器)中定义元素动画的最后一帧;

   为元素配置相应的动画类属于性,最终达到动画效果的动画;

   动画类属性有如下几种:

    1. transition-duration: 从第一帧到最后一帧的耗时,单位为秒;

    2. transition-delay: 用以定义当伪类选择器样式补触发时, 延时多少秒开始执行动画效果; 默认不延时,即:0

    3. transition-timing-function: 定义在整个动画过程中的变化速率;   一般通过贝塞尔曲线函数进行控制; 

        (贝塞尔典线函数地址: http://cubic-bezier.com)

  上面是独立的控制不同的动画样式,但一般情况下,我们都会一次性的设置好元素的动画样式,

  transition: 元素属性  动画时间  动画时间函数 延时时间, 元素属性  动画时间  动画时间函数 延时时间,.....

  多个属笥的动画样式之间用逗号分隔开

 

B. 主动式动画

    所谓的主动式动画,当然就是直接自已跑起来的动画,不需要特定的业务或动作去触发的动画;

   主动式动画,需要由开发人员,自行配置好所有的关键帧样式; 进而达到理想所动画效果;

   关于主动式动画的创建方式如下:

   

  之所以在主动式动画中有多个不同的状态, 这主要是依据用户对动画的精细化要求程度来定,

 对于主动式动画效果的引用,是为元素配置 animation-name 来设置主动式样式名称来实现动画效果的;

 关于主动式动画样式,同样有一系列的属性来进行控制, 主要的属性有如下几个:

    1. animation-duration: 动画样式的过渡时间;

    2. animation-timing-function: 动画样式的速率控制; 

    3. animation-delay:动画延时，默认为0

    4. animation-iteration-count: 主动式动画播放的次数;

        如果想要无限次播放,需要将这个值设置为: inifinate;

    5. animation-direction: 在进行多次播放时,用于控制每一次开始播放时,动画的起始位置;

       --> normal: 每一次动画时,都是从第1帧开始播放,

       --> alternate: 基数次时正向播放,偶数次时反向播放;

       --> 另外还有二种控制,但一般不会这样使用

            a. reversr: 每一次都是从最后一帧播放到第1帧;

            b. alternate-reverse: 奇数次时反向播放,偶数次时正向播放;

     6. animation-fill-mode: 用以控制在有限次循环(由animation-iteration-count控制)播放后最终的样式状态;

         --> forwards: 保留最后一帧;

         --> backwards: 保留第1帧;

-------------------------------------------------------------------------------------------------------------------------------------

   各动画参数在不同组合情况下,最终样式效果审核情况如下:

a). 循环播放三次,每次都从第1帧播放到最后一帧,  最终状态取最后一帧的状态

     

b). 循环播放三次,每次都从第1帧播放到最后一帧,  最终状态取第一帧的状态 (与a变化: animation-fill-mode)

     

c.循环播放四次,基数次正向播放,偶数次反向播放,  最终状态取最后一帧或第一帧,效果一样(偶数次时第一帧和最后一帧一样,都是初始状态)

   

 

 

 

 对于主动式动画样式,一般情况下也是一次性设置的,而不会真正的一个一个设置,        

animation: 样式名 动画时间 动画速率  延时  播放次数  重复播放时的方式  有限次播放时的最终状态

 

 

在定义主动式动画时, 如果配置了状态值,但没有配置对应的样式值,则默认为元素的默认样式;

** 如下图, 我们在主动式动画中,只定义了一个状态,即50%时的样式,

   那0%，100%的状态时是什么状态呢???

   从下图中,我们可以看到, 0%和100%时的样式都是默认的红色样式,高度为200px;

   (需特别注意一下这个50%是什么意思   <动画时间的50%>)

 

       为确认关于状态样式中关于百分比的理解,我们再来看一个图

       

      从上图可以看出,整个动画其实是分成了二个不同的部分,

     第一部分是从0%到90%的状态变化, 元素从高度200px, 变成了高度500px

     第二部分,从90%到100%的状态变化,元素从高度500px,变成了高度200px;

     这二个部分都是实现了高度差300px的变化,但是前后二个阶段,动画的速度是不一样的,  第一部分比较从容,第二部分很快就完成了变化;

 

转载于:https://www.cnblogs.com/jieling/p/11005738.html