Android开发之MaterialDesign动画总结

来源：互联网发布：提取视频音乐的软件编辑：程序博客网时间：2024/09/21 06:36

前言：话说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的揭露出现的效果。

使用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();    }}

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

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

阅读全文

1 0