移动端加载动画

  • Last update:  2022-11-14
  • 1. 概述

    1.1 应用场景

    用户支持自定义全局加载动画功能,提升移动端用户的数据感知体验。

    自定义全局加载动画的效果如下图所示:

    ce3f50b8-b61a-433a-8772-802233b750f6.jpg

    1.2 功能入口

    局部加载动画是系统默认的,不提供自定义入口。

    全局加载动画设置入口:决策系统「管理系统>移动平台>其它」目录下新增「加载动画设置」,如下图所示:

    2. 自定义全局加载动画

    下面分别介绍下全局加载动画的这 3 个设置项。

    2.1 全局加载动画

    2.1.1 默认

    全局加载动画选择默认,即采用系统默认动画。

    1603885205311520.png

    默认动画效果如下图所示:

    92aff1c1-edd5-484d-ba5d-918c347ff9d4.jpg

    2.1.2 不显示

    全局加载动画选择不显示,即不设置全局加载动画,此时全局加载动画背景和显示取消加载按钮设置项也会消失。

    1603885467654105.png

    2.1.3 自定义

    全局加载动画选择自定义,可以上传 GIF 图片作为加载动画。文末也提供了一些 GIF 资源包供用户使用。

    2022-03-30_15-59-27.jpg

    注:GIF 过大可能出现图片加载方面的性能问题,所以比较大的 GIF 要尽量压缩下。

    自定义动画效果如下图所示:

    ce3f50b8-b61a-433a-8772-802233b750f6.jpg

    注:目前只支持 GIF 格式,上传其它类型文件会报错:文件类型不支持。如下图所示:

    1603885880701584.png

    2.2 全局加载动画背景

    2.2.1 默认效果

    全局加载动画背景选择默认效果,即加载动画为白底灰框。

    1603886103771110.png

    2.2.2 自定义

    全局加载动画背景选择自定义,可以自定义动画的背景颜色。如下图所示:

    2022-03-30_16-13-27.jpg

    设置效果如下图所示:

    88553e1e-bfbb-43cd-9d24-78c4dda55a76.jpg

    2.3 显示取消加载按钮

    默认显示取消加载按钮,点击后可以直接取消掉动画。

    2022-03-30_16-12-22.jpg

    开启该功能,动画右上角会出现取消动画效果按钮如下图所示:

    ce3f50b8-b61a-433a-8772-802233b750f6.jpg

    3. 资源下载

    点击下载加载动画 GIF 资源包:加载动画包.rar

    附件列表


    主题: 移动端
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy