Reveal Effect(揭露效果)低版本兼容

概述：

 

2014年Google官方发布Android5.0后带来了一系列的在界面上的更新，包括Material Design

(虽然设计这种风格的设计师已经从谷歌离职进入亚马逊)、SVG、转场动画、兼容控件、水波纹、阴影等等。

但是这些效果存在着不可避免的问题—兼容性，虽然谷歌官方和第三方库提供了一些兼容方案，但是还是很难达到与5.0一样的效果。

 

今天带来的是Android5.0提供的揭露效果，此效果谷歌官方并没有提高兼容性的解决方案。

 

先来讲在Android5.0+上如何去用：

//圆形水波纹揭露效果
	ViewAnimationUtils.createCircularReveal(
			view, //作用在哪个View上面
			centerX, centerY, //扩散的中心点
			startRadius, //开始扩散初始半径
			endRadius)//扩散结束半径

在兼容低版本下模仿上述效果:

实现思路:

1.      实现圆形，使用xml自定背景

2.      使用scaleX和scaleY，在所要缩放的view里同时实现缩放

Shape代码:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <!--oval是 shape的属性之一，意思是 椭圆-->
    <!--solid 是shape 的孩子之一，作用是实现填充-->
    <solid android:color="#ff49fdfa"/>
    <!--size 也是shape 的孩子之一，作用是实现 长宽限制-->
    <size
        android:width="300dp"
        android:height="300dp" />
</shape>

布局文件：

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

    <LinearLayout
        android:id="@+id/linearScale"
        android:orientation="vertical"
        android:layout_width="10dp"
        android:background="@drawable/a"
        android:layout_height="10dp">

        </LinearLayout>
    <Button
        android:id="@+id/btnTestScale"
        android:text="xxx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

MainActivity.java:

/**
 * Created by Kiven on 2017/2/14.
 */
public class test extends AppCompatActivity{

    Button btnTestScale;
    LinearLayout linearScale;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        btnTestScale = (Button) findViewById(R.id.btnTestScale);
        linearTestScale = (LinearLayout) findViewById(R.id.linearScale);
        btnTestScale.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ObjectAnimator revealAnimator = ObjectAnimator.ofFloat( //缩放X 轴的
                        linearScale, "scaleX", 0, 200);
                ObjectAnimator revealAnimator1 = ObjectAnimator.ofFloat(//缩放Y 轴的
                        linearScale, "scaleY", 0, 200);
                AnimatorSet set = new AnimatorSet();
                set.setDuration(500);//设置播放时间
                set.setInterpolator(new LinearInterpolator());//设置播放模式，这里是平常模式
                set.playTogether(revealAnimator, revealAnimator1);//设置一起播放
                set.start();
            }
        });
    }
}