『Material Design入门学习笔记』动画(含demo)

2,815 阅读4分钟

之前对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中。
最后还是推荐一下我的公众号,欢迎给我留言。
更多的开发知识,可以关注我的公众号: