动画在webapp中的现状

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

webapp的一大优势便是在view切换时候可以拥有媲美与native的动画效果，但是很多时候那只是一种想法，真正的情况却不是这样

产生此问题的原因有：

① 手机CPU烂！

② 手机显卡烂！就算四核其渲染也很有问题

③ 高端手机浏览器会有BUG

④ 低端手机支持不好（国内山寨机笑而不语）

因为以上原因，事实上做webapp的都会不同程度的弱化动画，或者在局部区域使用动画

问题虽难，总有方案，事实上的情况是，几行代码搞死人，就我们的这个动画问题，前后过手几轮

最后又回到了我手上，中间甚至经手了国内著名的前端，其中两位还出过书，所以说动画老大难问题在移动端是真心难，今天就我所知的动画做一次分享，希望对各位有帮助，若是有好方案，麻烦赐教一番

难在何处
dom树过多

view的移动与简单的图片slider组件相差甚剧！原因便是其dom结构可能很复杂，大dom树的移动在移动端效果很差

就简单列表页来说，当项目超过100个时，使用IScroll类插件都应该很慎重，这类移动可能非常卡！

而且dom树复杂度与业务直接相关，我们没有任何办法去控制dom树，因为业务代码可能不会经过我们的手，就算经过，你又肯定自己做出来的dom树有多小？不见得吧

长短页问题

所谓长短页便是一个view很长一个view很短，这里问题处理十分讨厌

首先我们每次做切换需要将view位置切换至头部（window.scroll(0, 0)）如此的话ios中会引起

页面viewport的变化（系统自动发生），或者会触发低端工具栏的出现，这个时候页面抖动无可避免

若是每次不执行window.scroll(0, 0)，切换时候又会导致短的view不可见

我现阶段想到的解决方案是，移动时候将scroll设得比较大，移动时候将bview的top值与scrollTop相同

最后仍然需要执行window.scroll(0, 0)的操作，所以，这个问题只能缓解，无法解决

手机渲染问题

只要是做移动端的朋友，一定会对三星机或者一些低端机的渲染嗤之以鼻！

具体表现为多次操作style后，后面的操作浏览器不会搭理你

解决方案是：

① 引起浏览器强烈重绘

② 临时增删一个dom结构

但是涉及view切换动画的话，很有可能会出现一些莫名其妙的问题！

动画的挣扎

以上是几个不可避免会遇到的问题，所谓解决方案，也不过自欺欺人

如果不能提高效率，动画时候最大程度的减小DOM结构便是唯一方法，就算减少render Tree也是一种进步

其基本想法是只显示视口处的元素，其余不予理睬

http://sandbox.runjs.cn/show/5szc5wcf

 var FastRender = new inherit({

   initialize: function(opts) {

     this.handleOpts(opts);

     this.init();

   },

   handleOpts: function(opts) {

     if (!opts || !opts.doms || !opts.doms.length) throw 'FastRender param error';

     this.doms = opts.doms;

     this.container = opts.container || $(window);

     this.renderContainer = {};

     this.step = 50;

   },

   init: function() {

     this.initImgContainer();

     this.initRender();

     this.bindEvents();

   },

   bindEvents: function() {

     //为container绑定事件

     this.container.on('scroll.fastRender', $.proxy(function() {

       this.initRender();

     },

     this));

   },

   initImgContainer: function() {

     var el, i, len, offset;

     for (i = 0, len = this.doms.length; i < len; i++) {

       el = $(this.doms[i]);

       offset = el.offset();

       //这块卡

       //      (function (el) {

       //        setTimeout(function () {

       el.css({

         'width': offset.width,

         'height': offset.height

       });

       //        }, 0);

       //      })(el);

       if (!this.renderContainer[offset.top]) {

         this.renderContainer[offset.top] = [];

       }

       this.renderContainer[offset.top].push(el);

     }

   },

   /*

         这里需要对对象遍历做优化，以坐标搜索替换数值搜索

         */

   initRender: function() {

     var height = this.container.height();

     var srollHeight = this.container.scrollTop();

     var k, _imgs, el, i, len, els;

     this.doms.removeClass('wl');

     for (k in this.renderContainer) {

       //                        if ((parseInt(k) < srollHeight + height + this.step) && (parseInt(k) > srollHeight - this.step)) {

       if ((parseInt(k) < srollHeight + height - this.step) && (parseInt(k) > srollHeight + this.step)) {

         els = this.renderContainer[k];

         for (i = 0, len = els.length; i < len; i++) {

           el = $(els[i]);

           el.find('.lazy_wrapper').show();

         }

       } else {

         els = this.renderContainer[k];

         for (i = 0, len = els.length; i < len; i++) {

           el = $(els[i]);

           el.find('.lazy_wrapper').hide();

         }

       }

     } // for

   },

   destroy: function() {

     //为container绑定事件

     this.container.off('.fastRender');

   }

 });

 var f = new FastRender({

   doms: $('.js_hotel_detail')

 });