我仿饿了么开发了一个购物车添加功能 展示抛物线动画,一个抛物线运动轨迹我分为20段动画展示每段动画duration是20,这样一个动画流程大概400ms;
1.在菜品数据量小的情况下动画很流畅,菜品数量到100多的时候,动画会发生明显的卡顿。
2.在动画运行过程中,如果移动滚动条,动画会出现卡顿。
3.在iphone7手机动画在触发后未完全运动完,又触发会把动画对象直接卡死,后续这个dom对象都没有运动轨迹,只停留运动的初始位置,编辑器页没有报错提示。(这个问题已解决,但我作为开发者很不能接受,我把for循环生.step() 改成页面写死 减缓手机性能)
兄弟,可以把小球的运动轨迹动画放到一个自定义组件里,独享一个webview渲染。可能过有所改善,我这边目前是这样的处理
其实这个问题和手机自身性能瓶颈有关系,一个页面承载的dom过多时,重排计算会占据更多的手机资源,达到瓶颈,造成页面render视觉卡端;
有一种解决方案可以尝试,优化列表的实现方式,比如始终保持一屏的可视dom的,在滚动的时候,计算滚动高度和item的高度,切换显示对应的数据;