GradualFlash-渐变/闪光效果控件

前言

平时做需求的时候,我们经常会遇到渐变效果的开发,有时候渐变还是带着动画的,那么开发的时候,简单的做法是写一个textView,设置他的paint,paint中设置的渐变的shader.这方式虽然简单,但是如果实在其他控件上也要有渐变,那就都要重新开发一次了.
后来看到了facebook的shimmer,这个控件可以很好解决这个问题,而且效果也是我们需要的效果.对此仿造了一个GradualFlash,效果类似,只是增加多了方法和显示效果设置.

git链接

引入:
```
implementation 'com.github.lewis-v:GradualFlash:v0.0.3'
```

原理

实现的原理很简单,也是使用paint的shader来实现,但是为了让其子控件有渐变的颜色,所以对画笔设置了xfermode(Mode.SRC_IN)

效果

使用

gradle中引入

	implementation 'com.github.lewis-v:GradualFlash:v0.0.3'

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gf="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lewis.gradualflashSample.MainActivity">

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="普通-线性渐变"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="普通-半径渐变"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="颜色模式-COLOR_TYPE_NORMAL"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="颜色模式-COLOR_TYPE_FLASH"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="无动画,实现普通的渐变效果"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="无动画-一半渐变"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_bg"
            android:padding="10dp"
            android:text="加个边框"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_bg"
            android:padding="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="边框放在容器里"
                android:textColor="#34871293" />

        </FrameLayout>
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_bg"
            android:padding="10dp"
            android:text="加个边框-COLOR_TYPE_FLASH"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <com.lewis.gradualflash.GradualFlashLayout
        android:id="@+id/gf9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_bg"
            android:padding="10dp"
            android:text="加个边框-Xfermode使用MULTIPLY"
            android:textColor="#34871293" />
    </com.lewis.gradualflash.GradualFlashLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.lewis.gradualflash.GradualFlashLayout
            android:id="@+id/gf10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            gf:gf_height_color="#000000"
            gf:gf_low_color="#ff0000">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/shape_bg"
                android:padding="10dp"
                android:text="xml中设置"
                android:textColor="#34871293" />
        </com.lewis.gradualflash.GradualFlashLayout>
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#333333">

        <com.lewis.gradualflash.GradualFlashLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/shape_bg"
                android:padding="10dp"
                android:text="默认添加的GF"
                android:textColor="#34871293" />
        </com.lewis.gradualflash.GradualFlashLayout>
    </FrameLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_bg"
        android:padding="10dp"
        android:text="原始样式"
        android:textColor="#34871293" />


</LinearLayout>

MainActivity

//普通-线性渐变
        gf.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }
        //普通-半径渐变
        gf1.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_RADIAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }

        //颜色模式-COLOR_TYPE_NORMAL
        gf2.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_NORMAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }

        //颜色模式-COLOR_TYPE_FLASH
        gf3.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_FLASH)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }

        //无动画,实现普通的渐变效果
        gf4.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_FLASH)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(false)
                    .build()
            )
        }

        //无动画-一半渐变
        gf5.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_NORMAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setFlashWidthRatio(0.5f)
                    .setAnimStartXRatio(0.5f)
                    .setAutoStart(false)
                    .build()
            )
        }
        //加个边框
        gf6.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_NORMAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }
        //边框放在容器里
        gf7.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_NORMAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }
        //加个边框-COLOR_TYPE_FLASH
        gf8.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.RED)
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_FLASH)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setAutoStart(true)
                    .build()
            )
        }
        //加个边框-Xfermode使用MULTIPLY
        gf9.run {
            setGradualFlash(
                GradualFlash.GFBuilder()
                    .setLowColor(Color.parseColor("#11FF0000"))
                    .setShapeMode(SHAPE_MODE_LINE)
                    .setColorType(COLOR_TYPE_NORMAL)
                    .setHeightColor(Color.BLACK)
                    .setAnimDuration(1000)
                    .setXfermode(PorterDuff.Mode.MULTIPLY)
                    .setAutoStart(true)
                    .build()
            )
        }