Android Shimmer 布局微光(闪光,闪烁)效果

发布于:2023-01-22 ⋅ 阅读:(375) ⋅ 点赞:(0)
有时候需要实现类似知乎加载完成前列表中闪光的效果,这里推荐使用facebook的shimmer达到效果。
使用起来比较便利:
dependencies中加入:
implementation 'com.facebook.shimmer:shimmer:0.5.0'

 

布局中使用如下:
<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/sfl_layout"
    app:shimmer_duration="2000"
    android:layout_width="270dp"
    android:layout_height="40dp">
</com.facebook.shimmer.ShimmerFrameLayout>

shimmer_duration:动效周期

执行控件的startShimmer()后

运行效果如下:

 

 

 

下面是官方给出的属性说明:

Clip to Children

Whether to clip the shimmering effect to the children, or to opaquely draw the shimmer on top of the children. Use this if your overall layout contains transparency.

Colored

Whether you want the shimmer to affect just the alpha or draw colors on-top of the children.

Base Color

If colored is specified, the base color of the content.

Highlight Color

If colored is specified, the shimmer's highlight color.

Base Alpha

If colored is not specified, the alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.

Highlight Alpha

If colored is not specified, the alpha of the shimmer highlight.

Auto Start

Whether to automatically start the animation when the view is shown, or not.

Duration

Time it takes for the highlight to move from one end of the layout to the other.

Repeat Count

Number of times of the current animation will repeat.

Repeat Delay

Delay after which the current animation will repeat.

Repeat Mode

What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.

Direction

The travel direction of the shimmer highlight: left to right, top to bottom, right to left or bottom to top.

Dropoff

Controls the size of the fading edge of the highlight.

Intensity

Controls the brightness of the highlight at the center

Shape

Shape of the highlight mask, either with a linear or a circular gradient.

Tilt

Angle at which the highlight is tilted, measured in degrees

Fixed Width, Height

Fixed sized highlight mask, if set, overrides the relative size value

Width, Height ratio

Size of the highlight mask, relative to the layout it is applied to.

更多请参考:Shimmer for Android

如果需要在flutter中使用:shimmer | Flutter Package

本文含有隐藏内容,请 开通VIP 后查看