Current Situation of animation in webapp

One of the major advantages of webapp is that it can have an animation effect comparable to that of native during view switching, but most of the time it is just an idea. The real situation is not the cause of this problem: ① The CPU usage on the mobile phone is poor! ② Poor mobile phone graphics card! Even with quad-core rendering, it is quite problematic. ③ High-end mobile browsers may have bugs. ④ low-end mobile phone support is not good (Chinese stockade). Due to the above reasons, in fact, webapps will actually weaken the animation to varying degrees, or, although it is difficult to use animation in a local area, there is always a solution. In fact, there are several lines of code that make people dead, after several rounds of experience, I finally got back to my hand. I even handled the well-known front-end in China. Two of them made books, so it was really hard to say that the old difficulty of animation was really hard on the Mobile End, I want to share the animation I know today. I hope it will be helpful to you. If you have a good solution, I 'd like to tell you where it is difficult.Too many dom treesThe movement of the view is quite different from that of the simple image slider component! The reason is that its dom structure may be very complicated. The movement of the big dom tree on the Mobile End is very poor. For the simple list page, when there are more than 100 projects, you should be cautious when using IScroll plug-ins. This kind of movement may be very difficult! In addition, the complexity of the dom tree is directly related to the business. We have no way to control the dom tree, because the Business Code may not pass through our hands, how small is the dom tree you have made yourself? No.Long and Short pagesThe so-called long page is a long view, a very long view is very short, here the problem is very annoying, first we need to switch the view position to the header (window. scroll (0, 0). In this case, the page viewport may change in ios (automatically generated by the system), or the appearance of the low-end Toolbar may be triggered, in this case, page jitter is inevitable if the window is not executed every time. scroll (0, 0). When switching, the short view is invisible. The solution I think of at this stage is to set scroll to a large one when moving, when moving, the bview top value is the same as the scrollTop value, and the window still needs to be executed. scroll (0, 0) operations. Therefore, this problem can only be mitigated and cannot be solved.Mobile rendering ProblemsAs long as you are a mobile client friend, you will surely sneer at the rendering of Samsung or some low-end servers! After the style is operated for multiple times, the browser will not take care of your solution: ① cause the browser to strongly redraw ② temporarily add or delete a dom structure but it involves switching the view animation, there may be some inexplicable problems! The struggles of animation are several inevitable problems. The so-called solution is the only way to minimize DOM structure during animation if you cannot improve efficiency, even if the render Tree is reduced, the basic idea is to show only the elements at the view, and the rest ignore the http://sandbox.runjs.cn/show/5szc5wcf.

1 var FastRender = new inherit ({2 3 initialize: function (opts) {4 this. handleOpts (opts); 5 this. init (); 6}, 7 8 handleOpts: function (opts) {9 if (! Opts |! Opts. doms |! Opts. doms. length) throw 'fastrender param error'; 10 this. doms = opts. doms; 11 this. container = opts. container | $ (window); 12 this. renderContainer ={}; 13 this. step = 50; 14 15}, 16 17 init: function () {18 this. initImgContainer (); 19 this. initRender (); 20 this. bindEvents (); 21}, 22 23 bindEvents: function () {24 25 // bind event to container 26 this. container. on ('scroll. fastRender ', $. proxy (function () {27 this. init Render (); 28}, 29 this); 30}, 31 32 initImgContainer: function () {33 var el, I, len, offset; 34 for (I = 0, len = this. doms. length; I <len; I ++) {35 el = $ (this. doms [I]); 36 offset = el. offset (); 37 38 // 39 for this card // (function (el) {40 // setTimeout (function () {41 el.css ({42 'width': offset. width, 43 'height': offset. height44}); 45 //}, 0); 46 //}) (el); 47 48 if (! This. renderContainer [offset. top]) {49 this. renderContainer [offset. top] = []; 50} 51 this. renderContainer [offset. top]. push (el); 52} 53 54}, 55 56/* 57 here we need to optimize the object traversal and search 58 59 */60 initRender: function () by replacing the value with the coordinate search () {61 var height = this. container. height (); 62 var srollHeight = this. container. scrollTop (); 63 var k, _ imgs, el, I, len, els; 64 65 this. doms. removeClass ('wl '); 66 67 for (k in this. renderContainer) {68 // if (parseInt (k) <srollHeight + height + this. step) & (parseInt (k)> srollHeight-this. step) {69 if (parseInt (k) <srollHeight + height-this. step) & (parseInt (k)> srollHeight + this. step) {70 71 els = this. renderContainer [k]; 72 for (I = 0, len = els. length; I <len; I ++) {73 el = $ (els [I]); 74 el. find ('. lazy_wrapper '). show (); 75} 76} else {77 els = this. renderContainer [k]; 78 for (I = 0, len = els. length; I <len; I ++) {79 el = $ (els [I]); 80 el. find ('. lazy_wrapper '). hide (); 81} 82 83} 84} // for85 86}, 87 88 destroy: function () {89 // bind event 90 this to container. container. off ('. fastRender '); 91} 92 93}); 94 95 var f = new FastRender ({96 doms: $ ('. js_hotel_detail ') 97 });

This demo has a wonderful idea. If it can be implemented, it is undoubtedly a hero of the mobile end. In fact, it is

Browser: 10 points

IOS (4000): 6 points

Android Xiaomi (1800): 5 points

4 cores: 4 points (1800)

Its performance is very good on the browser, and it will not work on the mobile phone. Therefore, today's arguments fail, and the solution still needs to be optimized.

This result is foreseeable, because the mobile phone cannot keep up with rendering, the smoothness will not keep up, and the solution will be abandoned.

In another direction, it would be advisable to bypass too many DOM trees. For example, it would be shameful to directly use a white page for animation when moving.

Another solution is to use cavas to generate a thumbnail for this page. Each movement is actually a thumbnail, so the animation is smooth, but this solution is very difficult and may cause other problems, I have to verify this solution.

Conclusion

The ending is not good. I have not found a good solution to this problem. There is still a long way to go for mobile animation ......