Android 动画学习笔记（二）

引言

学习动画的过程中，发现并没有那么简单。
以前只知道补间动画，属性动画，现在觉得真是弟弟。
话不多说，开始总结。

本文引用了一些网络图片，在此感谢各位作者。

转场动画

Android提供了三种现成的动画：explode、slide、fade

explode	slide	fade

实现转场动画步骤如下：
1.设置windowContentTransitions属性为true
java:

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

XML:

 <item name="android:windowContentTransitions">true</item>

2.设置Enter(进入) / Exit（退出） 效果

setExitTransition() - 当A startB时，使A中的View退出场景的transition 在A中设置

setEnterTransition() - 当A startB时，使B中的View进入场景的transition 在B中设置

setReturnTransition() - 当B 返回A时，使B中的View退出场景的transition 在B中设置

setReenterTransition() - 当B 返回A时，使A中的View进入场景的transition 在A中设置

java:

Slide slide = new Slide(Gravity.BOTTOM);
slide.setDuration(200);
getWindow().setEnterTransition(slide);

XML：
首先在res/下建立transition目录，将以下xml放入transition目录下。

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000">
</fade>

然后在Activity中设置transition

Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
getWindow().setExitTransition(transition );

3.跳转界面时调用startActivity(Intent intent, Bundle options)方法
必须调用这个方法才有效果。

startActivity(intent,ActivityOptions.makeBasic().toBundle());

共享元素

共享元素会实现跳转时的无缝动画。

效果

可以看到其中的共享因素为头像及昵称

实现步骤：

设置windowContentTransitions属性为true，上文有。

我们假设A 界面跳转到 B界面

1.A界面
在跳转到B界面时，需要传入ActivityOptions作为参数

ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this,
                        Pair.create(findViewById(R.id.tv_share), "share_text"),
                        Pair.create(findViewById(R.id.img_share), "share"));
                startActivity(intent,transitionActivityOptions.toBundle());

这里的Pair是共享元素，调用Pair <A, B> create(A a, B b) 方法添加一个共享元素，如：

Pair.create(findViewById(R.id.img_share), "share"));

这里的两个参数分别为：

1.所要共享的View控件 2.标识符（这里的标识符要与B界面的共享元素xml中transitionName属性一致）

B界面：
Java代码无需操作，只需要在布局XML中为目标控件设置transitionName

如下：

注意一下android:transitionName属性的值要与传过来的Pair中的标识符一致

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="share_text"
        android:text="Share TXT"
        />

这样就完成啦。

揭示动画

效果

主要方法：

ViewAnimationUtils.createCircularReveal(View view, int centerX,  int centerY, float startRadius, float endRadius)

参数说明：第一个为目标View，第二、三个是揭露动画中心点坐标，第四个是开始的半径，第五个为结束半径。

结束半径一般为对角线长度（因为只有半径为对角线长度才不会有少揭示的动画）

注意：

使用时揭示动画一般会切换View的显示状态

1.从Visible 到Invisible要在结束时设置setVisiblity(View.INVISIBLE);
2.从Invisible到Visible要在显示的时候设置setVisiblity(View.VISIBLE);

原因是从显示到隐藏是在最后动画结束的时候隐藏，而隐藏到显示是需要在开始的时候就将View设可见的，不然是没有效果的。

触摸反馈动画

1.如何修改默认颜色？

使用Rippe标签的XML文件自定义Ripple颜色

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
</ripple>

设置background即可

2.有边界与无边界如何使用？

有边界：

android:background="?android:attr/selectableItemBackground"

无边界：

android:background="?android:attr/selectableItemBackgroundBorderless"

3.形状控制矩形、圆形及设置默认颜色

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">

    <item>
        <shape android:shape="rectangle"
            >
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>

</ripple>

ripple标签下的color是设置水波纹颜色，shape标签的shape控制形状，shape->solid ->color是默认背景颜色

矢量图动画（SVG）

1.为什么要使用SVG图？

（1）SVG图不会随着分辨率变化而失真
（2）用XML语言描述，易于修改
（3）跨平台

2.如何使用SVG图
（1）获取SVG图途径
Android Studio编译器自带New->Vector Assets选择对应图片，填写大小就完成啦

从阿里图库获取阿里矢量图

（2）使用SVG图

vector标签

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
 
        <path
            android:fillColor="#FF000000"
            android:pathData="M12,3v9.28c-0.47,-0.17 -0.97,-0.28 -1.5,-0.28C8.01,12 6,14.01 6,16.5S8.01,21 10.5,21c2.31,0 4.2,-1.75 4.45,-4H15V6h4V3h-7z" />
 
</vector>

设置background即可

3.SVG 动画

vector.xml SVG图资源

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <group
        android:name="test"
        android:rotation="0"
        android:pivotX="12"
        android:pivotY="12"
        >
        <path
            android:fillColor="#FF000000"
            android:pathData="M12,3v9.28c-0.47,-0.17 -0.97,-0.28 -1.5,-0.28C8.01,12 6,14.01 6,16.5S8.01,21 10.5,21c2.31,0 4.2,-1.75 4.45,-4H15V6h4V3h-7z" />
    </group>
</vector>

objectionAnimator属性动画控制属性

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360">

</objectAnimator>

胶水animated-vector，作用：将属性动画与Vector图资源连接在一起

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_audiotrack_black_24dp">
    <target
        android:name="test"
        android:animation="@animator/anim" />

</animated-vector>

JAVA代码使用:

Drawable drawable = img.getDrawable();
                if(drawable instanceof Animatable) {
                    ((Animatable) drawable).start();
                }

除了使用这种形式的动画，还可以用一般的动画实现效果。

注意：

1.target中的name名称要与vector0>group下的name属性一致。

2.如果是旋转动画或者缩放动画要制定坐标即android:pivotX，android:pivotY其中的值对应android:viewportWidth，android:viewportHeight，如果是中心点，即两个值的一半，如上面的情况要填24/2=12。

3.android:propertyName这里的值要与group下需要变化的值相同。

特殊属性

1.fillAfter 覆盖最后的状态，意思是动画结束后保持最后的效果。
2.fillBefore 覆盖最开始的小姑哦，意思是动画结束后保持最开始的效果。
3.repeatMode 重复模式reverse（从结束的位置继续）、restart（重新开始）
4.repeatCount 重复次数，-1为一直循环
5.objectAnimator属性的valueType 值类型：intType、floatType、colorType、pathType
6.objectAnimator属性的valueFrom，valueTo与valueType一起使用，从某个值到某个值。
7.interpolator 插值器，数据变化速率控制器
8.propertyName 属性名称，使用此动画的控件需要有该名称的set方法，如properName = “size” 控件需要有对应的setSize方法。

为objectAnimator xml绑定View：

Animator animator = AnimatorInflater.loadAnimator(this, R.animator.alpha);
animator.setTarget(imageView);
animator.start();