『Material Design入门学习笔记』动画（含demo）

以前对Material Design的风格有了一些大致的了解，从这篇文章开始就要介绍代码了。
此次文章介绍的代码是比较杂的，有不一样形式的动画。之前的移动放缩就不说了，主要介绍一些不经常使用的。
由于涉及到动画效果，本文不作截图了，截图过大，有时候上传会失败。须要的用户，能够下载个人demo进行测试。
『Material Design入门学习笔记』前言
『Material Design入门学习笔记』动画（含demo）
『Material Design入门学习笔记』主题与AppCompatActivity（附demo）
demo下载

---

按钮交互

前面提到过的就是按钮交互，点击有个波纹状态这个怎么实现呢？
只须要对波纹设置一个背景便可：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:transitionName="button2"
        android:id="@+id/button2"
        android:text="波纹有边界"/>复制代码

另一种是波纹超出按钮边界的：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:transitionName="button3"
        android:text="波纹超出边界"/>复制代码

动画效果的实现

若是你下载了个人demo，看到效果必定以为这种波纹效果不错，这种动画是如何实现的呢？
你仔细看波纹效果，发现其实，这是一个画圆的过程，一个从小到大的圆。知道了这个，就好实现了。
使用ViewAnimationUtils这个类，能够实现一个画圆的动画。

Animator animator = ViewAnimationUtils.createCircularReveal(
                    img,
                    img.getWidth()/2,
                    img.getHeight()/2,
                    img.getWidth(),
                    0);//img为一个imageview
                animator.setInterpolator(new AccelerateDecelerateInterpolator());
                animator.setDuration(2000);
                animator.start();复制代码

如今对createCircularReveal方法进行一个说明：

• 第一个参数：表明的是你要操做的view
• 第二个参数：圆的x方向的中点，
• 第三个参数：圆的y方向的中点，
• 第四个参数：圆开始时候的半径
• 第五个参数：圆结束时候的半径

Activity过渡动画

在Android5.0以后咱们可使用google提供的Transition框架来实现Activity之间或者Fragment的动画变换效果。
这个与以前的overridePendingTransition是不太同样的，动画效果更加平滑一些。
对于须要使用动画的Activity，须要先设置容许使用Transition:

//设置容许经过ActivityOptions.makeSceneTransitionAnimation发送或者接收Bundle
        getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
        //设置使用TransitionManager进行动画，不设置的话系统会使用一个默认的TransitionManager
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);复制代码

而后能够对这个Activity设置动画，设置方法有如下四种：

//A打开B的时候，A中的View是如何播放动画的
getWindow().setExitTransition(new Fade());
//A打开B的时候，B中的View是如何播放动画的
getWindow().setReenterTransition(new Explode());
//B返回A的时候，B中的View是如何播放动画的
getWindow().setEnterTransition(new Slide());
//B返回A的时候，A中的View是如何播放动画的
getWindow().setReturnTransition(new Fade());复制代码

动画主要有如下三种形式：

• Fade(淡出)
• Explode(分解)
• 以及Slide(滑动)

使用的时候能够，参照如下代码：

ActivityOptions option = ActivityOptions.makeSceneTransitionAnimation(Animation.this);
 Intent explode = new Intent(Animation.this,ExplodeTransitionActivity.class);
                getWindow().setExitTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReenterTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setEnterTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReturnTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                startActivity(explode, option.toBundle());复制代码

具体效果能够参照个人demo：

getWindow().setExitTransition(new Explode().setDuration(Constants.TRANSITIONTIME));复制代码

我对动画设置了时间，方便用户观看，比较各类动画之间的差别。
这时可能会有人问ActivityOptions是什么，这个立刻就要说到，使用Transition，能够设置view的共享动画

共享动画

先说一下什么叫共享动画，好比你从A Activity切换到B，可能两个Activity中都有相同的组件，并且位置什么都没有变化，你但愿在Activity变化时，这些组件不动，其余地方执行动画，这时就要用到共享动画了，效果能够参照个人demo。
首先我须要对相同的组件设置android:transitionName="button1"

<Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:transitionName="button1"
            android:id="@+id/button1"
            android:text="无动画"/>复制代码

而后使用以下代码：

Intent shareelements = new Intent(Animation.this,ShareElementsActivity.class);
                getWindow().setExitTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setExitTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReenterTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setEnterTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReturnTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                View imageview = findViewById(R.id.img);
                View btn1 = findViewById(R.id.button1);
                View btn2 = findViewById(R.id.button2);
                View btn3 = findViewById(R.id.button3);
                Bundle bundle = ActivityOptions.makeSceneTransitionAnimation( this,
                    Pair.create(imageview,"img"),
                    Pair.create(btn1, "button1"),
                    Pair.create(btn2, "button2"),
                    Pair.create(btn3, "button3")).toBundle();
                startActivity(shareelements, bundle);复制代码

我保持了四个组件不动，一个imageview，三个button，可是这里要注意，这里必需要用view，不能使用ImageView，不然会报错。
这样咱们再执行这段代码，就会实现，activity 淡出屏幕的效果，可是这四个组件不动。

总结

此次没有作动画的截图，由于我对动画设置了时间，作一个动图太大，喜欢的朋友仍是下载个人demo观看。以后关于Material Design的代码我都会放入这个demo中。
最后仍是推荐一下个人公众号，欢迎给我留言。
更多的开发知识，能够关注个人公众号：