数据可视化1（呼吸灯）

 

 

 

 

 

在大数据可视化开发中，总有一些ui效果不是在echarts，hightcharts等三方插件库中可以找到的，这就需要自己手写，动画效果还是需要熟悉css3 animate属性的。上代码：

template模板：这里我考虑到分为两层结构，一层为底色，一层为动画层，在上层做动画处理。

<div class="item_part1_des item_part1_des8">
                  脚本类型调用次数
                </div>
                <div class="item_part3_script_unit">(单位：次)</div>
                <div class="item_part3_scriptType">
                  <ul>
                    <li>数据采集</li>
                    <li>数据清洗</li>
                    <li>数据加工</li>
                    <li>数据汇集</li>
                  </ul>
                </div>
                <div class="item_part3_scriptCount">
                  <ul id="loadbar1">
                    <li v-for="(item, index) in scriptList" :id="'layerFill'+index"  :class="index < scriptTypeNum.cleaning ? 'bar' : ''"></li>
                  </ul>
                  <ul id="loadbar2">
                    <li v-for="(item, index) in scriptList" :id="'layerFill'+index"  :class="index < scriptTypeNum.processing ? 'bar' : ''"></li>

                  </ul>
                  <ul id="loadbar3">
                    <li v-for="(item, index) in scriptList" :id="'layerFill'+index"  :class="index < scriptTypeNum.collection ? 'bar' : ''"></li>

                  </ul>
                  <ul id="loadbar4">
                    <li v-for="(item, index) in scriptList" :id="'layerFill'+index"  :class="index < scriptTypeNum.collect ? 'bar' : ''"></li>

                  </ul>
                </div>
              </div>

js：虽然是vue的项目，数据双向绑定，但是加载动画效果是还是用jq操作dom添加删除类更高效一些。

 $('#loadbar1').removeClass('ins').delay(10).queue(function (next) {
            $(this).addClass('ins');
            next();
          });
          $('#loadbar2').removeClass('ins').delay(10).queue(function (next) {
            $(this).addClass('ins');
            next();
          });
          $('#loadbar3').removeClass('ins').delay(10).queue(function (next) {
            $(this).addClass('ins');
            next();
          });
          $('#loadbar4').removeClass('ins').delay(10).queue(function (next) {
            $(this).addClass('ins');
            next();
          });

css：这里我只给出了必要的几个元素的样式以及动画的css，没要求但是也考虑到了moz的兼容性问题。

.ins .bar{
          width: 14px!important;
          height: 4px!important;
          border: 3px solid #38c3da!important;
          -webkit-animation:fill 5s linear forwards;
          -moz-animation:fill 5s linear forwards;
          animation-direction:reverse;
          -webkit-animation-direction:reverse;
          animation-iteration-count:infinite;
          -webkit-animation-iteration-count:infinite;
        }
        #layerFill0{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;}
        #layerFill1{-moz-animation-delay:1s;-webkit-animation-delay:1s;}
        #layerFill2{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;}
        #layerFill3{-moz-animation-delay:2s;-webkit-animation-delay:2s;}
        #layerFill4{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;}
        #layerFill5{-moz-animation-delay:3s;-webkit-animation-delay:3s;}
        #layerFill6{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;}
        #layerFill7{-moz-animation-delay:4s;-webkit-animation-delay:4s;}
        #layerFill8{-moz-animation-delay:4.5s;-webkit-animation-delay:4.5s;}
        #layerFill9{-moz-animation-delay:5s;-webkit-animation-delay:5s;}

        @-moz-keyframes fill{
          0%{ opacity:0;}
          100%{ opacity:1;}
        }

        @-webkit-keyframes fill{
          0%{ opacity:0;}
          100%{ opacity:1;}
        }

以上为呼吸灯效果的大致代码，有经验的前端小伙伴可以交流指正。