Android高级UI开发（二十六）Material Design动画--水波纹与揭露效果

今天我们来介绍下Material Design按钮自带的一些动画：水波纹与揭露效果。

源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/11088325

1. 水波纹效果

 

1.1  布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center_horizontal"
              android:orientation="vertical"
              android:paddingBottom="@dimen/activity_vertical_margin"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              tools:context=".LoginActivity">

    <Button
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:text="按钮默认自带水波纹" />
    <TextView

            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:clickable="true"
            android:background="?attr/selectableItemBackground"
            android:text="TextView设置clikable后自带水波纹" />
    <Button
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:text="无边界水波纹" />


    <Button
            android:id="@+id/btReveal"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:text="揭露效果" />
</LinearLayout>

 

第一个Button默认水波纹效果，第二个Textview需要设置clickable=true才能显示水波纹效果，第三个Button设置backgound来实现无边界水波纹效果。第四个Button id=btReveal将在第2节揭露效果里展示。

目前的运行效果图是：

其中按钮的默认颜色与水波纹颜色可以在style中自定义colorControlHighLight与colorButtonNormal.

 

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlHighlight">@color/colorPrimary</item>
        <item name="colorButtonNormal">@color/material_blue_grey_800</item>
    </style>

2. 揭露效果

 

package com.example.myapplication
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import android.view.animation.AccelerateInterpolator
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_login.*

/**
 */
class MainActivity : AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
        btReveal.setOnClickListener(View.OnClickListener {
            Toast.makeText(this,"揭露",Toast.LENGTH_SHORT).show();
            var animator = ViewAnimationUtils.createCircularReveal(btReveal, 0, 0, 0f,
                Math.hypot(btReveal.getWidth().toDouble(), btReveal.getHeight().toDouble()).toFloat()
            );
			animator.setDuration(1000);
			animator.setInterpolator( AccelerateInterpolator());
			animator.start();
            /*从按钮中心开始揭露START
            var animator1 = ViewAnimationUtils.createCircularReveal(btReveal, btReveal.getWidth()/2, btReveal.getHeight()/2,
                0F,
                btReveal.getHeight().toFloat()
            );
            animator1.setDuration(1000);
            animator1.setInterpolator( AccelerateInterpolator());
           animator1.start();从按钮中心开始揭露END*/
        })
    }
}

我们为btReveal定义一个单击函数，然后执行一个揭露动画。使用ViewAnimationUtils调用createCircualReveal来实现一个圆形揭露动画，我们来看一下这个函数的参数：

createCircularReveal(btReveal, 0, 0, 0f,
                Math.hypot(btReveal.getWidth().toDouble(), btReveal.getHeight().toDouble()).toFloat()
            );

第一个参数：btReveal为要显示揭露动画的控件；

第二个参数与第三个参数（0,0）是圆心，这里以按钮的左上角为圆心进行扩散。

第三个参数是，揭露的起始半径。

第四个参数是，揭露的最大半径。