1、前言
本文github地址：https://github.com/qike2015/SignUpAnimation
在网站上看到一个很绚丽的注册设计,先看下原设计效果：
下面是我实现的效果：
本文讲解如何通过属性动画实现该效果。
动画分析
整个动画流程分成下面三部分来单独实现：
- 注册按钮点击后的扩散动画
- 网络请求动画
- 主页面动画
扩散动画：当用户点击注册按钮后，整个按钮呈圆形扩散直至铺满整个屏幕。
网络请求动画可以分为以下几个部分：
-
signUp文字入场动画:文字从下往上平移，同时播放缩放动画，并且透明度逐渐加深。 - 白线延长动画，线条向右延伸，
-
success文字入场动画，同时伴随sign up文字的出场动画，由左往右移动与sign up碰撞后减速停止，sign up向右移动并消失，俩个文字透明度皆发生变化。
请求网络动画播放成功后跳转到主页面，主页的Tab栏由铺满整个屏幕逐渐变小到原始高度，并且Tab栏的俩个菜单按钮透明度也发生变化。
2、注册按钮后的扩散动画
点击注册按钮后，显示动画播放view，开始播放缩放动画。
整个缩放动画就是一个圆形的view的放大动画，将该view的背景设置为shape即可实现圆形效果。
圆形view的背景代码：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="180dp"/>
<solid android:color="@color/colorPrimary"/>
</shape>
扩散动画代码：
public static void spreadAni(View target, float endScale, SimpleAnimatorListener endListener)
{
ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(target, "ScaleX", endScale);
scaleXAnimator.setInterpolator(new AccelerateInterpolator());
ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(target, "ScaleY", endScale);
scaleYAnimator.setInterpolator(new AccelerateInterpolator());
AnimatorSet animSet = new AnimatorSet();
animSet.play(scaleXAnimator).with(scaleYAnimator);
animSet.setDuration(500);
animSet.start();
animSet.addListener(endListener);
}
整个扩散（放大）动画分成俩个属性动画，分别播放view在x方向和y方向的缩放动画，该动画最重要的地方在于计算最终放大比例，因为我们在布局文件中，缩放view的位置并没有在整个动画的正中间，还是向上偏移了一点，所以最终缩放值在计算结果的基础上加1，否则动画结束后背景颜色无法铺满整个屏幕：
//计算扩散动画最终放大比例
private float getScale()
{
//原始扩散圆的直径
int orgWidth = v_spread.getMeasuredWidth();
int width = getMeasuredWidth();
int height = getMeasuredHeight();
//扩散圆最终扩散的圆的半径
float finalDiameter = (int) (Math.sqrt(width * width + height * height));
//因为圆未居中，所以加1
return finalDiameter / orgWidth + 1;
}
3、网络请求动画
扩散动画播放结束后开始播放网络请求动画。整个过程分成三部分，下面分别讲解实现方法。
3.1 signUp入场动画文字
扩散动画后结束后紧接着播放singUp的入场动画，给动画设置监听，在监听的onAnimationEnd(Animator animation)中开始入场动画。
入场动画代码：
/**
* sign up文字入场动画
*
* @param target 需要播放动画的view
* @param endListener 动画监听
*/
public static void signUpTextInAni(View target, SimpleAnimatorListener endListener)
{
target.setVisibility(View.VISIBLE);
int targetHeight = target.getMeasuredHeightAndState();
ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, "ScaleX", 0.75f, 0.87f, 1f, 1.1f, 1.0f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, "ScaleY", 0.75f, 0.87f, 1f, 1.1f, 1.0f);
ObjectAnimator translationAni = ObjectAnimator.ofFloat(target, "TranslationY", targetHeight * 0.8f, -targetHeight * 0.2f, 0);
ObjectAnimator alphaAni = ObjectAnimator.ofFloat(target, "Alpha", 0.5f, 1.0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(scaleX, scaleY, translationAni, alphaAni);
animatorSet.setDuration(2000);
animatorSet.start();
animatorSet.addListener(endListener);
}
动画开始播放时，将signUp文字（简称注册文字，下同）显示，通过AnimatorSet的playTogether()方法同上开启四格动画，即注册文字的缩放动画（x、y方向）、Y方向的平移动画，透明度提升动画。其中，缩放动画从0.75倍放大到1.1倍大小后再缩放回原始大小(1.0倍)，这样实现一个放大膨胀然后再轻微反弹缩小到原始大小的效果。平移动画类似，上升后再反弹下沉一定高度。具体变化值详见代码。
3.2 白线延长动画
注册文字入场动画播放动画结束后开始白色线条的延长动画。这个动画就是线条在X方向的缩放：
public static void lineExpendAni(View target, SimpleAnimatorListener endListener)
{
target.setVisibility(View.VISIBLE);
ObjectAnimator animator = ObjectAnimator.ofFloat(target, "ScaleX", 0, 0.6f, 0.9f, 1.0f);
animator.setDuration(1500);
animator.setInterpolator(new DecelerateInterpolator());
target.setPivotX(0);
animator.start();
animator.addListener(endListener);
}
利用setPivotX(0)方法把线条X方向的中心点（可理解为缩放的起始点，动画将以该坐标为中线开始辐射，默认为view的中线点）设置0，这样扩大动画只会向一个方向发生，即可实现线条延长效果。动画播放数值"0, 0.6f, 0.9f, 1.0f"并不是等差排列，还是越来越小,这样即可实现减速效果（根据差值的缩小梯度绝对减速度的变化值）。
3.3 success文字入场动画
public static void successInAni(View success, View signUpView, SimpleAnimatorListener endListener)
{
success.setVisibility(View.VISIBLE);
int durationTime = 1000;
int width = success.getMeasuredWidth();
ObjectAnimator successTranslationAni = ObjectAnimator.ofFloat(success, "TranslationX", width * -1.2f, width * -0.2f, 0);
ObjectAnimator successAlphaAni = ObjectAnimator.ofFloat(success, "Alpha", 0.1f, 1.0f, 1.0f);
ObjectAnimator signUpTranslationAni = ObjectAnimator.ofFloat(signUpView, "TranslationX", 0, width * 0.75f, width * 1.5f);
signUpTranslationAni.setInterpolator(new AccelerateInterpolator());
ObjectAnimator signUpAlphaAni = ObjectAnimator.ofFloat(signUpView, "Alpha", 1.0f, 1.0f, 0.4f, 0.0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(successTranslationAni, successAlphaAni, signUpTranslationAni, signUpAlphaAni);
animatorSet.setDuration(durationTime);
animatorSet.start();
animatorSet.addListener(endListener);
}
success文字（成功文字）的入场动画包含俩组动画：
- 成功文字入场
- 注册文字出场
俩组动画相互对应，即X方向的平移和透明度的增减。动画的播放值代码写得很清楚，这里就不在累赘复述了。
4、主页动画
我们可动画播放view设置一个自定义监听事件，当成功文字播放完成后，回调给activity。当动画结束后，跳转到主页面。
主页显示后，播放动画，动画包含俩个动画，先看代码：
{
ValueAnimator valueAnimator = ValueAnimator.ofInt(rl_title.getHeight(), DensityUtils.dp2px(this, 50));
valueAnimator.setInterpolator(new AccelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(ValueAnimator animation)
{
rl_title.getLayoutParams().height = (int) animation.getAnimatedValue();
rl_title.requestLayout();
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(valueAnimator,
ObjectAnimator.ofFloat(iv_me, "Alpha", 0.1f, 1.0f),
ObjectAnimator.ofFloat(iv_menu, "Alpha", 0.1f, 1.0f));
animatorSet.setDuration(1200);
animatorSet.start();
}
代码中：我们利用一个ValueAnimator实现tabView(rl_title)的高度收缩动画，rl_title的起始高度铺满整个屏幕，最后高度变为50dp收缩到屏幕顶部，同时俩个按钮 iv_me 、iv_menu透明度加深。
给ValueAnimator通过addUpdateListener设置一个数值变化监听，根据动画计算的当前值通过布局参数动态设置rl_title的高度。
5、结束
最后奉上源码下载地址：http://download.csdn.net/detail/q649381130/9621869
