Android开发--Facebook酷炫开源库Shimmer使用

最新推荐文章于 2025-04-12 09:34:36 发布

转载最新推荐文章于 2025-04-12 09:34:36 发布 · 566 阅读

安卓-UI篇专栏收录该内容

89 篇文章

订阅专栏

本文介绍如何使用Facebook开源的Shimmer库在Android应用中添加闪光动画效果，包括配置步骤、布局文件使用、动画启动及自定义闪光效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 [-]
使用Shimmer 
   配置工程
添加到布局文件
开始动画
 
定制自己的闪光效果 
   设置动画时间间隔
设置动画重复类型
设置闪光的倾斜角度
设置光的宽度
设置透明度
设置光的形状
 

今天在上网的时候无意间看到了Facebook的Shimmer开源库，感觉很是酷炫，而且使用超方便，决定给大家介绍一下。Shimmer是Facebook提供的一项基于Java的library，它可以使Android中的所有View控件具有闪光的效果。该项目的GitHub项目托管地址，请猛戳https://github.com/facebook/shimmer-android

使用Shimmer

配置工程

首先，我们在GitHub上将该项目clone到本地；
接下来我们在Android studio中导入所需要的module，即shimmer-android；
最后，需要配置一下下自己的gradle，引用该module：

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">dependencies {
       compile <span class="hljs-function" style="box-sizing: border-box;">project(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">':shimmer-android'</span>)</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

添加到布局文件

ShimmerFrameLayout是我们需要使用的类，它继承于Android的Layout，这也就意味着我们可以将自己的布局控件嵌套在该布局之内以实现闪光的效果，简单方便。

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.facebook</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.shimmer</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ShimmerFrameLayout</span>
    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/shimmerContent"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>>

    <TextView 
        android:text=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@string/hello_world"</span>
        android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
        android:textSize=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40sp"</span>
        android:textColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#fff"</span>
        android:layout_gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>
        android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> />
</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.facebook</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.shimmer</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ShimmerFrameLayout</span>></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

开始动画

在Activity中获得该布局ShimmerFrameLayout，并调用其startShimmerAnimation方法，我们就可以看到闪光效果了。

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">ShimmerFrameLayout shimmerFrameLayout = (ShimmerFrameLayout) findViewById(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.id</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.shimmerContent</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
shimmerFrameLayout<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startShimmerAnimation</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

效果如下：

定制自己的闪光效果

Facebook为该类提供了几个方法允许我们定制自己的闪光效果，API文档详见http://facebook.github.io/shimmer-android/javadoc/index.html

设置动画时间间隔

setDuration方法允许我们传入一个int值来对动画的时间间隔设置，单位是毫秒

设置动画重复类型

ShimmerFrameLayout之下的setRepeatMode方法可以允许我们设置动画的重复模式，有两种
REVERSE或者RESTART，REVERSE表示，闪光从左到右，之后在从右到左这样往复；而RESTART表示闪光每次总是从左到右。
为了更形象的说明，我们在代码中添加，

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">shimmerFrameLayout<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setRepeatMode</span>(ObjectAnimator<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.REVERSE</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

可以看到如下效果：

设置闪光的倾斜角度

setTilt方法允许我们设置光的倾斜角度，传入参数是float类型，表示倾斜的角度，正值表示顺时针倾斜，负值表示逆时针倾斜。
setAngle方法，与其说是设置角度不如说是设置方向，因为该方法的传入参数只能被设置为以下四种之一，
ShimmerFrameLayout.MaskAngle.CW_0 表示从左到右的方向
ShimmerFrameLayout.MaskAngle.CW_90 表示从上到下的方向
ShimmerFrameLayout.MaskAngle.CW_180 表示从右到左的方向ShimmerFrameLayout.MaskAngle.CW_270 表示从下到上的方向