Facebook开源闪光效果库:Shimmer

QuibblerQuibbler 2022-04-08 约 7 分钟 3517 次阅读

Facebook开源闪光效果库:Shimmer

Facebook开源的库总是令人称赞,比如强大的Android调试工具Stetho、大名鼎鼎的跨端框架React Native、声明式UI渲染框架Litho等均是出自Facebook。

Shimmer也是Facebook开源的一个Android库,提供了一种简单的方法为应用中的任何视图添加闪光效果。最近借助它实现内容加载骨架,无论在开发过程中,还是最终效果呈现,此开源库的体验都不错。

GitHub:githubfacebook/shimmer-android

github.io/shimmer-android

项目中使用Shimmer,要在build.gradle中添加如下依赖:

//http://facebook.github.io/shimmer-android/
    implementation 'com.facebook.shimmer:shimmer:0.5.0'

首先,修改一下布局,只需将要闪光的布局内容移动到ShimmerFrameLayout节点下:

<com.facebook.shimmer.ShimmerFrameLayout 
        ...
        android:id="@+id/shimmer_frame_layout"
        app:shimmer_auto_start="false"
        app:shimmer_base_alpha="0.8"
        app:shimmer_base_color="@color/white"
        app:shimmer_colored="false">
        
        
        <!-- 需要闪光的内容放在ShimmerFrameLayout节点下 -->
        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            ...
        </RelativeLayout>
        
        
    </com.facebook.shimmer.ShimmerFrameLayout>

其次,根据业务逻辑,加载内容时,启动动画:

binding.shimmerFrameLayout.startShimmer()

内容加载完成显示时,停止动画:(当然,涉及onStop、onPause、onResume等生命周期动画状态也得相应改变)

binding.shimmerFrameLayout.stopShimmer()

是不是非常方便省心?更多用法,详见官方文档: shimmer-android/javadoc。

Shimmer的功能设计的非常完善,各种场景考虑很全面。开发中想到的,这里都已实现,只需设置对应属性即可控制外观、角度、速度等效果,完整属性列表如下:

shimmer_clip_to_children: 是否将闪光效果剪辑给子View,或者不透明地在子View上绘制闪光。
shimmer_colored:          无论您是希望微光仅影响 alpha 还是在子View的顶部绘制颜色。
shimmer_base_color:       如果指定了颜色,则为内容的基色。
shimmer_highlight_color:  如果指定了彩色,则为微光的高光颜色。
shimmer_base_alpha:       如果未指定颜色,则用于渲染基本视图的 alpha透明度。
shimmer_highlight_alpha:  如果未指定颜色,则闪烁突出显示的 alpha。
shimmer_auto_start:       是否在显示视图时自动启动动画。
shimmer_duration:         突出显示从布局的一端移动到另一端所需的时间。
shimmer_repeat_count:     当前动画的重复次数。
shimmer_repeat_delay:     延迟,在此之后当前动画将重复。
shimmer_repeat_mode:      动画到达终点后应该做什么,要么从头重新开始,要么向后倒退。
shimmer_direction:        微光高光的行进方向:从左到右、从上到下、从右到左或从下到上。
shimmer_dropoff:          控制高光淡化边缘的大小。
shimmer_intensity:        控制中心高光的亮度
shimmer_shape:            高光遮罩的形状,可以是线性渐变,也可以是圆形渐变。
shimmer_tilt:             高光倾斜的角度,以度为单位
shimmer_fixed_width:      固定大小的高光遮罩(如果设置)会覆盖相对大小值
shimmer_fixed_height
shimmer_width_ratio:      高光遮罩的大小,相对于它所应用的布局。
shimmer_height_ratio

开发完后,发现关注的一位首尔大神:Skydoves,也开发了一个类似功能的库:LandScapist,同样可以用来实现内容加载时的闪光效果。选择一个合适的开源库,要从知名度(作者/社区)、社区活跃度(issues/star/fork)、维护投入(提交数量/时间)、开源协议(Apache 2.0/GPL/LGPL)等多方面考虑。

相关推荐

精选
Airbnb开源项目
开源

Airbnb开源项目

Airbnb Engineering & Data ScienceAirflow Use Apache Airflow (incubating) to author workflows as directed acyclic graphs (DAGs) of tasks12,263Airpal Web UI for PrestoDB2,502Aerosolve A machine learning

1.8k
OkHttp线程池和连接池
开源

OkHttp线程池和连接池

OkHttp线程池和连接池了解了OkHttp的网络请求流程以及拦截器实现原理,再关注OkHttp中两个重要的:OkHttp的线程池和连接池。1、OkHttp线程池在OkHttp网络请求流程一文中,我们分析了OkHttp异步和同步请求流程。请求最后都在Dispatcher中分发调度处理,最后被ExecutorService执行。1.1、DispatcherDispatcher中执行任务的执行器是ex

5.2k
优美的开源动效库:Lottie
开源

优美的开源动效库:Lottie

优美的开源动效库:Lottie1、强大的动效LottieLottie是一个适用于Android,iOS,Web和Windows的库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并在移动设备和Web上原生渲染它们!GitHub:https://github.com/airbnb/lottie-androidLottie官网:http://airbn

4.3k