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也是一种进步
其基本想法是只显示视口处的元素,其余不予理睬
 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')
});

这个demo想法很美好,若是可实现的话,无疑是移动端一大功臣,事实上是

浏览器:10分

IOS(4000):6分

android小米(1800):5分

化为4核:4分(1800)

其表现在浏览器上很好,手机上便不行了,所以今日的论证失败,该方案还需优化

这个结果其实可以预见,在渲染上手机根本跟不上,所以平滑度就跟不上,方案抛弃

换个方向想,若是可以绕过DOM树过多问题也是可取,比如移动时候直接以一个白页做动画,这个方案比较可耻

另一个方案是使用cavas为本页面生成一个缩略图,每次移动实际上是缩略图,如此动画是顺畅了,但是此方案甚难,还可能引起其它问题,此方案我得再做验证

结局

结局并不美好,此问题我未找到很好的解决方案,移动端的动画还有很长的路要走......

动画在webapp中的现状的更多相关文章

  1. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  2. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  3. tomcat中session在两个webapp中实现共享

    现在遇到一个需求就是要求完成简单的单点登录,通过在一个tomcat实例中放置两个webapps应用ROOT应用和CEO应用来完成在ROOT应用登录后,在CEO可以直接使用,而未在ROOT应用登录时,不 ...

  4. [Swift实际操作]八、实用进阶-(3)闭包在定时任务、动画和线程中的使用实际操作

    闭包的使用相当广泛,它是可以在代码中被传递和引用的具有独立功能的模块.双击打开之前创建的空白项目.本文将演示闭包在定时任务.动画和线程中的使用.在左侧的项目导航区,打开视图控制器的代码文件:ViewC ...

  5. 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)

    原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...

  6. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  7. tomcat ROOT中的lib和webapp中的lib的作用

    相同点:都是用来存放jar包的 不同点:和webapps同个目录下的那个lib文件夹所放的jar包对tomcat 服务器和你的webapp 来说都是可以调用的(这时候假如tomcat和web都依赖某个 ...

  8. webapp中的meta

    <!--开发后删除--> <meta http-equiv="Pragma" name="no-store" /><!--必须联网 ...

  9. fakeLoader.js-针对WebApp中的 “假”预加载

    在做移动端网站的时候,前端有时候需要一些过渡效果,当然我们肯定首先想到肯定是用css3做一个过渡动画,nice,那我给大家一个好用的jQuery插件吧,让你三行代码实现这种过渡动画效果. 1.由于该插 ...

随机推荐

  1. Leetcode-24 Swap Nodes in Pairs

    #24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...

  2. Sql Server系列:触发器

    触发器的一些常见用途: ◊ 强制参照完整性 ◊ 常见审计跟踪(Audit Trails):这意味着写出的记录不仅跟踪大多数当前的数据,还包括对每个记录进行实际修改的历史数据. ◊ 创建与CHECK约束 ...

  3. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  4. ECMAScript

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  5. ModelDataExchange - Import

    ModelDataExchange - Import eryar@163.com Abstract. The ModelDataExchange import utility enables the ...

  6. 《ASP.NET MVC 5框架揭秘》样章发布

    今天算是新作<ASP.NET MVC 5框架揭秘>正式上架销售的日子(目前本书在互动网已经到货),为了让更多适合的朋友们能够阅读此书,同时也避免让不适合的读者误买此书,特将此书的样章发布出 ...

  7. android app反编译

    最新在反编译别人的apk,有时候看到别人的app有很炫的效果,就想知道别人是怎么样实现的,顺便自己参考,借鉴一下,下一次如果工作中碰到这个问题就知道怎么实现了.最近恰好放假三天,就研究了一下,一般别人 ...

  8. IDDD 实现领域驱动设计-SOA、REST 和六边形架构

    上一篇:<IDDD 实现领域驱动设计-架构之经典分层> 阅读目录: SOA-面向服务架构 REST 与 RESTful 资源(Resources) 状态(State) 六边形架构 DDD ...

  9. java多线程--多线程基础小结

    什么是线程? 在同一个进程中可以执行多个任务,每一个任务可以看做一个线程. 线程是程序的执行单元,执行路径,使程序使用cpu的最基本单位 一个进程如果只有一条执行路径,那么就是单线程的 一个进程如果有 ...

  10. WebGIS中GeoHash编码的研究和扩展

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 1.1普通地理编码流程 将采集的POI入库后,数据库里保存有 ...