Android 动画进阶 Lollipop

Lollipop动画

Lollipop为咱们带来很多动画，简单而有效，灵活运用提高APP逼格

过渡动画

Activity过渡动画包含两部分 ：

1. Activity的进入和退出
2. 过渡过程当中的共享元素

进入和退出

• explode (分解) ：从屏幕中间进进或出，移动视图
• slide (滑动) : 从屏幕边缘进或出，移动视图

• fade (淡入淡出) ： 经过改变视图的透明度来添加或者移除视图

• 使用 ：
  初始Activity：

• startActivity(mIntent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

目标跳转Activity :

• getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

• getWindow().setExitTransition() - 当A 跳转到 B时，使A中的View退出场景的transition

• getWindow().setEnterTransition() : 当A 跳转到 B时，使B中的View进入场景的transition
• getWindow().setReturnTransition() : 当B 返回到 A时，使B中的View退出场景的transition
• getWindow().setReenterTransition() : 当B 返回到 A时，使A中的View进入场景的transition

上述设置须要在setContentView() 以前设置

一共就是上述三种模式： Explode、Slide 、 Fade、

效果如图：

过渡动画演示.mp4_1492677049.gif

共享元素

• changeBounds : 捕获共享元素的layout bound，而后播放layout bound变化动画。ChangeBounds 是共享元素变换中用的最多的，由于先后两个activity中共享元素的大小和位置通常都是不一样的。
• changeClipBounds : 裁剪目标视图边界,捕获共享元素clip bounds，而后播放clip bounds变化动画。
• changeTransform : 捕获共享元素的缩放（scale）与旋转（rotation）属性 ，而后播放缩放（scale）与旋转（rotation）属性变化动画。
• changeImageTransform :捕获共享元素（ImageView）的transform matrices 属性，而后播放ImageViewtransform matrices 属性变化动画。与ChangeBounds相结合，这个变换可让ImageView在动画中高效实现大小，形状或者ImageView.ScaleType 属性平滑过分。

效果图：

共享元素.mp4_1492769148.gif

• 使用

1. 须要共享的View 在两边的布局 加上 android:transitionName="one" 里面的值是本身定的一个标识，可是必须保持两边一致
2. 在启动Activity中 找到 须要共享的控件而且设置好Tag就能够了（须要注意的传入的只能是View）
3. 在跳转的目标Activity中设置方法：

• getWindow().setSharedElementEnterTransition(); : A->B,B进入动画
• getWindow().setSharedElementExitTransition(); : A->B,A退出动画
• getWindow().setSharedElementReenterTransition(); : B->A，A进入动画
• getWindow().setSharedElementReturnTransition(); : B->A,B退出动画

startActivity(mIntent,
       ActivityOptions.makeSceneTransitionAnimation(this,
     Pair.create(ivImageI, "one"), // 设置共享的控件和他的Tag 就能够了
    Pair.create(ivImageIi, "two"))
    .toBundle());复制代码

动画效果

Ripple (波纹效果)

十分简单在Xml中控件添加

• 有边框波纹：android:background="?android:attr/selectableItemBackground"
• 无边框波纹：android:background="?android:attr/selectableItemBackgroundBorderless"

这个是系统默认的
自定义Ripple一样简单，当即上手

1. drawable文件夹新建一个Ripple资源文件
2. 代码以下：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#cb2eff" android:radius="500dp"> <item android:drawable="@color/blue_i"/> </ripple>复制代码

1. android:background="@drawable/ripple_red"
2. 这就是一个蓝色底，红色波纹的点击效果了

Circular Reveal

其实就是一个圆形路径绘制。
和Animator的使用基本一致
API解析：

• ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius);
• view : 动画的做用目标
• centerX : 动画开始的中心点X坐标
• centerY : 动画开始的中心点Y坐标
• startRadius : 动画开始时的圆半径
• endRadius : 动画结束时的圆的半径

两种应用：

1. 控件点击的动画效果
2. 页面过渡的动画 ： 就是给顶布局 设置 Circular 动画

//设置顶布局过渡动画
 llRoot.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            //当布局已经彻底展现出来再开始动画
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                v.removeOnLayoutChangeListener(this);
                Animator circularReveal = ViewAnimationUtils.createCircularReveal(
                        llRoot,
                        llRoot.getWidth() / 2,
                        llRoot.getHeight() / 2,
                        50,
                       1000);
                circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
                circularReveal.setDuration(1000);
                circularReveal.start();
            }
        });

// 控件设置点击动画效果
        ivImageI.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //实现从左上角开始的扇形展开动画
                Animator circularReveal = ViewAnimationUtils.createCircularReveal(
                        ivImageI,
                        0,
                        0,
                        0,
                        ivImageI.getWidth()+159);
                circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
                circularReveal.setDuration(1000);
                circularReveal.start();
            }
        });复制代码

效果图：

circularAnim.mp4_1492705069.gif

最后

Lollipop 中添加的动画效果仍是十分不错的，并且使用也是十分简单高效
将有需求的动画效果封装在本身的基类文件中使用起来就更加顺畅了

若是觉有有用，能够点赞鼓励一下哈O(∩_∩)O~~
附上：代码Github