淘先锋技术网

首页 1 2 3 4 5 6 7

20-animation动画

Animation动画

什么是动画？

"小人书"就很好的诠释了什么是动画，只要翻页的速度足够快，画面切换足够流畅，这就形成了动画。而每一页都是一个关键的动作或者场景，因此每一页就称为关键帧，而每一秒我们能翻的页数越多，那么画面越流畅，我们把每一秒切换图片的数量称为帧数。

完成自动播放的动画方式：

  1. 编写JavaScript脚本来完成动画
  2. 可以使用flash技术完成动画的设计
  3. 可以借助某些动画标签，比如marquee
  4. h5中提供了canvas技术（绘图技术）来完成动画的设计
  5. CSS3提供的animation动画，可以完成动画的自动播放

animation动画的基本使用

  • css3动画通过animation来控制
  • 步骤：
    1. 利用@keyframes来定义动画所有的关键帧，并且取名
    2. 给使用动画的盒子添加animation属性，来指定我们动画的名字和执行的时间

animation关键帧

  • 将动画拆分为多个步骤，每个步骤就是关键帧，多个步骤连接起来，形成一个完整动画
  • css3 animation里面使用关键帧：需要定义关键帧

定义关键帧

  • 语法：

    @keyframes 动画的名称{
    from{
        //动画开始的状态
    }
    to{
        //动画结束的状态
    }
}
也可以使用百分比，当动画执行到某个百分比时，是什么状态
@keyframes 动画名称{
    0%{
        
    }
   20%{
        
    }
    100%{
        
    }
}

使用动画
animation：动画的名称 动画的时长；

    ​ 0%代表from，to代表100%

    • 每一帧动画的执行时间和两帧之间动画百分比有关，跨度越大，分配的时间越多
    • 时间计算公式：总的时间*两帧跨度的百分比

动画的属性控制（速度、方向等）

  • 用于控制动画中的速度，播放次数、方向等操作

  • 基本属性

    • anination-name:动画的名称
    • animation-duration:动画的执行时长
    • animation-timing-function:控制动画的执行速度
      • ease：默认值 低速开始，然后变快，以低速结束
      • linear：匀速
      • ease-in
      • ease-out
      • ease-in-out
      • cubic-bezier（x1，y1，x2，y2）
    • animation-delay:动画的延迟时间，默认0s
    • animation-iteration-count:控制动画的执行次数
      • n 代表数字，定义动画播放多少次
      • infinite:无限次播放
    • animation-direction:控制动画的播放方向
      • normal：默认值，动画正向播放
      • reverse：动画反向播放
      • alternate：方向为：去正往反，来回执行。最后回到初始位置
      • alternate-reverse：与alternate相反。最后回到初始位置
    • aniamtion-fill-mode：设置第一帧或最后一帧是否作用在元素上
      • forwards:将最后一帧作用在元素上
      • backwards:恢复初始设置
      • both:将第一帧和最后一帧同时作用在元素上
    • animation-paly-state：控制动画播放与否（一般配合hover使用）
      • running：正常播放
      • paused：暂停

  • 复合属性

    • 复合属性写两个时间，前面代表执行时间，后面代表延迟时间

  • 案例：

  •    <style>
          body{
              background-image: url("image/photo.jpg");
              background-repeat: no-repeat;
              background-size: cover;
              /* overflow: hidden; */
              margin: 0;
          }
          body,html{
              height: 100%;
          }
          div{
              position: absolute;
              top: 0;
              left: 0;
              width: 3300px;
              height: 100%;
              background-size: contain;
              background-repeat:repeat-x;
              animation:move 20s infinite linear;
          }
          .fog1{
              background-image: url("image/fog-1.png");
      
          }
          .fog2{
              background-image: url("image/fog-2.png");
          }
      
          @keyframes move {
              0%{
                  left: 0px;
              }
              100%{
                  left: -1580px;
              }
          }
      </style>
  </head>
  <body>
      <div class="fog1"></div>
      <div class="fog2"></div>
  </body>

练习

骰子动画

加载动画

​ image-20200916161000663

<style>
    #loading {
        background-color: #374140;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0px;
    }

    #loading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        margin-top: -75px;
        margin-left: -75px;
    }

    .object {
        width: 20px;
        height: 20px;
        background-color: #FFF;
        float: left;
        margin-right: 20px;
        border-radius: 50%;
    }

    #object_one{
        /* animation复合属性 */
        animation: load 1.5s infinite;
    }
    #object_two{
        /* animation复合属性 */
        animation: load 1.5s infinite;
        animation-delay: 0.25s;  
    }
    #object_three{
        /* animation复合属性 */
        animation: load 1.5s infinite;
        animation-delay: 0.5s;  
    }

    /* 
    关键帧
    */
    @keyframes load{
        0%{
            transform: scale(1);
        }
        100%{
            transform: scale(0);
        }
    }
</style>

<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
        </div>
    </div>
</div>

轮播图