[置顶] 仿当当App首页按钮渐变动画效果

昨天群里有个朋友说当当App首页顶部的那几个按钮渐变动画效果如何实现。然后果断安装了当当App，打开查看下是什么样的动画。来看下当当App首页：



可以看到当我滑动一些距离后，顶部三个浅红色的按钮从右边第一个依次以从小到大的，然后再恢复到原大小的动画效果。还不能体会的朋友可以安装当当的App亲自体验一下。

我们都知道Android为我们提供了三种动画实现，我之前写过动画的系列博客，分别讲解了Android三种动画的实现方式和具体分析。这里我就不再过多介绍了，如果想了解更多的话，可以看这里：Android动画之旅

今天我们要实现的动画效果简单分析后流程如下：按钮从右到左以渐变和缩放的效果来展示。核心的地方就是动画的组合播放和次序播放。相信了解属性动画的朋友都不陌生。

ok，来看我们今天实现的效果：



如何该实现这样的动画效果呢？ 上面我们分析了动画的核心就是组合动画播放以及次序的播放。

属性动画的实现可以分为两种方式：

（1）代码中实现

（2）XML种配置实现

我们采用第二种方式。首先我们要在res目录下创建animator文件夹。/res/animator

在animator中创建我们objectAniamtor动画。我们分析了，动画首先是透明度渐变和X,Y轴的放大，当放大完毕后再缩放到图片本身大小。ok，很简单，直接看代码：

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

<!-- 透明度渐变动画 -->
<objectAnimator
android:propertyName="alpha"
android:valueFrom="0.5"
android:valueTo="1.0"
android:duration="700"
/>
<!-- X轴方向放大 -->
<objectAnimator
android:propertyName="scaleX"
android:valueFrom="0.7"
android:valueTo="1.1"
android:duration="700"
/>
<!-- Y轴方向放大 -->
<objectAnimator
android:propertyName="scaleY"
android:valueFrom="0.7"
android:valueTo="1.1"
android:duration="700"
/>
<!-- X轴方向缩放到图片大小 -->
<objectAnimator
android:propertyName="scaleX"
android:valueFrom="1.1"
android:valueTo="1.0"
android:duration="700"
android:startOffset="700"
/>
<!-- Y轴方向缩放到图片大小 -->
<objectAnimator
android:propertyName="scaleY"
android:valueFrom="1.1"
android:valueTo="1.0"
android:duration="700"
android:startOffset="700"
/>
</set>

基本的实现过程我都标记了注释，startOffset属性来指定动画在*ms后开始运行。即当放大透明度动画完成后开始缩放到原来大小。因为动画是第一个--->第二个---->第三个逐渐去改变的，给用户带来层次感的效果。所以我们还需要使用Animator的setStartDelay()方法设置一下动画的延迟播放：

twoSet.setStartDelay(100);
threeSet.setStartDelay(250);

三个动画的效果基本一致，只是缩放的系数不同，大家可以自行调节。

到这里相信大家对动画的实现原理都了解了。大家可以动手体验一下。ok，今天的博客就写到这了，工作！！！ thks~

源码下载