前端开发日常——CSS动画无限轮播

  • 前端开发日常——CSS动画无限轮播已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

  近来没有什么值得写的东西,空闲的时候帮前端的同学做了些大屏上的展示模块,就放在这里写写吧,手把手“需求->设计-> 实现”,受众偏新手向。

  近来没有什么值得写的东西,空闲的时候帮前端的同学做了些大屏上的展示模块,就放在这里写写吧,手把手“需求->设计-> 实现”,受众偏新手向。

  前端开发日常——CSS动画无限轮播

  为了直观便于理解, 直接把结果贴在上面。

  如上所示,基本需求比较简单明了, “分页显示供应商、供应占比列表,自动轮播”。

 

  一、需求评审

  该有的环节还是要有,尽管需求简单,评审不能省略,无论形式。开发的同学千万不要真的相信需求就这么简单,否则南辕北辙,出力不讨好,那必定是日常-_-||。

  于是有丰富填坑经验的开发同学,对于这个简单的模块需求,可能会提出如下的一些问题

  1. 如果只有一页,要不要轮播?

  2.每页的轮播间隔频率是多少?

  3.如果列表没有数据,如何显示这个模块?

  4.数据的刷新时机?是翻页刷新,轮播一圈刷新,还是其他?

  5.这个绿色的比值是什么含义? 是不是还有红色?

  6.百分比的小数位?

  7.如果接口异常比如网络不通,如何表示这种异常?

  8.供应商的名字会不会有500字那么长? 放不下如何布局?

  ……等等

  以上任何一个未明确的需求,都可能成为你编码完成后的一个bug或优化建议。 o(* ̄︶ ̄*)o。

 

  二、设计评审  

  关于上面待确认的每一个问题,我们伟大的产品经理都一一耐心的给出了“令人信服的”回答后。还是不能马上开始编码。下面我们需要进行一些技术方案的设计讨论,由技术leader把关。例如:

  1. 数据流,这个列表的数据,是从数据库中的哪几个表取出的? 确认下查询逻辑。

  2.接口设计,是一次返回前端所有数据,还是支持分页查询。

  3.性能考虑,查询频率是不是较高,并发是不是大,缺不缺索引,要不要上缓存?

  4.轮播如何实现? 有没有已经集成的轮播控件,是否满足要求,还是需要自己写一个。

  5.如何进行模块化开发,作为一个模块集成嵌入到整体页面中。

  ……等等

  明确了以上的问题后,作为前端同学的我,是不是可以开始撸代码了?

   

  三、想清楚再写

  说到这里,

  一类同学已经开始着手编码了, 第一个想到需要写的方法可能是,ajax 去后台请求数据列表的接口。

  另一类同学,可能仍在构思,如何组织代码,提炼主要的数据结构和功能方法。

  这里我们显然应该向“另外一类”同学学习。想清楚再写,是一个毫无疑问的好习惯

  技术预研

  实现一个功能,首先要扫除其中的未知技术点,扫除了所有未知之后,才能够优化的组织实现方案

  上面的需求对于我这种半吊子前端来说,比较关键的两个技术问题是。

  1)用什么方案来实现滑动动画。 2)如何实现“无限滚动”。

 

  滑动动画——经过一番百度,总结下动画可能的实现方案,包括用JS实现或者用CSS实现。 各有优劣,js 兼容性好,控制灵活;CSS性能高,平滑流畅。因为我们的动画非常线性,简单,于是这里我们决定采用CSS动画作为动画的实现方案。

  通过简单的研究,我们已经弄清楚了, 想让一个页面元素具有一个动画效果,可以通过向他添加一个包含了动画关键真的选择器来实现,比如定义一个滑出动画类,把这个css类加到元素上,元素就可以实现滑出的动画效果。

 

  无限滚动——思考下滚动页面,虽然对于数据来说可能会分成很多页,但对于屏幕展示来说,实际上最多同时出现两个页面,一个是前一页,一个是当前页。在不滚动的时候只有当前页需要显示。

  顺着这个思路, 滚动这个动作对应,“当前页飞入”“前一页飞出”这两个细分动作,特别的情况是,初始显示时,是没有“前一页”的。

  那么滚动这个动作大概思路就是,

  1. 根据当前页号取得对应数据,绘制HTML页面,append到滚动区域,对其添加“飞入”动画

  2. 根据当前页号取得上一页页面元素,对其添加“飞出”动画,动画结束后将其移除, 仅显示当前页。

 

  四、编码实现

  终于到了编码的时间了。

  用到的 css 动画类选择器,以及关键帧 

.slip_in_animation{     animation: slip_in 1s; }  .slip_out_animation{     animation: slip_out 1s; }  /*右侧滑入*/ @keyframes slip_in {     from {transform:translateX(100%);}     to {transform:translateX(0);}  }  /*右侧滑入*/ @keyframes slip_out {     from {transform:translateX(0);}     to {transform:translateX(-100%);} }

  js应用于页面元素,飞入飞出, 飞出后删除,*动画在结束后并不会改变元素实际位置。所以要在动画结束前,移除元素,避免它回到之前位置,挡住当前页,发生“闪烁”

    //页面滑入,要显示的页面     this.slipIn = function(pageNo){         $("#supplierListPage_"+pageNo).addClass("slip_in_animation");     };      //页面滑出,     this.slipOut = function(pageNo){         $("#supplierListPage_"+pageNo).addClass("slip_out_animation");          //移除上一页,定时比动画稍短,避免闪烁         setTimeout(function(){             $("#supplierListPage_"+pageNo).remove();         },900);     };

  翻页的逻辑,第一次不滚动;滚到头,把最后一页飞出,第一页飞入。

    this.switchNext = function(pageNo){          //附加生成新的页面         var newPageHtml =  _this.makePageHtml(pageNo);         $("#"+ _this.containerId).append(newPageHtml);          //多于一页的情况         if(_this.firtshow){             _this.firtshow= false;             //第一次换页 不需要移除之前页面。         }else{             //前面已经有显示过的页面,需要把前面的页面滚动出去。             var olderPage =  pageNo -1;             if(olderPage <=0){                 //当前页是第一个,前一页就是最后一页                 olderPage = _this.totalPage;             }             _this.slipOut(olderPage);         }         _this.slipIn(pageNo);     };

  定时滚动到下一页。如果是最后一页,重新开始第一页。

    this.startRolling = function(){             _this.switchNext(_this.curPage);              //按间隔轮播             _this.switchTimer =  setInterval(function(){                  if(_this.totalPage == 1)                     return;                  if(_this.curPage < _this.totalPage) {                     _this.curPage++;                 }else{                     _this.curPage = 1;                 }                 _this.switchNext(_this.curPage);             },_this.switchInterval);     };

写到这里,下面是完整代码,需要的可以参考。

 

完整的代码CSS:

前端开发日常——CSS动画无限轮播前端开发日常——CSS动画无限轮播

.slip_in_animation{     animation: slip_in 1s; }  .slip_out_animation{     animation: slip_out 1s; }  /*右侧滑入*/ @keyframes slip_in {     from {transform:translateX(100%);}     to {transform:translateX(0);}  }  /*右侧滑入*/ @keyframes slip_out {     from {transform:translateX(0);}     to {transform:translateX(-100%);} }

View Code

 

完整JS:

前端开发日常——CSS动画无限轮播前端开发日常——CSS动画无限轮播

function SupplierListTable(){      var _this = this;     //echart 图表对象。      //轮播间隔 毫秒     this.switchInterval = 5000;      //当前轮播的页,从1开始     this.curPage=1;      //每页条数     this.pageSize = 5;      //当前数据对应总页数     this.totalPage = 0;      //数据列表     this.chartDataList = new Array();       //第一次展示标志     this.firtshow =true;      this.containerId = null;     //轮播定时器     this.switchTimer = null;      this.init  = function(containerId){         _this.containerId = containerId;         //初始化图表         $("#"+containerId).html("");         _this.reloadData(containerId);     };       this.getTotalPage = function(){        var totalPage  = Math.ceil(_this.chartDataList.length/_this.pageSize);        return totalPage;     };      this.reloadData =function(containerId){           //从网络请求数据。          setTimeout(function(){              _this.chartDataList= [                 {name:"供应商1",percent:"12%"},                 {name:"供应商2",percent:"13%"},                 {name:"供应商3",percent:"14%"},                 {name:"供应商4",percent:"15%"},                 {name:"供应商5",percent:"16%"},                 {name:"供应商6",percent:"13%"},                 {name:"供应商7",percent:"14%"},                 {name:"供应商8",percent:"15%"},                 {name:"供应商9",percent:"16%"}                  ];               _this.totalPage = _this.getTotalPage();             _this.curPage = 1;               _this.stopRolling();             _this.startRolling();          },300);      };       this.stopRolling= function(){         if(_this.switchTimer != null){             clearInterval(_this.switchTimer);             _this.switchTimer = null;             _this.curPage = 0;         }     };       this.startRolling = function(){             _this.switchNext(_this.curPage);              //按间隔轮播             _this.switchTimer =  setInterval(function(){                  if(_this.totalPage == 1)                     return;                  if(_this.curPage < _this.totalPage) {                     _this.curPage++;                 }else{                     _this.curPage = 1;                 }                 _this.switchNext(_this.curPage);             },_this.switchInterval);     };      this.switchNext = function(pageNo){          //附加生成新的页面         var newPageHtml =  _this.makePageHtml(pageNo);         $("#"+ _this.containerId).append(newPageHtml);          //多于一页的情况         if(_this.firtshow){             _this.firtshow= false;             //第一次换页 不需要移除之前页面。         }else{             //前面已经有显示过的页面,需要把前面的页面滚动出去。             var olderPage =  pageNo -1;             if(olderPage <=0){                 //当前页是第一个,前一页就是最后一页                 olderPage = _this.totalPage;             }             _this.slipOut(olderPage);         }         _this.slipIn(pageNo);     };      //生成指定页的html。     this.makePageHtml = function(pageNo){          var startRecIndex=  _this.pageSize * (pageNo - 1);         var endRecIndex =   _this.pageSize *  pageNo ;          if(endRecIndex > _this.chartDataList.length){             endRecIndex = _this.chartDataList.length;         }          var html = "<div style='width: 100%;  box-sizing: border-box;position: absolute;padding: 20px;' id='supplierListPage_" +pageNo+"'>";         for (var i = startRecIndex; i < endRecIndex; i++) {             html+= "<div style=' margin-bottom: 10px  ;border-bottom: 1px solid #484752;'><span style='color: white'>" +_this.chartDataList[i].name+"</span>  <span style='float: right;color: #0c9c6e'>"+_this.chartDataList[i].percent+"</span></div>"         }         html+="</div>"          return html;     };      //页面滑入,要显示的页面     this.slipIn = function(pageNo){         $("#supplierListPage_"+pageNo).addClass("slip_in_animation");     };      //页面滑出,     this.slipOut = function(pageNo){         $("#supplierListPage_"+pageNo).addClass("slip_out_animation");          //移除上一页,定时比动画稍短,避免闪烁         setTimeout(function(){             $("#supplierListPage_"+pageNo).remove();         },900);     };  }   $(document).ready(function(){      var containerId = 'supplierListChart';      var supplierListTable = new SupplierListTable();     supplierListTable.init(containerId);  });

View Code

 

HTML页面容器:

前端开发日常——CSS动画无限轮播前端开发日常——CSS动画无限轮播

<div  style="height: 300px;width:400px;overflow-x: hidden;position: relative" id="supplierListChart" > </div>

View Code