android 同根动画_android 动画系列 (1)

这是我这个系列的目录，有兴趣的可以看下： android 动画系列 - 目录

tween 动画早些时候我们也叫补间动画(我也不知道为啥),现在也有叫 view 动画的。tween动画是2.X 时代的产物，因为效果不理想，4.X 时代推出了动画的升级版属性动画。给我的感觉属性动画就是tween动画的升级版，属性动画就是替换 tween 的，现在来看也的确时这样的，大部分的场景我们现在都是使用属性动画的，只有一些较老的 api 中会使用 tween 动画。

既然tween 动画和属性动画是承前启后的关系，那么2者理所应当的在使用是很相似，参数也很相似，这里有些参数我们在 tween 动画这节中介绍过后，就不再属性动画中介绍了。

tween 动画实现的的4种动画效果：

平移动画 TranslateAnimation

缩放动画 ScaleAnimation

旋转动画 RotateAnimation

透明度动画 AlphaAnimation

对于tween 动画，目前使用的机会并不是很多了，使用时一般都是使用定义好的动画xml文件，推荐大伙这么做。

xml 文件定义的位置：/res/anim目录下

通用 xml 属性介绍

Snip20170722_18.png

上面这些都是我在定义 xml tween 动画时会用到的属性，上面的表里基本上很全了，解释的也很到位

android:startOffset="100" 注意这个 startOffset 参数，这是动画执行的延迟时间，tween 动画使用 startOffset 属性，属性动画使用 delay 属性，这是 tween 和属性动画在定义时需要注意的，话说使用同一个单词不好嘛，非要用2个...

tween 动画数值体系和坐标体系

先来说一下坐标体系，这个属于大家应该熟记的，也是能猜测出来的，tween 动画时作用与 view 之上的，那么 tween 的坐标体系也是以目标 view 的坐标为参考的。具体来说就是以目标 view 的左上角为坐标原点。明白这点我么再往下面看。

细心的朋友应该会发现，我们在设置 tween 动画参数时出现过3种不同的写法：30，30%，30%p。这3种写法有其不同的含义，我们来仔细看一下。

参数数值体系，这里以平移来举例：

30，以目标 view 的左上角为原点，让 view 向右移动30px

30%，以目标 view 左上角为原点，让 view 向右移动 view 宽度的30%

30%p，以目标 view 左上角为原点，让 view 向右移动父容器宽度的30%

了解了 tween 动画的坐标系，再来看动画的数值参数，移动的方向大伙都应该知道了，那么具体上面3种写法就是偏移量的不同了，30是 px 像素，30%是以 view 自身宽高算的，30%p 是以 view 的父容器的宽高算的

缩放，旋转动画的中心点大伙应该都恩那个猜出来是view 的左上角了吧，我们学习很重要的一点就是举一反三，看破一点，总揽全局。

translate位移动画

效果图：添加了自动返回的代码

ezgif.com-video-to-gif.gif

tween 动画我们可以使用 xml 来定义，也可以自己撸代码

xml 定义：

android:duration="600"

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="100"

android:toYDelta="100"

我们定义完 xml 文件后，不就是完事了，我们还得把动画绑定给一个 view ，并开始才能启动动画效果

Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.tran1); // R.anim.tran1是我们定义号的动画 xml

imageTest.startAnimation(animation1); // imageTest是要显示动画的 view

这样我们就可以使用tween 动画了，当然这是最简单的使用方式了，注意看所有的 tween 动画的都实现了 Animation接口。

对于 xml 的定义，虽然上面介绍过参数的含义了，我在这里还是说一下的好，便于理解啊。

duration 是动画执行时间，我们要是不写的话，默认是300ms，在 xml 中，时间都是以 ms 为单位的

fromXDelta/fromYDelta 是动画开始时 view x/y 轴的偏移量，一般我们都写0，

toXDelta/toYDelta 是位移动画在 view x/y 轴上最终的偏移量，也可以理解为我们想让 view 到达的新位置，也可以理解为动画的执行幅度

repeatMode 是动画的重复模式，有2个模式：reverse/restart。 reverse是回复原状，restart是重复执行。

repeatCount 是动画的重复次数

Animator.setRepeatCount(ValueAnimator.INFINITE) 也可以实现重复执行的效果

fillAfter 动画执行后是否保留 view 所在的新位置， true 保留，false 回归初始位置

fillBefore 和fillAfter不一样，不论是 true 还是 false，都会回归初始位置

这里注意 repeatMode/repeatCount ，这2个参数必须都写才有意思，只写一个是不成立的，我在下面会专门说下重复模式和重复次数的问题，这个和大家想象有些不一样，我可是专门都跑了一遍才清楚的。

java 代码定义：

TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);

translateAnimation.setDuration(600);

translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);

translateAnimation.setRepeatCount(1);

imageTest.startAnimation(translateAnimation);

我们也是可以 new 一个 tween 动画的直接实现类出来的，这里使用的是 TranslateAnimation 最简单的构造函数

上面说了 tween 动画有3种参数形式：30，30%，30%p，这里我们就来试试看啊，不试试怎么能清楚尼...

让我们来看看30%，上面使用的是100px，现在我们来看看100%是啥样子的，看看和猜测的是不是一样，向右位移自身尺寸的100%后，应该是靠近右侧边缘了

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="100%"

android:toYDelta="100%"

效果图:

ezgif.com-video-to-gif.gif

啊，和我们预计的一样，向右位移了 view 自身的宽高值，和明显的能够看出来

接下来让我们看看 30%p，为了效果明显，数值这里使用了 80%p

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="80%p"

android:toYDelta="80%p"

效果图：

ezgif.com-video-to-gif.gif

哈哈，大伙注意啊，这里 view 的父控件可是根视图节点了，所以向右偏移量很大，直接出去了，大伙没有没想过要是给这个 view 添加一个父控件，会怎么样呢...让我们来看看：

view 的大小是100dp，给view 添加一个200dp 的外壳，蓝色背景

xml布局：

android:layout_width="200dp"

android:layout_height="200dp"

android:layout_centerHorizontal="true"

android:background="@color/colorPrimary">

android:id="@+id/acg"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_centerInParent="true"

android:layout_marginTop="50dp"

android:src="@color/colorAccent"/>

动画不变，还是设置80%p

效果图：

ezgif.com-video-to-gif.gif

啊嘞，咱们的粉色的 view 怎么没了，啦啦啦，大伙不知道平时注意没有，viewGroup 是不允许子控件超出自己的范围的，所以咱们的 view 在位移出父控件的范围后就消失不见了，这里我们需要设置一下：

需要在布局根节点设置android:clipChildren="false"才行，注意不是在这个父控件设置，是在 xml 的根节点设置，这点要注意啊，看我的这篇文章 Android 布局小技巧汇总

xml 根节点设置 android:clipChildren="false" 才行

Snip20170724_20.png

效果图：

ezgif.com-video-to-gif.gif

这样接可以看到效果了，这次位移的幅度就是我们添加的这个200dp 的父控件了

scale 缩放动画

效果图：

ezgif.com-video-to-gif.gif

这是缩放的效果，和预想的有点不同的是，缩放中心点怎么不是 view 的中心呢，那么我们来看下 xml 代码：

android:duration="600"

android:fillAfter="true"

android:fromXScale="1"

android:fromYScale="1"

android:toXScale="0.3"

android:toYScale="0.3"

恩，看上面的 xml 设置中，里面没有设置缩放中心点的参数，那么上面的缩放就是走的是默认设置了，可以看到：缩放的默认中心点是 view 的左上角，这也是 tween 动画坐标系的原点，从这一点考虑也是可以理解默认中心点在左上角的设置了。

上面 xml 中属性的设置很好理解，fromXX是动画开始的数值，toXX 是动画结束时的数值，这里说一下，缩放的数值 1 是原始大小，0是没有大小，2是原始大小的2倍，所以说缩放的参数很好理解。

上面没写缩放中心点设置，那么当然中心点也是可以设置的，参数是：pivotX/pivotY，中心点的坐标，比如中心点设置在 view 的中心，数值可以这样写：50% 。写0.5表示偏移量是px 值。50%p表示中心点在view 的左上角坐标+父容器的宽高的一半之后的位置

xml

android:duration="600"

android:fillAfter="true"

android:fromXScale="1"

android:fromYScale="1"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="0.3"

android:toYScale="0.3"

效果图：

ezgif.com-video-to-gif.gif

rotate 旋转动画

效果图：

ezgif.com-video-to-gif.gif

xml：

android:duration="600"

android:fillAfter="true"

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="360"

rotate 和 scale 差不多，除了数值不同，其他都一样。rotate 因为是旋转，所以参数肯定是设置的旋转多少度，需要注意的是正数是顺时针转，负数是逆时针转，其他的没什么可说的了。

alphe 透明度动画

效果图：

ezgif.com-video-to-gif.gif

xml:

android:duration="600"

android:fillAfter="true"

android:fromAlpha="1"

android:toAlpha="0"

哈哈，看完上面的 alphe透明度动画很简单了吧，注意数值1是不透明，0是完全透明。

tween动画的 repeat 重复模式

translate 的第一个效果图就是使用了动画的重复模式的，简单的说重复模式就是在动画结束后对 view 进行一些逻辑上的操作，可以重复执行和反向执行。

这里设计到2个参数设置： repeatMode / repeatCount，重复模式 / 重复次数

先看一下xml 的属性设置

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="80%"

android:toYDelta="80%"

这里一个位移动画，里面设置有重复模式和重复次数。首先说明一下，repeatMode和repeatCount二者缺一不可，必须都得写才能生效

repeatMode 分2种：

reverse 反向执行动画，就是动画时怎么来的，就怎么回去

restart 重复执行动画，就是动画反复执行，不过注意动画结束后就会回到初始位置，显得有些突兀

我们来看看效果是什么样的，这样才好理解不是，注意这里 repeatCount 都是设置为1

reverse 反向执行效果图：

ezgif.com-video-to-gif.gif

restart 重复执行效果图：

ezgif.com-video-to-gif.gif

这里使用了高采样率转换的 gif，可以很清楚的看出来在第一次动画执行完后瞬间 view 就回归到了初始位置再执行了一次动画，中间切换的效果太突兀了，不是很友好。

好了看完了 repeatMode ，那么大家来猜测下 repeatCount 重复次数的使用规律，其实看完上面的都应该明白了，重复次数是指动画在执行完成后再按照某种方式执行多少次，我们写在 repeatCount 里面的数字是不包含第一次的，注意这点基本就可以了，比如我们想让上面这个动画来回执行2个大循环，既动画执行完后反向执行一次这算一个大循环，那么repeatCount我们写几呢，是3，不算第一次，大伙算算，自己试试，下面是效果图：

ezgif.com-video-to-gif.gif

好了是不是很咱们想的一样，自己多动手，多试试，google 的 api 基本我们都能搞明白。

AnimationSet 动画集合

android 中的动画不单单可以单独执行一种效果，更是可以多个动画效果一起执行的。下面看个例子：

android:duration="600"

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:shareInterpolator="true">

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="80%"