精华内容
下载资源
问答
  • echarts加载数据时自定义加载动画
    2022-03-17 14:51:17

    echarts加载数据时自定义加载动画

    1.实现

    有时用echarts加载数据时,尤其是首次加载,可能一时加载不出数据,可以给它加一个加载动画

     let departChart = this.$echarts.init(document.getElementById("dischargeChart"));
            departChart.showLoading({
                text: "数据正在努力加载...",
                color: "#0696e1", //加载动画颜色
           textStyle: { fontSize: 30, color: "black" },//字体样式
             maskColor: 'rgba(0, 0, 0, 0.8)',//遮罩层
              });
    
    更多相关内容
  • 提示窗口,正在加载中,确认对话框,广告展示,底部Sheet选项,非组合控件,感谢star 1、添加依赖 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { ... compile...
  • 【微信小程序|组件库】自定义加载动画(1)

    千次阅读 热门讨论 2021-04-30 15:56:12
    前言  ...通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。        &nb

    前言

    在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。

    通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。

    这样做在一定程度上也是可以实现需求,但是如果每个需要过度动画的页面都复写一遍该动画view代码,那么就会显得有点冗余。

    下面分享一个自定义加载动画ଘ(੭ˊᵕˋ)੭

    需求分析

    小程序原生加载动画开放的权限

    • 自定义title:加载时显示的文字
    • 提供动画类型的选择:比如加载、完成、失败等,类型较少
    • mask:是否启用蒙层,防止触摸穿透

    已实现效果

    • title
      • 支持自定义文字内容
      • 支持多行、单行显示
      • 中文、英文均不溢出(可修改)
      • 溢出多余部分已省略号显示(可修改)
      • 文字颜色、大小可以修改
    • 动画样式
      • 支持自定义动画样式
    • mask
      • 模式1:启用蒙层,模糊全局页面,禁止用户操作
      • 模式2:启用蒙层,页面显示与正常一致,禁止用户操作
      • 模式3:不启用蒙层,允许用户操作
    • 动画深色加载框
      • 支持选择启用与不启用

    效果展示

    演示-1

    演示-2

    演示-3

    用法

    步骤1

    在需要使用加载动画的界面

    引入loading组件


    假设我们需要在index页面中使用

    首先找到index.json

    在usingComponents添加

    “loading”:"…/…/components/loading/loading"

    …/…/components/loading/loading表示的意思是:loading组件的文件位置

    示例:

    {
      "usingComponents": {
        "loading":"../../components/loading/loading"
      },
    }
    

    步骤2

    在index.wxml页面中添加

    <loading  title="疯狂敲代码中.." maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    步骤3

    在index.js中添加变量loadingFlag

    初始值为空

    data{
      loadingFlag:'',
    }
    

    步骤4

    需要显示加载动画时

    在js对应函数中使用下面代码

    k.setData({
      loadingFlag:true
    })
    

    取消加载动画

    k.setData({
      loadingFlag:false
    })
    

    参数说明与自定义样式

    对于一个需要使用自定义加载动画的页面

    一般步骤就是

    1. 在json中引入组件
    2. js中添加变量loadingFlag
    3. 在wxml页面中添加组件代码
    4. 在js中对loadingFlag进行设置,true或false,用于决定动画的开始与结束

    wxml使用的组件代码

    <loading  title="疯狂敲代码中.." maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    参数解释

    title:加载动画下方显示的文字

    举例:title=“加载中”

    <loading  title="加载中" maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    maskFlag:蒙层

    有三种参数选择

    1. Haihong:启用蒙层,模糊全局页面,禁止用户操作
    2. HaihongPro:启用蒙层,页面显示与正常一致,禁止用户操作
    3. 空或除Haihong、HaihongPro之外的其他字符:不启用蒙层,允许用户操作

    举例:

    情况1:maskFlag=‘Haihong’

    <loading  title="加载中" maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    此时产生了蒙层效果,同时周围界面也模糊了,用户操作被禁止了,只有等待动画结束才可以进行操作


    情况2:maskFlag=‘HaihongPro’

    <loading  title="加载中" maskFlag='HaihongPro' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    此时产生了蒙层效果,只是视觉上观察页面没有模糊,用户操作同样被禁止了,只有等待动画结束才可以进行操作


    情况3:maskFlag=’’

    <loading  title="加载中" maskFlag='' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    没有蒙层效果,动画运行时,用户依然可以点击、滑动屏幕

    loading组件代码见

    在这里插入图片描述

    展开全文
  • 主要介绍了Android 自定义加载动画Dialog弹窗效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • winForm自定义加载动画

    2018-01-29 17:00:31
    自定义加载动画,为加载定时,自己可以在原有的基础之上进行扩展。下载下来肯定会用到。WINFORM端的,积分又不多。
  • 先写好一个加载动画组件,如:export default {data() {return {};},computed: {//计算属性判断vuex中的显示状态loadingShow() {return this.$store.state.requestLoading;}}};.request-loading-view {position: ...

    先写好一个加载动画组件,如:

    export default {

    data() {

    return {};

    },

    computed: {

    //计算属性判断vuex中的显示状态

    loadingShow() {

    return this.$store.state.requestLoading;

    }

    }

    };

    .request-loading-view {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 198903060;

    background-color: rgba(0, 0, 0, 0.001);

    display: flex;

    justify-content: center;

    align-items: center;

    }

    .loading-view {

    width: 160upx;

    height: 160upx;

    background-color: rgba(0, 0, 0, 0.6);

    border-radius: 20upx;

    display: flex;

    justify-content: center;

    align-items: center;

    }

    /* 动画样式 */

    .loading {

    border: 10upx solid rgba(0, 0, 0, 0.01);

    border-radius: 50%;

    border-top: 10upx solid #fff;

    border-right: 10upx solid #fff;

    border-bottom: 10upx solid #fff;

    width: 60upx;

    height: 60upx;

    -webkit-animation: spin 1.4s linear infinite;

    animation: spin 1.4s linear infinite;

    }

    @-webkit-keyframes spin {

    0% {

    -webkit-transform: rotate(0deg);

    }

    100% {

    -webkit-transform: rotate(360deg);

    }

    }

    @keyframes spin {

    0% {

    transform: rotate(0deg);

    }

    100% {

    transform: rotate(360deg);

    }

    }

    main.js 中添加相应引用,使用Vuex来记录显示状态,所以Vuex也需要引用

    //Vuex

    import store from './store'

    Vue.prototype.$store = store

    //请求加载组件

    import requestLoading from './components/compt_requestLoading.vue';

    //组件挂载到全局,方便每个页面使用

    Vue.component('request-loading', requestLoading);

    //挂载全局显示/隐藏请求加载动画

    function showLoading(){

    store.commit('request_show_loading');

    }

    function hideLoading(){

    store.commit('request_hide_loading');

    }

    Vue.prototype.$showLoading = showLoading; //全局显示动画可以 this.$showLoading();

    Vue.prototype.$hideLoading = hideLoading; //全局隐藏动画可以 this.$hideLoading();

    Vuex的store/index.js中这样写

    //Vuex

    import Vue from 'vue'

    import Vuex from 'vuex'

    Vue.use(Vuex)

    const store = new Vuex.Store({

    state: {

    requestLoading: false //加载等待是否显示

    },

    mutations: {

    //显示请求加载动画

    request_show_loading(state) {

    state.requestLoading = true;

    },

    //隐藏请求加载动画

    request_hide_loading(state) {

    state.requestLoading = false;

    }

    }

    })

    export default store

    然后每个页面添加标签

    即可

    调用显示/隐藏可以直接

    this.$showLoading()

    this.$hideLoading()

    展开全文
  • 直到在下一个项目中,遇到需要自定义加载动画效果的需求,再次把该方案提上日程。在项目中,应该多去思考,凡事都有解决方案。 lottie-web 将json解析成动画。 一、安装依赖 npm install lottie-web --save 或者 ...

    在项目中,遇到需要在网页首屏,展示动画的需求,你会想到怎么做?

    思路一:设计师导出gif图片,用img进行展示。

    缺点:图片失真,影响效果。

    思路二:设计师导出json文件,用插件解析成动画展示。

    缺点:由于当时时间紧张,且不知道怎么操作,放弃了这个方案。

    直到在下一个项目中,遇到需要自定义加载动画效果的需求,再次把该方案提上日程。在项目中,应该多去思考,凡事都有解决方案。

    lottie-web 将json解析成动画。

    一、安装依赖

    npm install lottie-web --save
    或者
    yarn add lottie-web
    

    二、在React项目中搭配Ant Desgin使用

    注意:loading.json为设计师将动画设计好之后,导出的json文件。

    import React, { useEffect, useRef } from 'react';
    import lottie from 'lottie-web';
    import { Spin } from 'antd';
    import { SpinProps } from 'antd/lib/spin';
    import loading from '@/assets/loading.json';
    
    interface Props extends SpinProps {
      children?: React.ReactNode;
    }
    
    // 大小映射,spin中small,default和large三种大小对应的像素
    const SIZE_MAP = {
      small: 14,
      default: 20,
      large: 32,
    };
    
    const CustomLoad = (props: { style: React.CSSProperties }) => {
      const load = useRef() as React.MutableRefObject<any>;
      useEffect(() => {
        lottie.loadAnimation({
          container: load.current,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: loading,
        });
      }, []);
    
      return <div style={props.style} ref={load}></div>;
    };
    
    const CustomSpin = (props: Props) => {
      const { children, size = 'default', ...rest } = props;
      const style: React.CSSProperties = {
        width: SIZE_MAP[size],
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -SIZE_MAP[size],
        marginLeft: -SIZE_MAP[size] / 2,
      };
    
      return (
        <Spin {...rest} indicator={<CustomLoad style={style} />}>
          {children}
        </Spin>
      );
    };
    
    export default CustomSpin;
    
    展开全文
  • 自定义加载动画

    2014-12-15 14:00:40
    自定义加载动画效果!简单使用!调用轻量级!
  • 「HTML+CSS」--自定义加载动画【031】
  • 「HTML+CSS」--自定义加载动画【030】
  • 「HTML+CSS」--自定义加载动画【029】
  • 「HTML+CSS」--自定义加载动画【026】
  • 「HTML+CSS」--自定义加载动画【027】
  • 「HTML+CSS」--自定义加载动画【028】
  • 「HTML+CSS」--自定义加载动画【006】
  • 「HTML+CSS」--自定义加载动画【005】
  • Android自定义加载动画

    2017-08-23 09:58:02
    自定义加载动画效果!
  • 今天小编就为大家分享一篇vue自定义正在加载动画的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 也许可以创建像这样的很棒的动画? (这很烂,但您会得到DotLoader,首先,是gif!我是一个恒定点的人:您可以动态添加点!还可以像这样创建一些很酷的动画吗?(这很烂,但您有这个主意:))使用。 添加到您的项目...
  • 自定义WebView自带加载动画.zip
  • 主要为大家详细介绍了Android自定义加载动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Android 自定义加载动画Dialog弹窗

    千次阅读 热门讨论 2020-06-02 16:38:50
    // 加载动画 Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation( context, R.anim.loading_animation); // 使用ImageView显示动画 ivLoading.startAnimation(hyperspaceJumpAnimation); getWindow...
  • android自定义加载动画

    2015-11-04 21:54:11
    该资源包含了一个android自定义加载动画,可以参考博客http://blog.csdn.net/mockingbirds/article/details/49642839,喜欢的下载。
  • Android 帧动画实现自定义loading加载
  • BalloonLoading是一种自定义android加载动画,动画中巧妙的使用Paint和Path绘制了,注射器给气球充气的过程,效果十分酷炫美观~
  • 本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,318
精华内容 34,927
关键字:

自定义加载动画