Android开发之MaterialDesign动画总结

前言：话说MaterialDesign的效果很是强大，相信你看了我之前总结的MD控件的使用，你对MD风格也有一定的了解。相信你看了我之前的属性动画《Android开发之安卓属性动画大总结》，对安卓的动画有一定的了解，今天我们就来总结一下MD的动画效果，介绍1、Touch Feedback（触摸反馈）；2、Reveal Effect（揭露效果）；3、3.Activity transition（Activity转场动画效果）；

------- 一：Touch Feedback（触摸反馈）----------

例子水波纹效果（5.x以上自带的效果，关于如何兼容5.x以下的水波纹，我们以后再单独）

我们直接看代码：

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="5.x自带按键效果" />

    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:gravity="center"
        android:text="按下效果" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:text="按下圆形水波纹" />

</LinearLayout>

效果图展示（三个效果依次展示）：

当然了我们也可以自定义按下的效果颜色（设置再style中）：

   <!--可以修改背景颜色和水波纹的颜色：-->
        <item name="colorControlHighlight">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/material_blue_grey_800</item>

效果展示：

--------- 二：Reveal Effect（揭露效果）---------

例子：Activity的揭露出现的效果。

扫描二维码关注公众号，回复： 10462727 查看本文章

使用ViewAnimationUtil工具类来完成此效果。

ok，我们先来看下第一个效果：

代码：

 bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(bt1,//作用在哪个View上面
                        bt1.getWidth() / 2, bt1.getHeight() / 2,//扩散的中心点
                        0,//开始扩散初始半径
                        bt1.getHeight());//扩散结束半径
                animator.setDuration(1000);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.start();
            }
        });

使用起来很是方便，当然我们也可以做出其他的效果，相关api不用我多做解释了吧。

ok我们再来看下第二个效果：

代码：

bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(bt2, 0, 0, 0,
                        (float) Math.hypot(bt2.getWidth(), bt2.getHeight()));
                animator.setDuration(1000);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.start();
            }
        });

其他效果可以自行测试！

---------- 三：Activity transition（Activity转场动画效果）---------

就是两个Activity进行跳转的时候，转场动画。

1、5.0之前通常使用三种系统带的：滑动效果(Slide)、展开效果Explode、渐变显示隐藏效果Fade。

看下滑动效果：

代码实现：

 public void jump(View view) {
        //平移效果
        startActivity(new Intent(MainActivity.this, SecondActivity.class));
        overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
    }

其他两种效果可自行实现。

2、共享元素转换：把两个Activity当中的相同的元素关联起来做连贯的变换动画，当然效果肯定是比上面的要好。

使用ActivityOptions类。但是这个类只支持API21以上的版本。所以我们一般使用这个兼容类：ActivityOptionsCompat（v4包中），此类在低版本上面并没有转场动画效果，只能使用上述普通的slide来进行相应的转换。共享元素转换分为单个共享元素和多个共享元素。

其中最关键的是给两个Activity当中的共享元素view都设置同一个名字---android:transitionName

还需要给两个Activity都设置如下：
//方法一：
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//方法二：
修改主题：<item name="android:windowContentTransitions">true</item>

1）单个元素共享（放大效果展示图）：

全部代码：MainActivity类：

public class MainActivity extends AppCompatActivity {

    private Button button;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //设置允许使用转场动画
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.iv);
        button = (Button) findViewById(bt);
    }

    public void jump(View view) {

        //放大效果//单个元素共享
//		ActivityOptions
//        		ActivityOptionsCompat optionsCompat = ActivityOptionsCompat
//				.makeSceneTransitionAnimation(
//						activity, //当前的Activity
//						sharedElement,//共享元素---哪一个View
//						sharedElementName)//共享元素的名称 android:transitionName="iv_meinv3"
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, "meinv");
        Intent intent = new Intent(this, SecondActivity.class);
        startActivity(intent, optionsCompat.toBundle());
    }
}

activity_main布局：

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/timg"
        android:transitionName="meinv" />

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="jump"
        android:text="MainActivity"
        android:textAllCaps="false"
        android:transitionName="bt" />

</LinearLayout>

SecondActivity代码：

public class SecondActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        //设置允许使用转场动画
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}

activity_second布局：

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

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/timg"
        android:transitionName="meinv" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="SecondActivity"
        android:textAllCaps="false"
        android:transitionName="bt" />
</RelativeLayout>

2）多个元素共享（效果展示图）：

发现里面有几个不一样的地方：第一个是加了一个toolBar（为了好看），第二个是Button也跟随着图片变化，然后变字，so这就是多个元素的共享！

ok来看代码（其他的代码和上面单个元素共享一样，这里就不贴出代码了）：

        //多个共享元素
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat
                .makeSceneTransitionAnimation(this, Pair.create((View) imageView, "meinv"), Pair.create((View) button, "bt"));
        Intent intent = new Intent(this,SecondActivity.class);
        startActivity(intent,optionsCompat.toBundle());

3）元素不共享（但是需要配合其他动画）：

MainActivity中：

public void jump(View view) {
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        startActivity(intent, optionsCompat.toBundle());
    }

SecondActivity中：

public class SecondActivity extends AppCompatActivity {
    @SuppressLint("NewApi")
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        //设置允许使用转场动画
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        Slide slide = new Slide();
        slide.setDuration(500);
        getWindow().setExitTransition(slide);//出去1动画
        getWindow().setEnterTransition(slide);//进来的动画

//        Explode explode = new Explode();
//        explode.setDuration(1000);
//        getWindow().setExitTransition(explode);//出去的动画
//        getWindow().setEnterTransition(explode);//进来的动画
//
//        Fade fade = new Fade();
//        fade.setDuration(1000);
//        getWindow().setExitTransition(fade);//出去的动画
//        getWindow().setEnterTransition(fade);//进来的动画
    }

    @SuppressLint("NewApi")
    public void back(View view) {
        onBackPressed();
    }
}

其他两种效果可自行实现，这里就不一一实现了。

-------------------完------------------

等待着冬天的风

发布了129 篇原创文章 · 获赞 83 · 访问量 8万+

私信关注

Android开发之MaterialDesign动画总结

猜你喜欢