0065 animation:动画动画序列动画常见属性 动画简写方式速度曲线细节案例大数据热点图案例奔跑的熊大

Posted jianjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了0065 animation:动画动画序列动画常见属性 动画简写方式速度曲线细节案例大数据热点图案例奔跑的熊大相关的知识,希望对你有一定的参考价值。

  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果
  2. 动画的基本使用

    • 先定义动画
    • 在调用定义好的动画
  3. 语法格式(定义动画)

    /* keyframes: 关键帧 */
    @keyframes 动画名称 { 
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
  4. 语法格式(使用动画)

    div {
     /* 调用动画 */
        animation-name: 动画名称;
         /* 持续时间 */
         animation-duration: 持续时间;
    }
  5. 动画序列

    • 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
    • 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
    • 用百分比来规定变化发生的时间,或用 fromto,等同于 0% 和 100%
  6. 代码演示

    <style>
        div {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          animation-name: move;
          animation-duration: 0.5s;
        }
    
        @keyframes move{
          0% {
            transform: translate(0px)
          }
          100% {
            transform: translate(500px, 0)
          }
        }
      </style>
demo1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
九、动画序列
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
动画常见属性
  1. 常见的属性
    @keyframes: 规定动画。
    animation: 所有动画属性的简写属性,除了animation-play-state属性。
    animation-name: 规定@keyframes动画的名称。
    animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是0。
    animation-timing-function: 规定动画的速度曲线,默认是“ease”。
    animation-delay: 规定动画何时开始,默认是0。
    animation-iteration-count: 规定动画被播放的次数,默认是1,还有infinite
    animation-direction: 规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放
    animation-play-state: 规定动画是否正在运行或暂停。默认是"running",还有"pause"。
    animation-fill-mode: 规定动画结束后状态,保持forwards回到起始backwards。

技术图片

  1. 代码演示

    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      /* 动画名称 */
      animation-name: move;
      /* 动画花费时长 */
      animation-duration: 2s;
      /* 动画速度曲线 */
      animation-timing-function: ease-in-out;
      /* 动画等待多长时间执行 */
      animation-delay: 2s;
      /* 规定动画播放次数 infinite: 无限循环 */
      animation-iteration-count: infinite;
      /* 是否逆行播放 */
      animation-direction: alternate;
      /* 动画结束之后的状态 */
      animation-fill-mode: forwards;
    }
    
    div:hover {
      /* 规定动画是否暂停或者播放 */
      animation-play-state: paused;
    }
十一、 动画简写方式
  1. 动画简写方式

    /* (1)动画名称 持续时间必须写;(2)持续时间 要在 何时开始 的前面 */
    /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
    animation: name duration timing-function delay iteration-count direction fill-mode
  2. 知识要点

    • 简写属性里面不包含 animation-paly-state
    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
    • 要想动画走回来,而不是直接调回来:animation-direction: alternate
    • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards
  3. 代码演示

    animation: move 2s linear 1s infinite alternate forwards;
速度曲线细节
  1. 速度曲线细节
    • animation-timing-function: 规定动画的速度曲线,默认是ease

技术图片

  1. 代码演示

    div {
      width: 0px;
      height: 50px;
      line-height: 50px;
      white-space: nowrap;
      overflow: hidden;
      background-color: aquamarine;
      animation: move 4s steps(24) forwards;
    }
    
    @keyframes move {
      0% {
        width: 0px;
      }
    
      100% {
        width: 480px;
      }
    }
综合案例:大数据热点图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            /* 注意绝对定位的盒子水平居中、垂直居中的写法,除了translate,不要漏了top、left */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大。这里只需要让盒子的宽高变大即可。*/
                width: 40px;
                height: 40px;
                /* opacity: 透明度,0表示不透明。 */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>
速度曲线步长
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                /* 注意开始、结束时的状态,开始和结束之间,若干时间内,做动画,分成若干个节点 */
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

技术图片

奔跑的熊大
  1. 代码演示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            /* 不一定要用绝对定位 */
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画, 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                /* 注意,是背景图移动,不是div盒子移动 */
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

技术图片

以上是关于0065 animation:动画动画序列动画常见属性 动画简写方式速度曲线细节案例大数据热点图案例奔跑的熊大的主要内容,如果未能解决你的问题,请参考以下文章

HTML基础之动画

CSS动画

Cocos2d-x 3.x序列帧动画

css_transition_animation(内含贝赛尔曲线详解)

unity-动画中加入触发事件

如何在textview上进行序列动画(swift3)