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

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

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

1. 水波纹效果

 

1.1  布局文件

 

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

目前的运行效果图是：

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

 

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）是圆心，这里以按钮的左上角为圆心进行扩散。

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

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