zoukankan      html  css  js  c++  java
  • 【老孟Flutter】41个酷炫的 Loading 组件库

    老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以。

    Github 地址:https://github.com/781238222/flutter-do/tree/master/m_loading_sample

    效果如下:

    在项目的 pubspec.yaml 文件中添加依赖:

    dependencies:
      m_loading: ^0.0.1
    

    执行命令:

    flutter pub get
    

    所有 loading 动画组件的用法大同小异,都有 duration(动画时长) 和 curve(动画曲线)参数,以及外观样式的设置,下面是一些 loading 动画组件的用法。

    小球类的动画组件中有 BallStyle 类型的参数,此参数表示小球样式,用法如下:

    BallCircleOpacityLoading(
      ballStyle: BallStyle(
        size: 5,
        color: Colors.red,
        ballType: BallType.solid,
      ),
    )
    

    • size:小球大小
    • color:小球颜色
    • ballType:小球类型,hollow:空心,solid:实心
    • borderWidth:边框宽
    • borderColor:边框颜色

    设置空心球:

    BallCircleOpacityLoading(
      ballStyle: BallStyle(
        size: 5,
        ballType: BallType.hollow,
        borderWidth: 1,
        borderColor: Colors.red
      ),
    )
    

    设置动画时长和动画曲线:

    Ring2InsideLoading(
      color: Colors.blue,
      duration: Duration(milliseconds: 1200),
      curve: Curves.bounceInOut,
    )
    

    非小球类的组件使用:

    PacmanLoading(
      mouthColor: Colors.blue,
      ballColor: Colors.red,
    )
    

    PouringHourGlassLoading(
      color: Colors.blue,
    )
    

    用法基本都是类似的,下面是所有动画组件的效果及对应的组件名称:

    BallPulseLoading Ball4ScaleLoading BallGridPulseLoading BallCirclePulseLoading
    Ball3OpacityLoading Ball4OpacityLoading BallGridOpacityLoading BallCircleRotateLoading
    BallBounceLoading BallRotateScaleLoading Ball2TrianglePathLoading BallCircleOpacityLoading
    Ball3TrianglePathLoading BallInsideBallLoading BallClipRotatePulseLoading BallCircleInsideRotateLoading
    RingRotate Ring2InsideLoading Ring2SymmetryLoading RingBallRotateLoading
    RingClipRotateMultiple WaterCircleLoading Water2CircleLoading WaterRipple
    WaterMultipleCircleLoading WaterPulseLoading BarPulseLoading BarScaleLoading
    BarScale1Loading BarScalePulseOutLoading BarMusicLoading Square4OpacityLoading
    SquareFadingLoading SquareRotateLoading SquareGridScaleLoading CircleRotateLoading
    CirclePulseLoading CircleSquareLoading Circle2InsideScaleLoading PouringHourGlassLoading
    PacmanLoading

    交流

    老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

    欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

  • 相关阅读:
    免费素材:推荐最新的免费图标字体Sosa
    如何选择Javascript模板引擎(javascript template engine)?
    名片设计最佳实践和技巧分享
    帮助你生成翻页效果的jQuery插件 bookblock
    网页网站收集
    main xml信息
    c# winrar 打包
    c# 压缩文件
    前端工程师
    fash 3D 游戏
  • 原文地址:https://www.cnblogs.com/mengqd/p/14099923.html
Copyright © 2011-2022 走看看