收藏
回答

Animation动画在页面数据越多动画运动越卡?

我仿饿了么开发了一个购物车添加功能 展示抛物线动画,一个抛物线运动轨迹我分为20段动画展示每段动画duration是20,这样一个动画流程大概400ms;

1.在菜品数据量小的情况下动画很流畅,菜品数量到100多的时候,动画会发生明显的卡顿。

2.在动画运行过程中,如果移动滚动条,动画会出现卡顿。

3.在iphone7手机动画在触发后未完全运动完,又触发会把动画对象直接卡死,后续这个dom对象都没有运动轨迹,只停留运动的初始位置,编辑器页没有报错提示。(这个问题已解决,但我作为开发者很不能接受,我把for循环生.step() 改成页面写死 减缓手机性能)



最后一次编辑于  2022-01-25
回答关注问题邀请回答
收藏

2 个回答

  • 阿旺
    阿旺
    发表于小程序端
    2022-03-26

    兄弟,可以把小球的运动轨迹动画放到一个自定义组件里,独享一个webview渲染。可能过有所改善,我这边目前是这样的处理

    2022-03-26
    有用
    回复
  • 微盟
    微盟
    2022-01-25

    其实这个问题和手机自身性能瓶颈有关系,一个页面承载的dom过多时,重排计算会占据更多的手机资源,达到瓶颈,造成页面render视觉卡端;

    有一种解决方案可以尝试,优化列表的实现方式,比如始终保持一屏的可视dom的,在滚动的时候,计算滚动高度和item的高度,切换显示对应的数据;

    2022-01-25
    有用
    回复
登录 后发表内容